<p-card class="m-5">
    <h2>{{ 'settings.capture.title' | translate }}</h2>

    <p-button label="{{ 'settings.capture.new_capture_card' | translate }}" (onClick)="displayModal = true"
        icon="pi pi-plus-circle" styleClass="p-button-plain"></p-button>
    <p-dialog header="{{ 'settings.capture.new_capture_card' | translate }}" [(visible)]="displayModal" [modal]="true"
        [style]="{width: '50vw'}" [draggable]="false" [resizable]="false">
        <p>{{ 'settings.capture.select_type' | translate }}</p>
        <p-listbox [options]="cardTypes" [(ngModel)]="selectedCardType" optionLabel="Description"
            (onDblClick)="newCard();" [listStyle]="{'height':'50vh'}"></p-listbox>
        <ng-template pTemplate="footer">
            <p-button icon="pi pi-times-circle" (onClick)="displayModal=false" label="{{ 'common.cancel' | translate }}"
                styleClass="p-button-plain">
            </p-button>
            <p-button icon="pi pi-check-circle" (onClick)="newCard();" label="{{ 'common.ok' | translate }}"
                styleClass="p-button-plain" [disabled]="selectedCardType.CardType == ''"></p-button>
        </ng-template>
    </p-dialog>
    &nbsp;
    <p-button styleClass="p-button-warning"
        label="{{ 'settings.capture.delete_on_host' | translate: {host: m_hostName} }}"
        (click)="displayDeleteAllonHost=true" icon="pi pi-trash" [disabled]="setupService.schedulingEnabled">
    </p-button>
    <p-dialog header="{{ 'settings.capture.delete_on_host' | translate: {host: m_hostName} }}"
        [(visible)]="displayDeleteAllonHost" [modal]="true" [style]="{width: '50vw'}" [draggable]="false"
        [resizable]="false">
        <h2>{{ 'settings.common.ru_sure' | translate }}</h2>
        <ng-template pTemplate="footer">
            <p-button icon="pi pi-times-circle" (click)="displayDeleteAllonHost=false;"
                label="{{ 'common.no' | translate }}" styleClass="p-button-plain">
            </p-button>
            <p-button icon="pi pi-check-circle" (click)="deleteAllOnHost();" label="{{ 'common.yes' | translate }}"
                styleClass="p-button-plain"></p-button>
        </ng-template>
    </p-dialog>
    &nbsp;
    <p-button styleClass="p-button-danger" label="{{ 'settings.capture.delete_all' | translate }}"
        (click)="displayDeleteAll=true" icon="pi pi-trash" iconPos="left" [disabled]="setupService.schedulingEnabled">
    </p-button>
    <p-dialog header="{{ 'settings.capture.delete_all_all' | translate }}" [(visible)]="displayDeleteAll" [modal]="true"
        [style]="{width: '50vw'}" [draggable]="false" [resizable]="false">
        <h2>{{ 'settings.common.ru_sure' | translate }}</h2>
        <ng-template pTemplate="footer">
            <p-button icon="pi pi-times-circle" (click)="displayDeleteAll=false" label="{{ 'common.no' | translate }}"
                styleClass="p-button-plain">
            </p-button>
            <p-button icon="pi pi-check-circle" (click)="deleteAllOnAllHosts()" label="{{ 'common.yes' | translate }}"
                styleClass="p-button-plain"></p-button>
        </ng-template>
    </p-dialog>
    <br>
    <div class="grid nogutter">
        <div class="col-12" *ngIf="this.expectedCount && this.successCount == this.expectedCount">
            <br>
            <p-message severity="success" text="{{ 'settings.common.successful_delete' | translate }}">
            </p-message>
            <br>
        </div>
        <div class="col-12" *ngIf="this.errorCount > 0">
            <br>
            <p-message severity="error" text="{{ 'common.networkfail' | translate }}">
            </p-message>
            <br>
        </div>
    </div>
    <p-accordion class="col-12 w-full" (onClose)="onTabClose($event)" (onOpen)="onTabOpen($event)">
        <p-accordionTab *ngFor="let card of m_CaptureCardsFiltered; index as ix; first as isFirst"
            [disabled]="disabledTab[ix]" [(selected)]="activeTab[ix]">
            <ng-template pTemplate="header">
                <div class="grid  w-full">
                    <div class="col-11 pr-1">
                        {{m_CaptureCardsFiltered[ix].CardType}}
                        {{m_CaptureCardsFiltered[ix].VideoDevice}}
                        ({{m_CaptureCardsFiltered[ix].DisplayName}})
                        <b>&nbsp;{{ dirtyMessages[ix] }}</b>
                    </div>
                </div>
            </ng-template>
            <ng-template pTemplate="content">
                <p-button styleClass="p-button-warning" label="{{ 'settings.capture.delete_this' | translate }}"
                    icon="pi pi-trash" (onClick)="displayDeleteThis[ix]=true"
                    [disabled]="!this.m_CaptureCardsFiltered[ix].CardId || setupService.schedulingEnabled">
                </p-button>
                <p-dialog header="{{ 'settings.capture.delete_this' | translate }}" [(visible)]="displayDeleteThis[ix]"
                    [modal]="true" [style]="{width: '50vw'}" [draggable]="false" [resizable]="false">
                    <h2>{{ 'settings.common.ru_sure' | translate }}</h2>
                    <p>{{ 'settings.capture.delete_details' |
                        translate: {CardType: m_CaptureCardsFiltered[ix].CardType,
                        VideoDevice: m_CaptureCardsFiltered[ix].VideoDevice,
                        DisplayName: m_CaptureCardsFiltered[ix].DisplayName} }}</p>
                    <ng-template pTemplate="footer">
                        <p-button icon="pi pi-times-circle" (click)="displayDeleteThis[ix]=false"
                            label="{{ 'common.no' | translate }}" styleClass="p-button-plain">
                        </p-button>
                        <p-button icon="pi pi-check-circle" (click)="deleteThis(ix)"
                            label="{{ 'common.yes' | translate }}" styleClass="p-button-plain"></p-button>
                    </ng-template>
                </p-dialog>
                <div [ngSwitch]="m_CaptureCardsFiltered[ix].CardType">
                    <app-ceton *ngSwitchCase="'CETON'" [card]="m_CaptureCardsFiltered[ix]"
                        [cardList]="m_CaptureCardList"></app-ceton>
                    <app-dvb *ngSwitchCase="'DVB'" [card]="m_CaptureCardsFiltered[ix]" [cardList]="m_CaptureCardList"
                        [diseqcTreeList]="diseqcTreeList" [parent]="this"></app-dvb>
                    <app-external *ngSwitchCase="'EXTERNAL'" [card]="m_CaptureCardsFiltered[ix]"
                        [cardList]="m_CaptureCardList"></app-external>
                    <app-hdhomerun *ngSwitchCase="'HDHOMERUN'" [card]="m_CaptureCardsFiltered[ix]"
                        [cardList]="m_CaptureCardList"></app-hdhomerun>
                    <app-iptv *ngSwitchCase="'FREEBOX'" [card]="m_CaptureCardsFiltered[ix]"
                        [cardList]="m_CaptureCardList"></app-iptv>
                    <app-import *ngSwitchCase="'IMPORT'" [card]="m_CaptureCardsFiltered[ix]"
                        [cardList]="m_CaptureCardList"></app-import>
                    <app-demo *ngSwitchCase="'DEMO'" [card]="m_CaptureCardsFiltered[ix]" [cardList]="m_CaptureCardList">
                    </app-demo>
                    <app-v4l2 *ngSwitchCase="'V4L2ENC'" [card]="m_CaptureCardsFiltered[ix]"
                        [cardList]="m_CaptureCardList">
                    </app-v4l2>
                    <app-hdpvr *ngSwitchCase="'HDPVR'" [card]="m_CaptureCardsFiltered[ix]"
                        [cardList]="m_CaptureCardList">
                    </app-hdpvr>
                    <app-satip *ngSwitchCase="'SATIP'" [card]="m_CaptureCardsFiltered[ix]"
                        [cardList]="m_CaptureCardList">
                    </app-satip>
                    <app-vbox *ngSwitchCase="'VBOX'" [card]="m_CaptureCardsFiltered[ix]" [cardList]="m_CaptureCardList">
                    </app-vbox>
                    <app-firewire *ngSwitchCase="'FIREWIRE'" [card]="m_CaptureCardsFiltered[ix]"
                        [cardList]="m_CaptureCardList">
                    </app-firewire>
                    <div *ngSwitchDefault><br>Not Supported </div>
                </div>
            </ng-template>
        </p-accordionTab>
    </p-accordion>

    <div class="flex justify-content-end">
        <p-button class="p-3" label="{{ 'common.back' | translate }}"
            (onClick)="router.navigate(['setupwizard/general'])" icon="pi pi-angle-left"
            iconPos="left"></p-button>

        <p-button class="p-3" label="{{ 'common.next' | translate }}"
            (onClick)="router.navigate(['setupwizard/recording-profiles'])" icon="pi pi-angle-right" iconPos="right"></p-button>
    </div>

</p-card>