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

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

                    <div class="form-group field">
                        <p-checkbox inputId="RerecordWatched" [(ngModel)]="RerecordWatched" name="RerecordWatched"
                            class="mb-2 w-full label" [binary]="true"
                            label="{{ 'dashboard.autoexpire.rerecord_label' | translate }}">
                        </p-checkbox>
                        <small class="block">
                            {{ 'dashboard.autoexpire.rerecord_desc' | translate }}
                        </small>
                    </div>

                    <div class="form-group field">
                        <p-checkbox inputId="AutoExpireWatchedPriority" [(ngModel)]="AutoExpireWatchedPriority"
                            name="AutoExpireWatchedPriority" class="mb-2 w-full label" [binary]="true"
                            label="{{ 'dashboard.autoexpire.watched_label' | translate }}">
                        </p-checkbox>
                        <small class="block">
                            {{ 'dashboard.autoexpire.watched_desc' | translate }}
                        </small>
                    </div>

                    <div class="form-group field">
                        <label for="AutoExpireLiveTVMaxAge" class="label block">{{ 'dashboard.autoexpire.livetv_label' |
                            translate }}</label>
                        <p-inputNumber [(ngModel)]="AutoExpireLiveTVMaxAge" name="AutoExpireLiveTVMaxAge"
                            id="AutoExpireLiveTVMaxAge" [showButtons]="true" [min]="0" [max]="365"
                            [step]="1"></p-inputNumber>
                        <small class="block">
                            {{ 'dashboard.autoexpire.livetv_desc' | translate }}
                        </small>
                    </div>

                    <div class="form-group field">
                        <label for="AutoExpireDayPriority" class="label block">{{ 'dashboard.autoexpire.priority_label' |
                            translate }}</label>
                        <p-inputNumber [(ngModel)]="AutoExpireDayPriority" name="AutoExpireDayPriority"
                            id="AutoExpireDayPriority" [showButtons]="true" [min]="1" [max]="400"
                            [step]="1"></p-inputNumber>
                        <small class="block">
                            {{ 'dashboard.autoexpire.priority_desc' | translate }}
                        </small>
                    </div>

                    <div class="form-group field">
                        <label for="AutoExpireExtraSpace" class="label block">{{ 'dashboard.autoexpire.disk_label' |
                            translate }}</label>
                        <p-inputNumber [(ngModel)]="AutoExpireExtraSpace" name="AutoExpireExtraSpace"
                            id="AutoExpireExtraSpace" [showButtons]="true" [min]="0" [max]="200"
                            [step]="1"></p-inputNumber>
                        <small class="block">
                            {{ 'dashboard.autoexpire.disk_desc' | translate }}
                        </small>
                    </div>

                    <div class="form-group field">
                        <label for="DeletedMaxAge" class="label block">{{ 'dashboard.autoexpire.deleted_label' | translate }}</label>
                        <p-inputNumber [(ngModel)]="DeletedMaxAge" name="DeletedMaxAge"
                            id="DeletedMaxAge" [showButtons]="true" [min]="-1" [max]="365"
                            [step]="1"></p-inputNumber>
                        <small class="block">
                            {{ 'dashboard.autoexpire.deleted_desc' | translate }}
                        </small>
                    </div>

                </div>

            </div>
        </ng-template>

        <ng-template pTemplate="footer">
            <div class="grid nogutter">
                <div class="col-12">
                    <p-message *ngIf="successCount > 0 && errorCount == 0 && !autoexpire.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(); autoexpire.form.markAsPristine()" [disabled]="!autoexpire.dirty"></p-button>
            </div>
        </ng-template>
    </p-card>
</form>