<p-card>
    <h2>{{ 'dashboard.settings.heading' | translate }}</h2>
    <p-accordion class="col-12 w-full p-0" (onClose)="onTabClose($event)" (onOpen)="onTabOpen($event)">
        <p-accordionTab header="{{ 'dashboard.autoexpire.heading' | translate }}">
            <ng-template pTemplate="header"><b>&nbsp;{{ dirtyMessages[0] }}</b></ng-template>
            <ng-template pTemplate="content">
                <app-auto-expire></app-auto-expire>
            </ng-template>
        </p-accordionTab>
        <p-accordionTab header="{{ 'dashboard.jobs.heading' | translate }}">
            <ng-template pTemplate="header"><b>&nbsp;{{ dirtyMessages[1] }}</b></ng-template>
            <ng-template pTemplate="content">
                <app-jobs></app-jobs>
            </ng-template>
        </p-accordionTab>
        <p-accordionTab header="{{ 'dashboard.quality.heading' | translate }}">
            <ng-template pTemplate="header"><b>&nbsp;{{ dirtyMessages[2] }}</b></ng-template>
            <ng-template pTemplate="content">
                <app-rec-quality></app-rec-quality>
            </ng-template>
        </p-accordionTab>
        <p-accordionTab header="{{ 'dashboard.priorities.heading' | translate }}">
            <ng-template pTemplate="header"><b>&nbsp;{{ dirtyMessages[3] }}</b></ng-template>
            <ng-template pTemplate="content">
                <app-rec-priorities></app-rec-priorities>
            </ng-template>
        </p-accordionTab>
        <p-accordionTab header="{{ 'dashboard.custom.heading' | translate }}">
            <ng-template pTemplate="header"><b>&nbsp;{{ dirtyMessages[4] }}</b></ng-template>
            <ng-template pTemplate="content">
                <app-custom-priorities></app-custom-priorities>
            </ng-template>
        </p-accordionTab>
        <p-accordionTab header="{{ 'dashboard.channelgroup.heading' | translate }}">
            <ng-template pTemplate="header"><b>&nbsp;{{ dirtyMessages[5] }}</b></ng-template>
            <ng-template pTemplate="content">
                <app-channel-groups></app-channel-groups>
            </ng-template>
        </p-accordionTab>
        <p-accordionTab header="{{ 'dashboard.playgroup.heading' | translate }}">
            <ng-template pTemplate="header"><b>&nbsp;{{ dirtyMessages[6] }}</b></ng-template>
            <ng-template pTemplate="content">
                <app-playback-groups></app-playback-groups>
            </ng-template>
        </p-accordionTab>
        <p-accordionTab header="{{ 'dashboard.datasources.heading' | translate }}">
            <ng-template pTemplate="header"><b>&nbsp;{{ dirtyMessages[7] }}</b></ng-template>
            <ng-template pTemplate="content">
                <app-data-sources></app-data-sources>
            </ng-template>
        </p-accordionTab>
        <p-accordionTab header="{{ 'dashboard.users.heading' | translate }}">
            <ng-template pTemplate="header"><b>&nbsp;{{ dirtyMessages[8] }}</b></ng-template>
            <ng-template pTemplate="content">
                <app-users></app-users>
            </ng-template>
        </p-accordionTab>
    </p-accordion>
</p-card>