<ng-container *ngIf="configService.listingMode$ | async as mode">
    <div
        (mousedown)="handleClick($event)"
        (click)="editFileAttribute($event)"
        [ngClass]="{ 'workflow-attribute': mode === 'workflow', 'file-name-column': fileNameColumn }"
        class="file-attribute"
    >
        <div [ngClass]="{ 'workflow-value': mode === 'workflow' }" class="value">
            <b *ngIf="mode === 'workflow' && !isInEditMode"> {{ fileAttribute.label }}: </b>
            <span
                *ngIf="!isDate; else date"
                [ngClass]="{ hide: isInEditMode, 'clamp-3': mode !== 'workflow' }"
                [matTooltip]="fileAttributeValue"
            >
                {{ fileAttributeValue || '-' }}</span
            >
            <ng-template #date>
                <span [ngClass]="{ hide: isInEditMode, 'clamp-3': mode !== 'workflow' }">
                    {{ fileAttributeValue ? (fileAttributeValue | date: 'd MMM yyyy') : '-' }}</span
                >
            </ng-template>
        </div>

        <ng-container
            *ngIf="
                (fileAttributesService.isEditingFileAttribute() === false || isInEditMode) &&
                !file.isInitialProcessing &&
                permissionsService.canEditFileAttributes(file, dossier)
            "
        >
            <div
                (click)="editFileAttribute($event)"
                *ngIf="!isInEditMode; else input"
                [attr.help-mode-key]="'edit-file-attributes'"
                [class.help-mode-button]="helpModeService.isHelpModeActive$ | async"
                [ngClass]="{ 'workflow-edit-button': mode === 'workflow', 'action-buttons edit-button': !fileNameColumn }"
            >
                <div [ngClass]="{ 'workflow-edit-icon': mode === 'workflow', 'edit-icon': !fileNameColumn }">
                    <mat-icon [svgIcon]="'iqser:edit'"></mat-icon>
                </div>
            </div>
        </ng-container>
    </div>

    <ng-template #input>
        <div
            [ngClass]="{ 'workflow-edit-input': mode === 'workflow', 'file-name-column-input': fileNameColumn }"
            class="edit-input"
            iqserStopPropagation
        >
            <form (ngSubmit)="form.valid && save()" [formGroup]="form">
                <iqser-dynamic-input
                    (closedDatepicker)="closedDatepicker = $event"
                    (keydown.escape)="close()"
                    [formControlName]="fileAttribute.id"
                    [id]="fileAttribute.id"
                    [ngClass]="{ 'workflow-input': mode === 'workflow' || fileNameColumn, 'file-name-input': fileNameColumn }"
                    [type]="fileAttribute.type"
                ></iqser-dynamic-input>

                <iqser-circle-button
                    (action)="save()"
                    [disabled]="disabled"
                    [icon]="'iqser:check'"
                    [size]="mode === 'workflow' ? 15 : 34"
                    class="save"
                ></iqser-circle-button>

                <iqser-circle-button (action)="close()" [icon]="'iqser:close'" [size]="mode === 'workflow' ? 15 : 34"></iqser-circle-button>
            </form>
        </div>
    </ng-template>
</ng-container>
