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

                    <div class="form-group field">
                        <label for="Description" class="label block">{{ 'settings.capture.diseqc.description_label' |
                            translate }}</label>
                        <input pInputText id="ip" [(ngModel)]="diseqcTree.Description" name="Description"
                            #Description="ngModel" class="mb-2 form-control w-full" />
                        <small class="block">
                            {{ 'settings.capture.diseqc.description_desc' | translate }}
                        </small>
                    </div>

                    <div class="form-group field">
                        <label for="ScrUserband" class="label block">{{ 'settings.capture.diseqc.unicable.userband_label' |
                            translate
                            }}</label>
                        <p-inputNumber [(ngModel)]="diseqcTree.ScrUserband" name="ScrUserband" id="ScrUserband"
                            [showButtons]="true" [min]="0" [max]="7" [step]="1"></p-inputNumber>
                        <small class="block">
                            <div [innerHTML]="'settings.capture.diseqc.userband_desc' | translate"></div>
                        </small>
                    </div>

                    <div class="form-group field">
                        <label for="ScrFrequency" class="label block">{{ 'settings.capture.diseqc.unicable.frequency_label' |
                            translate }}</label>
                        <p-inputNumber [(ngModel)]="diseqcTree.ScrFrequency" name="ScrFrequency" id="ScrFrequency"
                            mode="decimal" inputId="withoutgrouping" [useGrouping]="false">
                        </p-inputNumber>
                        <small class="block">
                            {{ 'settings.capture.diseqc.unicable.frequency_desc' | translate }}
                        </small>
                    </div>

                    <div class="form-group field">
                        <label for="ScrPin" class="label block">{{ 'settings.capture.diseqc.unicable.pin_label' | translate
                            }}</label>
                        <p-inputNumber [(ngModel)]="diseqcTree.ScrPin" name="ScrPin" id="ScrPin" mode="decimal"
                            inputId="withoutgrouping" [useGrouping]="false" [min]="-1" [max]="255">
                        </p-inputNumber>
                        <small class="block">
                            {{ 'settings.capture.diseqc.unicable.pin_desc' | translate }}
                        </small>
                    </div>

                    <div class="form-group field">
                        <label for="CmdRepeat" class="label block">{{ 'settings.capture.diseqc.cmdrepeat_label' |
                            translate }}</label>
                        <p-inputNumber [(ngModel)]="diseqcTree.CmdRepeat" name="CmdRepeat" id="CmdRepeat"
                            [showButtons]="true" [min]="0" [max]="15" [step]="1"></p-inputNumber>
                        <small class="block">
                            <div [innerHTML]="'settings.capture.diseqc.cmdrepeat_desc' | translate"></div>
                        </small>
                    </div>

                    <!-- Next Device Panel -->
                    <p-fieldset class="mb-4 w-full" legend="{{ 'settings.capture.dvb.satellite_heading' | translate }}"
                        [toggleable]="true" [collapsed]="true">
                        <p-button label="{{ 'settings.capture.dvb.newsatellite_button' | translate }}"
                            *ngIf="!diseqcSubTree" (onClick)="work.displayNewDiseqc = true" icon="pi pi-plus-circle"
                            styleClass="p-button-plain">
                        </p-button>
                        <p-dialog header="{{ 'settings.capture.dvb.newsatellite_heading' | translate }}"
                            [(visible)]="work.displayNewDiseqc" [modal]="true" [style]="{width: '50vw'}"
                            [draggable]="false" [resizable]="false">
                            <label for="disenqcTypes" class="label block">{{ 'settings.capture.dvb.newsatellite_devtype' |
                                translate }}</label>
                            <p-listbox [options]="captureCardService.diseqcTypes" [(ngModel)]="selectedDiseqcType"
                                optionLabel="description" name="disenqcTypes" optionDisabled="inactive"
                                (onDblClick)="newDiseqc();"></p-listbox>
                            <ng-template pTemplate="footer">
                                <p-button icon="pi pi-times-circle" (onClick)="work.displayNewDiseqc=false"
                                    label="{{ 'common.cancel' | translate }}" styleClass="p-button-plain">
                                </p-button>
                                <p-button icon="pi pi-check-circle" (onClick)="newDiseqc();"
                                    label="{{ 'common.ok' | translate }}" styleClass="p-button-plain"
                                    [disabled]="selectedDiseqcType.inactive">
                                </p-button>
                            </ng-template>
                        </p-dialog>

                        <p-button styleClass="p-button-warning" *ngIf="diseqcSubTree" label="Delete Satellite Devices"
                            icon="pi pi-trash" (onClick)="work.displayDeleteDiseqc=true" [disabled]="!diseqcSubTree">
                        </p-button>
                        <p-dialog header="{{ 'settings.capture.dvb.satellite_delete_header' | translate }}"
                            [(visible)]="work.displayDeleteDiseqc" [modal]="true" [style]="{width: '50vw'}"
                            [draggable]="false" [resizable]="false">
                            <h2>{{ 'settings.common.ru_sure' | translate }}</h2>
                            <p>{{ 'settings.capture.dvb.satellite_delete_desc' | translate }}</p>
                            <ng-template pTemplate="footer">
                                <p-button icon="pi pi-times-circle" (click)="work.displayDeleteDiseqc=false"
                                    label="{{ 'common.no' | translate }}" styleClass="p-button-plain">
                                </p-button>
                                <p-button icon="pi pi-check-circle" (click)="deleteDiseqc()"
                                    label="{{ 'common.yes' | translate }}" styleClass="p-button-plain"></p-button>
                            </ng-template>
                        </p-dialog>

                        <app-lnb *ngIf="this.diseqcSubTree && this.diseqcSubTree.Type == 'lnb'"
                            [diseqcTree]="diseqcSubTree" [diseqcTreeList]="diseqcTreeList"
                            (baseEvent)="setDiseqcObject($event)" [dvbComponent]="dvbComponent">
                        </app-lnb>
                        <app-rotor *ngIf="this.diseqcSubTree && this.diseqcSubTree.Type == 'rotor'"
                            [diseqcTree]="diseqcSubTree" [diseqcTreeList]="diseqcTreeList"
                            (baseEvent)="setDiseqcObject($event)" [dvbComponent]="dvbComponent">
                        </app-rotor>
                        <app-switch *ngIf="this.diseqcSubTree && this.diseqcSubTree.Type == 'switch'"
                            [diseqcTree]="diseqcSubTree" [diseqcTreeList]="diseqcTreeList"
                            (baseEvent)="setDiseqcObject($event)" [dvbComponent]="dvbComponent">
                        </app-switch>
                        <app-unicable *ngIf="this.diseqcSubTree && this.diseqcSubTree.Type == 'scr'"
                            [diseqcTree]="diseqcSubTree" [diseqcTreeList]="diseqcTreeList"
                            (baseEvent)="setDiseqcObject($event)" [dvbComponent]="dvbComponent">
                        </app-unicable>

                    </p-fieldset>

                </div>
            </div>
        </ng-template>
    </p-card>
</form>