<p-card class="m-5">
    <h2>{{ 'settings.iconnections.title' | translate }}</h2>
    <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"
            [(selected)]="activeTab[ix]">
            <ng-template pTemplate="header">
                <div class="grid  w-full" *ngIf="readyCount > 1">
                    <div class="col-9 pr-1">
                        {{card.CardType}}
                        {{card.VideoDevice}}
                        ({{card.DisplayName}})
                        =&gt; {{videoSourceLookup[card.SourceId].SourceName}}
                        <b>&nbsp;{{ dirtyMessages[ix] }}</b>
                    </div>
                </div>
            </ng-template>
            <ng-template pTemplate="content">
                <app-iconnection [card]="m_CaptureCardsFiltered[ix]" [cardList]="m_CaptureCardList"
                    [videoSourceLookup]="videoSourceLookup" [videoSourceList]="videoSourceList"
                    [parentComponent]="this"></app-iconnection>
            </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/video-sources'])" icon="pi pi-angle-left"
            iconPos="left"></p-button>

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

</p-card>