<a
    *ngIf="stats as dossierTemplate"
    [class.empty]="dossierTemplate.isEmpty"
    [routerLink]="dossierTemplate.isEmpty ? null : ['..', dossierTemplate.dossierTemplateId, 'dossiers']"
    [attr.help-mode-key]="!dossierTemplate.isEmpty ? 'open_dossier_template' : null"
    class="dialog"
>
    <ng-container *ngIf="!dossierTemplate.isEmpty; else empty">
        <div class="flex-2">
            <div class="heading mb-6">{{ dossierTemplate.name }}</div>
            <div class="stats-subtitle">
                <div>
                    <mat-icon svgIcon="red:archive"></mat-icon>
                    <span
                        [innerHTML]="
                            'dossier-template-stats.archived-dossiers' | translate: { count: dossierTemplate.numberOfArchivedDossiers }
                        "
                    ></span>
                </div>
                <div>
                    <mat-icon svgIcon="iqser:trash"></mat-icon>
                    <span
                        [innerHTML]="
                            'dossier-template-stats.deleted-dossiers' | translate: { count: dossierTemplate.numberOfDeletedDossiers }
                        "
                    ></span>
                </div>
                <div>
                    <mat-icon svgIcon="red:user"></mat-icon>
                    <span [innerHTML]="'dossier-template-stats.total-people' | translate: { count: dossierTemplate.numberOfPeople }"></span>
                </div>
                <div>
                    <mat-icon svgIcon="iqser:pages"></mat-icon>
                    <span
                        [innerHTML]="'dossier-template-stats.analyzed-pages' | translate: { count: dossierTemplate.numberOfPages }"
                    ></span>
                </div>
            </div>
        </div>
        <div class="flex-3">
            <redaction-donut-chart
                [config]="translateChartService.translateDossierStates(dossierTemplate.dossiersChartConfig, dossierTemplate.id)"
                [radius]="63"
                [strokeWidth]="15"
                [subtitles]="['dossier-template-stats.active-dossiers' | translate: { count: dossierTemplate.numberOfActiveDossiers }]"
                direction="row"
                totalType="sum"
            ></redaction-donut-chart>
        </div>
        <div class="flex-3">
            <redaction-donut-chart
                [config]="translateChartService.translateWorkflowStatus(dossierTemplate.documentsChartConfig)"
                [radius]="63"
                [strokeWidth]="15"
                [subtitles]="['dossier-template-stats.total-documents' | translate]"
                direction="row"
                totalType="sum"
            ></redaction-donut-chart>
        </div>
    </ng-container>

    <ng-template #empty>
        <div class="text-muted">
            <div class="heading mb-8">
                {{ dossierTemplate.name }}
            </div>
            <div>
                {{ 'dashboard.empty-template.description' | translate }}
            </div>
        </div>

        <iqser-icon-button
            (action)="newDossier()"
            *ngIf="permissionsService.canCreateDossier(dossierTemplate)"
            [label]="'dashboard.empty-template.new-dossier' | translate"
            [type]="iconButtonTypes.primary"
            [attr.help-mode-key]="'new_dossier'"
            icon="iqser:plus"
        ></iqser-icon-button>
    </ng-template>
</a>
