<div class="right-title heading" translate="file-preview.tabs.document-info.label">
    <div>
        <iqser-circle-button
            (action)="edit()"
            *ngIf="permissionsService.canEditFileAttributes(_state.file(), _state.dossier())"
            [tooltip]="'file-preview.tabs.document-info.edit' | translate"
            buttonId="edit-document-info-btn"
            icon="iqser:edit"
            tooltipPosition="before"
        ></iqser-circle-button>

        <iqser-circle-button
            (action)="closeView()"
            [tooltip]="'file-preview.tabs.document-info.close' | translate"
            buttonId="close-document-info-btn"
            icon="iqser:close"
            tooltipPosition="before"
        ></iqser-circle-button>
    </div>
</div>

<div class="right-content" iqserHasScrollbar>
    <div class="section">
        <div *ngFor="let attr of _fileAttributes()" class="attribute">
            <div class="small-label">{{ attr.label }}:</div>
            <div>{{ attr.value ? (isDate(attr) ? (attr.value | date : 'd MMM yyyy') : attr.value) : '-' }}</div>
        </div>
    </div>

    <div class="section small-label stats-subtitle">
        <div>
            <mat-icon svgIcon="red:folder"></mat-icon>
            <span
                [innerHTML]="'file-preview.tabs.document-info.details.dossier' | translate : { dossierName: _state.dossier().dossierName }"
            ></span>
        </div>

        <div>
            <mat-icon svgIcon="iqser:document"></mat-icon>
            <span>{{ 'file-preview.tabs.document-info.details.pages' | translate : { pages: _state.file().numberOfPages } }}</span>
        </div>

        <div *ngIf="_state.file().added | date : 'mediumDate' as added">
            <mat-icon svgIcon="iqser:calendar"></mat-icon>
            <span [innerHTML]="'file-preview.tabs.document-info.details.created-on' | translate : { date: added }"></span>
        </div>

        <div *ngIf="_state.dossier().dueDate | date : 'mediumDate' as dueDate">
            <mat-icon svgIcon="red:lightning"></mat-icon>
            <span [innerHTML]="'file-preview.tabs.document-info.details.due' | translate : { date: dueDate }"></span>
        </div>

        <div>
            <mat-icon svgIcon="red:template"></mat-icon>
            {{ _dossierTemplate().name }}
        </div>
    </div>
</div>
