<form class="ml-3 mr-3" name="backendwakeup" #backendwakeup="ngForm">
    <p-card class="m-5">
        <ng-template pTemplate="title">
            {{ 'settings.backendwake.title' | translate }}
        </ng-template>
        <ng-template pTemplate="subtitle">
            {{ 'settings.backendwake.subtitle' | translate }}
        </ng-template>
        <ng-template pTemplate="content">
            <div class="grid">

                <!-- Master Backend Panel -->
                <p-fieldset class="mb-4 w-full" legend="{{ 'settings.backendwake.master.title' | translate }}"
                    [toggleable]="true" [collapsed]="true">

                    <div class="form-group field">
                        <label for="WOLbackendReconnectWaitTime" class="label block">{{
                            'settings.backendwake.master.delay_label' | translate }}</label>
                        <p-inputNumber [(ngModel)]="WOLbackendReconnectWaitTime"
                            name="WOLbackendReconnectWaitTime" id="WOLbackendReconnectWaitTime" [showButtons]="true"
                            [min]="0" [max]="1200" [step]="5"></p-inputNumber>
                        <small class="block">
                            {{ 'settings.backendwake.master.delay_desc' | translate }}
                        </small>
                    </div>

                    <div class="form-group field">
                        <label for="WOLbackendConnectRetry" class="label block">{{
                            'settings.backendwake.master.attempts_label' | translate }}</label>
                        <p-inputNumber [(ngModel)]="WOLbackendConnectRetry" name="WOLbackendConnectRetry"
                            id="WOLbackendConnectRetry" [showButtons]="true" [min]="1" [max]="60"
                            [step]="1"></p-inputNumber>
                        <small class="block">
                            {{ 'settings.backendwake.master.attempts_desc' | translate }}
                        </small>
                    </div>

                    <div class="form-group field">
                        <label for="WOLbackendCommand" class="label block">{{ 'settings.backendwake.master.cmd_label' |
                            translate }}</label>
                        <input pInputText id="WOLbackendCommand" [(ngModel)]="WOLbackendCommand"
                            name="WOLbackendCommand" class="mb-2 form-control w-full" />
                        <small class="block">
                            {{ 'settings.backendwake.master.cmd_desc' | translate }}
                        </small>
                    </div>

                </p-fieldset>

                <!-- Slave Backend Panel -->
                <p-fieldset class="mb-4 w-full" legend="{{ 'settings.backendwake.slave.title' | translate }}"
                    [toggleable]="true" [collapsed]="true">

                    <div class="form-group field">
                        <label for="SleepCommand" class="label block">{{ 'settings.backendwake.slave.sleep_label' | translate
                            }}</label>
                        <input pInputText id="SleepCommand" [(ngModel)]="SleepCommand" name="SleepCommand"
                            class="mb-2 form-control w-full" />
                        <small class="block">
                            {{ 'settings.backendwake.slave.sleep_desc' | translate }}
                        </small>
                    </div>

                    <div class="form-group field">
                        <label for="WakeUpCommand" class="label block">{{ 'settings.backendwake.slave.wake_label' | translate
                            }}</label>
                        <input pInputText id="WakeUpCommand" [(ngModel)]="WakeUpCommand" name="WakeUpCommand"
                            class="mb-2 form-control w-full" />
                        <small class="block">
                            {{ 'settings.backendwake.slave.wake_desc' | translate }}
                        </small>
                    </div>

                </p-fieldset>

            </div>
        </ng-template>

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