<div class="cell filename">
    <div [matTooltip]="item.filename" class="table-item-title heading" matTooltipPosition="above">
        <span
            *ngIf="item.highlights.filename; else defaultFilename"
            [innerHTML]="sanitize(item.highlights.filename[0])"
            class="highlights"
        ></span>
        <ng-template #defaultFilename>{{ item.filename }}</ng-template>
    </div>

    <ng-container *ngIf="item.highlights['sections.text'] as highlights">
        <div *ngIf="highlights.length > 0" class="small-label">
            <span [innerHTML]="sanitize(highlights[0])" class="highlights"></span>
        </div>
        <div *ngIf="highlights.length > 1" class="small-label">
            <span [innerHTML]="sanitize(highlights[1])" class="highlights"></span>
        </div>
    </ng-container>

    <div *ngIf="item.unmatched?.length && item.unmatched as unmatched" class="small-label">
        <span>
            {{ 'search-screen.missing' | translate }}:<span *ngFor="let term of unmatched"
                >&nbsp;<s>{{ term }}</s></span
            >.&nbsp;{{ 'search-screen.must-contain' | translate }}:
            <span (click)="mustContain.emit(term)" *ngFor="let term of unmatched" iqserStopPropagation
                >&nbsp;<u>{{ term }}</u></span
            >
        </span>
    </div>
</div>

<div class="cell">
    <iqser-initials-avatar [user]="item.assignee" [withName]="true"></iqser-initials-avatar>
</div>

<div class="cell">
    <iqser-status-bar
        [configs]="[
            {
                color: item.status,
                label: fileStatusTranslations[item.status] | translate,
                length: 1,
                cssClass: 'all-caps-label'
            }
        ]"
        [small]="true"
    ></iqser-status-bar>
</div>

<div class="cell small-label full-opacity stats-subtitle">
    <div>
        <mat-icon *ngIf="item.archived" svgIcon="red:archive"></mat-icon>
        <a [routerLink]="routerLink | tenant" iqserStopPropagation> {{ item.dossierName }}</a>
    </div>
</div>

<div class="cell small-label stats-subtitle">
    <div>
        <mat-icon svgIcon="iqser:pages"></mat-icon>
        {{ item.numberOfPages }}
    </div>
</div>
