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

                    <div *ngIf="diseqcTree" [ngSwitch]="diseqcTree.Type">
                        <div class="form-group field" *ngSwitchCase="'switch'">
                            <label for="Port" class="label block">{{ 'settings.iconnection.switchport_label' | translate
                                }}</label>
                            <p-inputNumber [(ngModel)]="work.switchPort" name="Port" id="Port" [showButtons]="true"
                                [min]="1" [max]="diseqcTree.SwitchPorts" [step]="1"></p-inputNumber>
                            <small class="block">
                                {{ 'settings.iconnection.switchport_desc' | translate }}
                            </small>
                        </div>
                        <div *ngSwitchCase="'rotor'">
                            <div class="form-group field">
                                <label for="Degrees" class="label block">{{ 'settings.iconnection.longitude_label' | translate
                                    }}</label>
                                <p-inputNumber [(ngModel)]="work.rotorDegrees" name="Degrees" id="Degrees" [min]="0"
                                    [max]="180" [maxFractionDigits]="4"></p-inputNumber>
                                <br><br>
                                <div class="field-radiobutton">
                                    <p-radioButton name="hemisphere" value="1" [(ngModel)]="work.hemisphere"
                                        inputId="east"></p-radioButton>
                                    <label for="east" class="label block">{{ 'settings.iconnection.longitude_east' | translate }}</label>
                                </div>
                                <div class="field-radiobutton">
                                    <p-radioButton name="hemisphere" value="-1" [(ngModel)]="work.hemisphere"
                                        inputId="west"></p-radioButton>
                                    <label for="west" class="label block">{{ 'settings.iconnection.longitude_west' | translate }}</label>
                                </div>
                                <small class="block">
                                    {{ 'settings.iconnection.longitude_desc' | translate }}
                                </small>

                            </div>
                        </div>
                        <div *ngSwitchCase="'scr'" class="form-group field">
                            <label class="label block">{{ 'settings.iconnection.unicablepos_label' | translate }}</label>
                            <div class="field-radiobutton">
                                <p-radioButton name="scrPort" value="A" [(ngModel)]="work.scrPort" inputId="portA">
                                </p-radioButton>
                                <label for="portA" class="label block">{{ 'settings.iconnection.unicablepos_porta' | translate }}</label>
                            </div>
                            <div class="field-radiobutton">
                                <p-radioButton name="scrPort" value="B" [(ngModel)]="work.scrPort"
                                    inputId="portB"></p-radioButton>
                                <label for="portB" class="label block">{{ 'settings.iconnection.unicablepos_portb' | translate }}</label>
                            </div>
                            <small class="block">
                                {{ 'settings.iconnection.unicablepos_desc' | translate }}
                            </small>

                        </div>
                    </div>

                    <div class="form-group field" *ngIf="card.CardType == 'DVB'">
                        <label for="Delivery" class="label block">{{ 'settings.iconnection.delivery_label' | translate
                            }}</label>
                        <input pInputText id="Delivery" [(ngModel)]="card.InputName" name="Delivery" disabled="true"
                            #InputName="ngModel" class="mb-2 form-control w-full" />
                        <small class="block">
                            {{ 'settings.iconnection.delivery_desc' | translate }}
                        </small>
                    </div>

                    <div class="form-group field" *ngIf="card.CardType != 'DVB'">
                        <label for="InputName" class="label block">{{ 'settings.iconnection.input_label' | translate
                            }}</label>
                        <p-dropdown *ngIf="work.isReady" [options]="this.currentDevice.InputNames"
                            [(ngModel)]="card.InputName" name="InputName" #InputName="ngModel">
                        </p-dropdown>
                        <small class="block">
                            {{ 'settings.capture.inputname_desc' | translate }}
                        </small>
                    </div>

                    <div class="form-group field">
                        <label for="DisplayName" class="label block">{{ 'settings.iconnection.displayname_label' | translate
                            }}</label>
                        <input pInputText id="DisplayName" [(ngModel)]="card.DisplayName" name="DisplayName"
                            #DisplayName="ngModel" class="mb-2 form-control w-full" />
                        <small class="block">
                            {{ 'settings.iconnection.displayname_desc' | translate }}
                        </small>
                    </div>

                    <div class="form-group field">
                        <label for="SourceId" class="label block">{{ 'settings.iconnection.sourceid_label' | translate
                            }}</label>
                        <p-dropdown [options]="videoSourceList.VideoSourceList.VideoSources" [(ngModel)]="card.SourceId"
                            [editable]="false" optionLabel="SourceName" optionValue="Id" [maxlength]="0"
                            [style]="{'minWidth':'400px'}" name="SourceId" #SourceId="ngModel"
                            (onChange)="fillChannelList()">
                        </p-dropdown>
                        <small class="block">
                            {{ 'settings.iconnection.sourceid_desc' | translate }}
                        </small>
                    </div>

                    <div class="form-group field" *ngIf="work.isEncoder || work.isUnscanable">
                        <label for="ExternalCommand" class="label block">{{ 'settings.iconnection.externalcmd_label' |
                            translate }}</label>
                        <input pInputText id="ExternalCommand" [(ngModel)]="card.ExternalCommand" name="ExternalCommand"
                            #ExternalCommand="ngModel" class="mb-2 form-control w-full" />
                        <small class="block">
                            {{ 'settings.iconnection.externalcmd_desc' | translate }}
                        </small>
                    </div>

                    <div class="form-group field" *ngIf="work.showPresetTuner">
                        <label for="TuneChannel" class="label block">{{ 'settings.iconnection.tunechan_label' | translate
                            }}</label>
                        <input pInputText id="TuneChannel" [(ngModel)]="card.TuneChannel" name="TuneChannel" #TuneChannel="ngModel"
                            class="mb-2 form-control w-full" />
                        <small class="block">
                            {{ 'settings.iconnection.tunechan_desc' | translate }}
                        </small>
                    </div>

                    <div class="form-group field" *ngIf="!work.isEncoder && !work.isUnscanable">
                        <label for="Quicktune" class="label block">{{ 'settings.iconnection.quicktune_label' | translate
                            }}</label>
                        <p-dropdown [options]="quickTuneValues" [(ngModel)]="card.Quicktune" [editable]="false"
                            optionLabel="prompt" optionValue="value" [maxlength]="0" [style]="{'minWidth':'400px'}"
                            name="Quicktune" #Quicktune="ngModel">
                        </p-dropdown>
                        <small class="block">
                            {{ 'settings.iconnection.quicktune_desc' | translate }}
                        </small>
                    </div>

                    <div class="form-group field" *ngIf="card.CardType == 'DVB'">
                        <p-checkbox inputId="DishnetEIT" [(ngModel)]="card.DishnetEIT" name="DishnetEIT"
                            #DishnetEIT="ngModel" class="label mb-2 w-full" [binary]="true"
                            label="{{ 'settings.iconnection.dishneteit_label' | translate }}">
                        </p-checkbox>
                        <small class="block">
                            {{ 'settings.iconnection.dishneteit_desc' | translate }}
                        </small>
                    </div>

                    <!-- Scan Panel -->
                    <p-fieldset class="mb-4 w-full" legend="{{ 'settings.iconnection.scan_title' | translate }}"
                        [collapsed]="true" [toggleable]="true" *ngIf="!work.isUnscanable">
                        <app-channelscan [card]="card" [cardList]="cardList" [iconnection]="this"
                            [videoSourceLookup]="videoSourceLookup"></app-channelscan>
                    </p-fieldset>

                    <br><br>

                    <div class="form-group field">
                        <div class="grid">
                            <div style="display:flex; align-items:center;">
                                <p-button label="{{ 'settings.iconnection.fetch.label' | translate }}"
                                    icon="pi pi-download" iconPos="left" (onClick)="work.fetchChannelsDialog=true"
                                    [disabled]="!card.SourceId || connform.dirty || work.fetchStatus == 1 || setupService.schedulingEnabled">
                                </p-button>
                            </div>
                            <div style="display:flex; align-items:center;">
                                &nbsp;&nbsp;{{fetchMessages[work.fetchStatus] | translate: {num: work.fetchCount} }}
                            </div>
                        </div>
                        <small class="block">
                            {{ 'settings.iconnection.fetch.desc' | translate }}
                        </small>
                    </div>

                    <p-dialog header="Fetch Channels" [(visible)]="work.fetchChannelsDialog" [modal]="true"
                        [style]="{width: '50vw'}" [draggable]="false" [resizable]="false">
                        <p>{{ 'settings.iconnection.fetch.warning' | translate }}</p>
                        <p>{{ 'settings.common.ru_sure' | translate}}</p>
                        <ng-template pTemplate="footer">
                            <p-button icon="pi pi-times-circle" (click)="work.fetchChannelsDialog=false"
                                label="{{ 'common.no' | translate }}" styleClass="p-button-plain">
                            </p-button>
                            <p-button icon="pi pi-check-circle" (click)="fetchChannels()"
                                label="{{ 'common.yes' | translate }}" styleClass="p-button-plain"></p-button>
                        </ng-template>
                    </p-dialog>

                    <div class="form-group field">
                        <label for="StartChannel" class="label block">{{ 'settings.iconnection.startchan_label' | translate
                            }}</label>
                        <p-dropdown [options]="sourceChannels" [(ngModel)]="card.StartChannel" placeholder="Select Item"
                            [editable]="false" optionLabel="ChanNum" optionValue="ChanNum" scrollHeight="400px"
                            [style]="{'minWidth':'400px'}" name="StartChannel" #StartChannel="ngModel">
                        </p-dropdown>
                        <small class="block">
                            {{ 'settings.iconnection.startchan_desc' | translate }}
                        </small>
                    </div>

                    <!-- Interactions Panel -->
                    <p-fieldset class="mb-4 w-full" legend="{{ 'settings.iconnection.interact_title' | translate }}"
                        [toggleable]="true" [collapsed]="true">

                        <div class="form-group field">
                            <label for="RecLimit" class="label block">{{ 'settings.iconnection.maxrec_label' | translate
                                }}</label>
                            <p-inputNumber [(ngModel)]="card.RecLimit" name="RecLimit" id="RecLimit"
                                [disabled]="!work.isTunerSharable"
                                [showButtons]="true" [min]="1" [max]="10" [step]="1"></p-inputNumber>
                            <small class="block">
                                {{ 'settings.iconnection.maxrec_desc' | translate }}
                            </small>
                        </div>

                        <div class="form-group field">
                            <p-checkbox inputId="SchedGroup" [(ngModel)]="card.SchedGroup" name="SchedGroup"
                                #DVBWaitForSeqStart="ngModel" class="label mb-2 w-full" [binary]="true"
                                [disabled]="!work.isTunerSharable"
                                label="{{ 'settings.iconnection.schedgrp_label' | translate }}">
                            </p-checkbox>
                            <small class="block">
                                {{ 'settings.iconnection.schedgrp_desc' | translate }}
                            </small>
                        </div>

                        <div class="form-group field">
                            <label for="RecPriority" class="label block">{{ 'settings.iconnection.recpri_label' | translate
                                }}</label>
                            <p-inputNumber [(ngModel)]="card.RecPriority" name="RecPriority" id="RecPriority"
                                [showButtons]="true" [min]="-99" [max]="99" [step]="1"></p-inputNumber>
                            <small class="block">
                                {{ 'settings.iconnection.recpri_desc' | translate }}
                            </small>
                        </div>

                        <div class="form-group field">
                            <label for="SchedOrder" class="label block">{{ 'settings.iconnection.schedorder_label' | translate
                                }}</label>
                            <p-inputNumber [(ngModel)]="card.SchedOrder" name="SchedOrder" id="SchedOrder"
                                [showButtons]="true" [min]="0" [max]="99" [step]="1"></p-inputNumber>
                            <small class="block">
                                {{ 'settings.iconnection.schedorder_desc' | translate }}
                            </small>
                        </div>

                        <div class="form-group field">
                            <label for="LiveTVOrder" class="label block">{{ 'settings.iconnection.liveorder_label' | translate
                                }}</label>
                            <p-inputNumber [(ngModel)]="card.LiveTVOrder" name="LiveTVOrder" id="LiveTVOrder"
                                [showButtons]="true" [min]="0" [max]="99" [step]="1"></p-inputNumber>
                            <small class="block">
                                {{ 'settings.iconnection.liveorder_desc' | translate }}
                            </small>
                        </div>

                        <div class="form-group field">
                            <label for="inputGroupName" class="label block">{{ 'settings.iconnection.inpgroup_label' |
                                translate }}</label>
                            <p-dropdown  appendTo="body" [options]="selectGroups" [(ngModel)]="work.inputGroupName"
                                placeholder="Optional Group Name" [editable]="true" optionLabel="InputGroupName"
                                optionValue="InputGroupName" scrollHeight="400px" [style]="{'minWidth':'400px'}"
                                name="inputGroupName" #inputGroupName="ngModel">
                            </p-dropdown>
                            <small class="block">
                                {{ 'settings.iconnection.inpgroup_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="this.work.successCount > 0 && this.work.errorCount == 0 && !connform.dirty"
                        severity="success" text="{{ 'common.savesuccess' | translate }}"></p-message>
                    <p-message *ngIf="this.work.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(); connform.form.markAsPristine()"
                    [disabled]="!connform.dirty || !card.VideoDevice || setupService.schedulingEnabled"></p-button>
            </div>
        </ng-template>
    </p-card>
</form>