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

        <ng-container
            *ngIf="
                (fileAttributesService.isEditingFileAttribute() === false || isInEditMode) &&
                !file.isInitialProcessing &&
                permissionsService.canEditFileAttributes(file, dossier) &&
                fileAttribute.editable
            "
        >
            <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,
                    'filename-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 [formGroup]="form" [style.width]="inputFormWidth()">
                <iqser-dynamic-input
                    (closedDatepicker)="closedDatepicker = $event"
                    (keyup.enter)="form.valid && save()"
                    (keydown.escape)="close()"
                    [style.width]="inputFieldWidth()"
                    [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' || fileNameColumn ? 15 : 34"
                    [ngClass]="{ 'file-name-btn': fileNameColumn }"
                    class="save"
                ></iqser-circle-button>

                <iqser-circle-button
                    (action)="close()"
                    [ngClass]="{ 'file-name-btn': fileNameColumn }"
                    [icon]="'iqser:close'"
                    [size]="mode === 'workflow' || fileNameColumn ? 15 : 34"
                ></iqser-circle-button>
            </form>
        </div>
    </ng-template>
</ng-container>
