<div [attr.help-mode-key]="'dossier'" [matTooltip]="dossier.dossierName" class="table-item-title heading mb-6" matTooltipPosition="above">
    {{ dossier.dossierName }}
</div>

<div class="small-label stats-subtitle mb-6">
    <div>
        <mat-icon svgIcon="red:template"></mat-icon>
        {{ getDossierTemplateNameFor(dossier.dossierTemplateId) }}
    </div>
</div>

<div *ngIf="dossierStats" class="stats-subtitle">
    <div class="small-label">
        <mat-icon svgIcon="iqser:document"></mat-icon>
        {{ dossier.isSoftDeleted ? dossierStats.numberOfSoftDeletedFiles : dossierStats.numberOfFiles }}
    </div>

    <div *ngIf="!dossier.isSoftDeleted" class="small-label">
        <mat-icon svgIcon="iqser:pages"></mat-icon>
        {{ dossierStats.numberOfPages }}
    </div>

    <div class="small-label">
        <mat-icon svgIcon="red:user"></mat-icon>
        {{ dossier.memberIds.length }}
    </div>

    <div class="small-label">
        <mat-icon svgIcon="iqser:calendar"></mat-icon>
        {{ dossier.date | date : 'mediumDate' }}
    </div>

    <div *ngIf="dossier.dueDate" [class.error]="passedDueDate" [class.warn]="approachingDueDate" class="small-label">
        <mat-icon svgIcon="red:lightning"></mat-icon>
        {{ dossier.dueDate | date : 'mediumDate' }}
    </div>
</div>
