<ng-container *ngIf="dossierStats$ | async as stats">
    <div>
        <mat-icon svgIcon="iqser:document"></mat-icon>
        <span>{{ 'dossier-overview.dossier-details.stats.documents' | translate : { count: stats.numberOfFiles } }}</span>
    </div>

    <div *ngIf="stats.numberOfProcessingFiles">
        <mat-icon svgIcon="red:reanalyse"></mat-icon>
        <span>{{
            'dossier-overview.dossier-details.stats.processing-documents' | translate : { count: stats.numberOfProcessingFiles }
        }}</span>
    </div>

    <div>
        <mat-icon svgIcon="red:user"></mat-icon>
        <span>{{ 'dossier-overview.dossier-details.stats.people' | translate : { count: dossier.memberIds.length } }}</span>
    </div>

    <div>
        <mat-icon svgIcon="iqser:pages"></mat-icon>
        <span>{{ 'dossier-overview.dossier-details.stats.analysed-pages' | translate : { count: stats.numberOfPages | number } }}</span>
    </div>

    <div *ngIf="dossier.date | date : 'd MMM yyyy' as date">
        <mat-icon svgIcon="iqser:calendar"></mat-icon>
        <span [innerHTML]="'dossier-overview.dossier-details.stats.created-on' | translate : { date }"></span>
    </div>

    <div *ngIf="dossier.dueDate | date : 'd MMM yyyy' as dueDate">
        <mat-icon svgIcon="red:lightning"></mat-icon>
        <span [innerHTML]="'dossier-overview.dossier-details.stats.due-date' | translate : { date: dueDate }"></span>
    </div>

    <div>
        <mat-icon svgIcon="red:template"></mat-icon>
        <span>{{ dossierTemplateName }} </span>
    </div>

    <div
        (click)="openEditDossierDialog('dossierDictionary')"
        *ngIf="!isDocumine"
        [attr.help-mode-key]="'edit_dossier_dossier_dictionary'"
        class="link-property"
    >
        <mat-icon svgIcon="red:dictionary"></mat-icon>
        <span>{{ 'dossier-overview.dossier-details.dictionary' | translate }} </span>
    </div>

    <!--TODO: Navigate to trash with filter on click?-->
    <div>
        <mat-icon svgIcon="iqser:trash"></mat-icon>
        <span>{{ 'dossier-overview.dossier-details.stats.deleted' | translate : { count: stats.numberOfSoftDeletedFiles } }}</span>
    </div>
</ng-container>

<ng-container *ngIf="dossierAttributes?.length">
    <div
        (click)="attributesExpanded = true"
        *ngIf="!attributesExpanded"
        [attr.help-mode-key]="'edit_dossier_dossier_attributes'"
        class="all-caps-label show-attributes"
    >
        {{ 'dossier-overview.dossier-details.attributes.expand' | translate : { count: dossierAttributes.length } }}
    </div>

    <div *ngIf="attributesExpanded" [attr.help-mode-key]="'edit_dossier_dossier_attributes'" class="attributes">
        <div (click)="openEditDossierDialog('dossierAttributes')" *ngFor="let attr of dossierAttributes" class="link-property">
            <mat-icon svgIcon="red:attribute"></mat-icon>
            <span *ngIf="!attr.value"> {{ attr.label + ': -' }}</span>
            <span *ngIf="attr.value && attr.type === 'DATE'"> {{ attr.label + ': ' + (attr.value | date : 'd MMM yyyy') }}</span>
            <span *ngIf="attr.value && attr.type === 'IMAGE'">
                {{ attr.label + ': ' + ('dossier-overview.dossier-details.attributes.image-uploaded' | translate) }}</span
            >
            <span *ngIf="attr.value && (attr.type === 'TEXT' || attr.type === 'NUMBER')"> {{ attr.label + ': ' + attr.value }}</span>
        </div>

        <div (click)="attributesExpanded = false" class="all-caps-label hide-attributes">
            {{ 'dossier-overview.dossier-details.attributes.show-less' | translate }}
        </div>
    </div>
</ng-container>
