<form class="ml-3 mr-3" name="miscsettings" #miscsettings="ngForm">
    <p-card class="m-5">
        <ng-template pTemplate="title">
            {{ 'settings.misc.title' | translate }}
        </ng-template>
        <ng-template pTemplate="subtitle">
            {{ 'settings.misc.subtitle' | translate }}
        </ng-template>
        <ng-template pTemplate="content">
            <div class="grid">
                <!-- File Management Panel -->
                <p-fieldset class="mb-4 w-full" legend="{{ 'settings.misc.panel_filemgmt' | translate }}" [toggleable]="true" [collapsed]="true">

                    <div class="form-group field">
                        <p-checkbox inputId="MasterBackendOverride" [(ngModel)]="miscData.MasterBackendOverride"
                            name="MasterBackendOverride" #MasterBackendOverride="ngModel" class="mb-2 w-full" [binary]="true"
                            label="{{ 'settings.misc.mbo_label' | translate }}">
                        </p-checkbox>
                        <small class="block">
                            {{ 'settings.misc.mbo_desc' | translate }}
                        </small>
                    </div>

                    <div class="form-group field">
                        <p-checkbox inputId="DeletesFollowLinks" [(ngModel)]="miscData.DeletesFollowLinks"
                            name="DeletesFollowLinks" #DeletesFollowLinks="ngModel" class="mb-2 w-full" [binary]="true"
                            label="{{ 'settings.misc.follow_label' | translate }}">
                        </p-checkbox>
                        <small class="block">
                            {{ 'settings.misc.follow_desc' | translate }}
                        </small>
                    </div>

                    <div class="form-group field">
                        <p-checkbox inputId="TruncateDeletesSlowly" [(ngModel)]="miscData.TruncateDeletesSlowly"
                            name="TruncateDeletesSlowly" #TruncateDeletesSlowly="ngModel" class="mb-2 w-full" [binary]="true"
                            label="{{ 'settings.misc.slowly_label' | translate }}">
                        </p-checkbox>
                        <small class="block">
                            {{ 'settings.misc.slowly_desc' | translate }}
                        </small>
                    </div>

                    <div class="form-group field">
                        <label for="HDRingbufferSize" class="block" >{{ 'settings.misc.ringbuf_label' | translate }}</label>
                        <p-inputNumber [(ngModel)]="miscData.HDRingbufferSize" name="HDRingbufferSize" id="HDRingbufferSize" [showButtons]="true"
                            [min]="4700" [max]="94000" [step]="4700"></p-inputNumber>
                        <small class="block">
                            {{ 'settings.misc.ringbuf_desc' | translate }}
                        </small>
                    </div>

                    <div class="form-group field">
                        <label for="StorageScheduler" class="block">{{ 'settings.misc.sg_label' | translate }}</label>
                        <p-dropdown [options]="soptions " [(ngModel)]="miscData.StorageScheduler"  optionLabel="name"  optionValue="code"
                            class="block w-15rem mb-2"
                            name="StorageScheduler" #StorageScheduler="ngModel"   >
                        </p-dropdown>
                        <small class="block" >
                            {{ 'settings.misc.sg_desc' | translate }}
                        </small>
                    </div>
                </p-fieldset>

                <!-- UPnP Section -->
                <p-fieldset class="mb-4 w-full" legend="{{ 'settings.misc.panel_upnp' | translate }}" [toggleable]="true" [collapsed]="true">
                    <div class="form-group field">
                        <label for="UPNPWmpSource" class="block">{{ 'settings.misc.upnp_label' | translate }}</label>
                        <p-dropdown [options]="uoptions" [(ngModel)]="miscData.UPNPWmpSource"  optionLabel="name"  optionValue="code"
                            class="block w-15rem mb-2"
                            name="UPNPWmpSource" #UPNPWmpSource="ngModel" >
                        </p-dropdown>
                        <small class="block" >
                            {{ 'settings.misc.upnp_desc' | translate }}
                        </small>
                    </div>
                </p-fieldset>

                <div class="mb-4 w-full">

                    <div class="form-group field">
                        <label for="MiscStatusScript" class="block">{{ 'settings.misc.statapp_label' | translate }}</label>
                        <input pInputText id="MiscStatusScript" [(ngModel)]="miscData.MiscStatusScript" name="MiscStatusScript"
                            #MiscStatusScript="ngModel" class="mb-2 form-control w-full" />
                        <small class="block">
                            <!-- {{ 'settings.misc.statapp_desc' | translate }} -->
                            <div [innerHTML]="'settings.misc.statapp_desc' | translate"></div>
                        </small>
                    </div>

                    <div class="form-group field">
                        <p-checkbox inputId="DisableAutomaticBackup" [(ngModel)]="miscData.DisableAutomaticBackup"
                            name="DisableAutomaticBackup" #DisableAutomaticBackup="ngModel" class="mb-2 w-full" [binary]="true"
                            label="{{ 'settings.misc.disback_label' | translate }}">
                        </p-checkbox>
                        <small class="block">
                            {{ 'settings.misc.disback_desc' | translate }}
                        </small>
                    </div>

                    <div class="form-group field">
                        <p-checkbox inputId="DisableFirewireReset" [(ngModel)]="miscData.DisableFirewireReset"
                            name="DisableFirewireReset" #DisableFirewireReset="ngModel" class="mb-2 w-full" [binary]="true"
                            label="{{ 'settings.misc.disfwr_label' | translate }}">
                        </p-checkbox>
                        <small class="block">
                            {{ 'settings.misc.disfwr_desc' | translate }}
                        </small>
                    </div>

                </div>
            </div>
        </ng-template>

        <ng-template pTemplate="footer">
            <div class="grid nogutter">
                <div class="col-12">
                    <p-message *ngIf="this.miscData.successCount > 0 && this.miscData.errorCount == 0 && !miscsettings.dirty"
                        severity="success" text="{{ 'common.savesuccess' | translate }}" ></p-message>
                    <p-message *ngIf="this.miscData.errorCount > 0 && !miscsettings.dirty"
                        severity="error" text="{{ 'common.networkfail' | translate }}" ></p-message>
                </div>
                <p-button class="col pr-1" label="{{'common.save' | translate}}"  icon="pi pi-save" iconPos="left" (onClick)="saveForm(); miscsettings.form.markAsPristine()"
                                 [disabled]="(!miscsettings.dirty || false)"></p-button>
                <p-button class="col-2 help-button" label="{{'common.help' | translate}}" (onClick)="showHelp()"
                    icon="pi pi-info-circle" styleClass="p-button-info"></p-button>
            </div>
        </ng-template>
    </p-card>
</form>
