<div *ngIf="componentContext$ | async as ctx" class="content-container" iqserHasScrollbar>
    <div class="heading-xl">{{ ctx.dossierTemplate.name }}</div>

    <div [translate]="'dossier-template-info-screen.created-by'" class="all-caps-label mt-24 mb-8"></div>

    <iqser-initials-avatar [user]="ctx.dossierTemplate.createdBy || 'system'" [withName]="true" size="large"></iqser-initials-avatar>

    <div class="small-label stats-subtitle">
        <div>
            <mat-icon svgIcon="red:status"></mat-icon>
            {{ translations[ctx.dossierTemplate.dossierTemplateStatus] | translate }}
        </div>

        <div>
            <mat-icon svgIcon="red:dictionary"></mat-icon>
            {{ 'dossier-template-info-screen.entities' | translate : { count: ctx.stats.numberOfDictionaries } }}
        </div>

        <div *ngIf="ctx.dossierTemplate.validTo && ctx.dossierTemplate.validFrom | date : 'd MMM yyyy' as validFrom">
            <mat-icon svgIcon="iqser:calendar"></mat-icon>
            <span [innerHTML]="'dossier-template-info-screen.valid-from' | translate : { date: validFrom }"></span>
        </div>

        <div *ngIf="ctx.dossierTemplate.dateAdded | date : 'd MMM yyyy' as createdOn">
            <mat-icon svgIcon="iqser:calendar"></mat-icon>
            <span [innerHTML]="'dossier-template-info-screen.created-on' | translate : { date: createdOn }"></span>
        </div>

        <div>
            <mat-icon svgIcon="red:entries"></mat-icon>
            {{ 'dossier-template-info-screen.entries' | translate : { count: ctx.stats.numberOfEntries } }}
        </div>

        <div *ngIf="ctx.dossierTemplate.validFrom && ctx.dossierTemplate.validTo | date : 'd MMM yyyy' as validTo">
            <mat-icon svgIcon="iqser:calendar"></mat-icon>
            <span [innerHTML]="'dossier-template-info-screen.valid-to' | translate : { date: validTo }"></span>
        </div>

        <div *ngIf="ctx.dossierTemplate.dateModified | date : 'd MMM yyyy' as dateModified">
            <mat-icon svgIcon="iqser:calendar"></mat-icon>
            <span [innerHTML]="'dossier-template-info-screen.modified-on' | translate : { date: dateModified }"></span>
        </div>
    </div>

    <div class="template-description">{{ ctx.dossierTemplate.description }}</div>
</div>
