<ng-container *ngIf="configService.listingMode$ | async as mode">
    <div class="file-attribute" [ngClass]="{ 'workflow-attribute': mode === 'workflow' }" (click)="editFileAttribute($event)">
        <div class="value" [ngClass]="{ 'workflow-value': mode === 'workflow' }">
            <b *ngIf="mode === 'workflow' && !isInEditMode"> {{ fileAttribute.label }}: </b>
            <span *ngIf="!isDate; else date" [ngClass]="{ hide: isInEditMode, 'clamp-3': mode !== 'workflow' }">
                {{ 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$ | async) === false || isInEditMode) &&
                !file.isInitialProcessing &&
                permissionsService.canEditFileAttributes(file, dossier)
            "
        >
            <div
                *ngIf="!isInEditMode; else input"
                class="action-buttons edit-button"
                [ngClass]="{ 'workflow-edit-button': mode === 'workflow' }"
                [class.help-mode-button]="helpModeService.isHelpModeActive$ | async"
                (click)="editFileAttribute($event)"
                [attr.help-mode-key]="'edit-file-attributes'"
            >
                <div class="edit-icon" [ngClass]="{ 'workflow-edit-icon': mode === 'workflow' }">
                    <mat-icon [svgIcon]="'iqser:edit'"></mat-icon>
                </div>
            </div>
        </ng-container>
    </div>

    <ng-template #input>
        <div class="edit-input" [ngClass]="{ 'workflow-edit-input': mode === 'workflow' }" stopPropagation>
            <form (submit)="save()" [formGroup]="form">
                <iqser-dynamic-input
                    (closedDatepicker)="closedDatepicker = $event"
                    (keydown.escape)="close()"
                    [formControlName]="fileAttribute.id"
                    [id]="fileAttribute.id"
                    [type]="fileAttribute.type"
                    [ngClass]="{ 'workflow-input': mode === 'workflow' }"
                ></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()" [size]="mode === 'workflow' ? 15 : 34" [icon]="'iqser:close'"></iqser-circle-button>
            </form>
        </div>
    </ng-template>
</ng-container>
