<form class="ml-3 mr-3" name="priorities" #priorities="ngForm">
    <p-card class="m-5">
        <ng-template pTemplate="title">
            {{ 'dashboard.priorities.heading' | translate }}
        </ng-template>
        <ng-template pTemplate="subtitle">
            {{ 'dashboard.priorities.subtitle' | translate }}
        </ng-template>
        <ng-template pTemplate="content">
            <div class="grid">
                <div class="mb-4 w-full">

                    <p-fieldset class="mb-4 w-full" legend="{{ 'dashboard.priorities.panel_scheduler' | translate }}"
                        [toggleable]="true" [collapsed]="false">

                        <div class="form-group field">
                            <label for="SchedOpenEnd" class="label block">{{ 'dashboard.priorities.btob_label'
                                |
                                translate }}</label>
                            <p-dropdown appendTo="body" [options]="btobList" [(ngModel)]="SchedOpenEnd"
                                class="w-full mb-2" name="SchedOpenEnd" aria-describedby="SchedOpenEnd-help"
                                optionLabel="Label" optionValue="Value">
                            </p-dropdown>
                            <small class="block mt-2" id="SchedOpenEnd-help">
                                {{ 'dashboard.priorities.btob_desc' | translate }}
                            </small>
                        </div>

                        <div class="form-group field">
                            <label for="PrefInputPriority" class="label block">{{ 'dashboard.priorities.inprio_label' |
                                translate }}</label>
                            <p-inputNumber [(ngModel)]="PrefInputPriority" name="PrefInputPriority"
                                id="PrefInputPriority" [showButtons]="true" [min]="1" [max]="99"
                                [step]="1"></p-inputNumber>
                            <small class="block">
                                {{ 'dashboard.priorities.inprio_desc' | translate }}
                            </small>
                        </div>

                        <div class="form-group field">
                            <label for="HDTVRecPriority" class="label block">{{ 'dashboard.priorities.hdtv_label' |
                                translate }}</label>
                            <p-inputNumber [(ngModel)]="HDTVRecPriority" name="HDTVRecPriority" id="HDTVRecPriority"
                                [showButtons]="true" [min]="-99" [max]="99" [step]="1"></p-inputNumber>
                            <small class="block">
                                {{ 'dashboard.priorities.hdtv_desc' | translate }}
                            </small>
                        </div>

                        <div class="form-group field">
                            <label for="WSRecPriority" class="label block">{{ 'dashboard.priorities.wstv_label' |
                                translate }}</label>
                            <p-inputNumber [(ngModel)]="WSRecPriority" name="WSRecPriority" id="WSRecPriority"
                                [showButtons]="true" [min]="-99" [max]="99" [step]="1"></p-inputNumber>
                            <small class="block">
                                {{ 'dashboard.priorities.wstv_desc' | translate }}
                            </small>
                        </div>


                    </p-fieldset>

                    <br><br>

                    <p-fieldset class="mb-4 w-full"
                        legend="{{ 'dashboard.priorities.panel_accessibility' | translate }}" [toggleable]="true"
                        [collapsed]="false">

                        <div class="form-group field">
                            <label for="SignLangRecPriority" class="label block">{{
                                'dashboard.priorities.signlang_label' | translate }}</label>
                            <p-inputNumber [(ngModel)]="SignLangRecPriority" name="SignLangRecPriority"
                                id="SignLangRecPriority" [showButtons]="true" [min]="-99" [max]="99"
                                [step]="1"></p-inputNumber>
                            <small class="block">
                                {{ 'dashboard.priorities.signlang_desc' | translate }}
                            </small>
                        </div>

                        <div class="form-group field">
                            <label for="OnScrSubRecPriority" class="label block">{{
                                'dashboard.priorities.invision_label' | translate }}</label>
                            <p-inputNumber [(ngModel)]="OnScrSubRecPriority" name="OnScrSubRecPriority"
                                id="OnScrSubRecPriority" [showButtons]="true" [min]="-99" [max]="99"
                                [step]="1"></p-inputNumber>
                            <small class="block">
                                {{ 'dashboard.priorities.invision_desc' | translate }}
                            </small>
                        </div>

                        <div class="form-group field">
                            <label for="CCRecPriority" class="label block">{{ 'dashboard.priorities.subcc_label' |
                                translate }}</label>
                            <p-inputNumber [(ngModel)]="CCRecPriority" name="CCRecPriority" id="CCRecPriority"
                                [showButtons]="true" [min]="-99" [max]="99" [step]="1"></p-inputNumber>
                            <small class="block">
                                {{ 'dashboard.priorities.subcc_desc' | translate }}
                            </small>
                        </div>

                        <div class="form-group field">
                            <label for="HardHearRecPriority" class="label block">{{
                                'dashboard.priorities.hardhear_label' | translate }}</label>
                            <p-inputNumber [(ngModel)]="HardHearRecPriority" name="HardHearRecPriority"
                                id="HardHearRecPriority" [showButtons]="true" [min]="-99" [max]="99"
                                [step]="1"></p-inputNumber>
                            <small class="block">
                                {{ 'dashboard.priorities.hardhear_desc' | translate }}
                            </small>
                        </div>

                        <div class="form-group field">
                            <label for="AudioDescRecPriority" class="label block">{{
                                'dashboard.priorities.audiodesc_label' | translate }}</label>
                            <p-inputNumber [(ngModel)]="AudioDescRecPriority" name="AudioDescRecPriority"
                                id="AudioDescRecPriority" [showButtons]="true" [min]="-99" [max]="99"
                                [step]="1"></p-inputNumber>
                            <small class="block">
                                {{ 'dashboard.priorities.audiodesc_desc' | translate }}
                            </small>
                        </div>

                    </p-fieldset>

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

        <ng-template pTemplate="footer">
            <div class="grid nogutter">
                <div class="col-12">
                    <p-message *ngIf="successCount > 0 && errorCount == 0 && !priorities.dirty" severity="success"
                        text="{{ 'common.savesuccess' | translate }}"></p-message>
                    <p-message *ngIf="this.errorCount > 0" 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(); priorities.form.markAsPristine()" [disabled]="!priorities.dirty"></p-button>
            </div>
        </ng-template>
    </p-card>
</form>