<form *ngIf="form" [formGroup]="form">
    <div>
        <div *ngIf="customAttributes.length" class="heading">
            {{ 'edit-dossier-dialog.attributes.custom-attributes' | translate }}
        </div>

        <iqser-empty-state
            *ngIf="!customAttributes.length"
            [text]="'edit-dossier-dialog.attributes.no-custom-attributes' | translate"
            icon="red:attribute"
        ></iqser-empty-state>

        <iqser-dynamic-input
            *ngFor="let attr of customAttributes"
            [canEditInput]="!disabled"
            [classList]="'w-full'"
            [formControlName]="attr.id"
            [id]="attr.id"
            [label]="attr.label"
            [type]="attr.type"
        ></iqser-dynamic-input>
    </div>

    <div class="separator"></div>

    <div class="image-attributes-container">
        <div *ngIf="imageAttributes.length" class="heading">
            {{ 'edit-dossier-dialog.attributes.image-attributes' | translate }}
        </div>

        <iqser-empty-state
            *ngIf="!imageAttributes.length"
            [text]="'edit-dossier-dialog.attributes.no-image-attributes' | translate"
            icon="red:attribute"
        ></iqser-empty-state>

        <div
            *ngFor="let attr of imageAttributes"
            [class.displayed-preview]="currentAttrValue(attr)"
            class="iqser-input-group image-attribute"
        >
            <img *ngIf="currentAttrValue(attr)" [alt]="attr.label" [src]="currentAttrValue(attr)" />

            <label>{{ attr.label }}</label>

            <iqser-icon-button
                (action)="fileInputClick(attr)"
                *ngIf="!currentAttrValue(attr)"
                [disabled]="disabled"
                [label]="'edit-dossier-dialog.attributes.upload-image' | translate"
                [type]="iconButtonTypes.dark"
                class="upload-button"
                icon="iqser:upload"
            ></iqser-icon-button>

            <input
                #fileInput
                (change)="uploadImage($event, attr)"
                [id]="attr.id"
                [name]="attr.id"
                accept="image/jpg, image/jpeg, image/png"
                class="file-upload-input"
                hidden
                type="file"
            />

            <div *ngIf="currentAttrValue(attr) && !disabled">
                <iqser-circle-button
                    (action)="deleteAttr(attr)"
                    [tooltip]="'edit-dossier-dialog.attributes.delete-image' | translate"
                    icon="iqser:trash"
                ></iqser-circle-button>

                <iqser-circle-button
                    (action)="fileInputClick(attr)"
                    [tooltip]="'edit-dossier-dialog.attributes.upload-image' | translate"
                    icon="iqser:upload"
                ></iqser-circle-button>
            </div>
        </div>
    </div>
</form>
