<form [formGroup]="form">
    <div class="flex">
        <div class="flex fields-container">
            <div class="iqser-input-group required w-300">
                <label translate="edit-dossier-dialog.general-info.form.name.label"></label>
                <input
                    [placeholder]="'edit-dossier-dialog.general-info.form.name.placeholder' | translate"
                    formControlName="dossierName"
                    name="dossierName"
                    type="text"
                />
            </div>

            <div class="iqser-input-group required w-400">
                <label>{{ 'edit-dossier-dialog.general-info.form.template' | translate }}</label>
                <mat-form-field>
                    <mat-select formControlName="dossierTemplateId">
                        <mat-option
                            *ngFor="let dossierTemplate of dossierTemplates"
                            [matTooltip]="dossierTemplate.description ? dossierTemplate.description : dossierTemplate.name"
                            [value]="dossierTemplate.dossierTemplateId"
                            matTooltipPosition="after"
                        >
                            {{ dossierTemplate.name }}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
            </div>

            <div class="iqser-input-group w-400">
                <label translate="edit-dossier-dialog.general-info.form.description.label"></label>
                <textarea
                    [placeholder]="'edit-dossier-dialog.general-info.form.description.placeholder' | translate"
                    formControlName="description"
                    iqserHasScrollbar
                    name="description"
                    rows="5"
                    type="text"
                ></textarea>
            </div>
        </div>

        <div class="flex fields-container">
            <div class="iqser-input-group w-300">
                <label translate="edit-dossier-dialog.general-info.form.dossier-state.label"></label>
                <mat-form-field>
                    <mat-select [placeholder]="statusPlaceholder" formControlName="dossierStatusId">
                        <mat-option *ngFor="let stateId of states" [value]="stateId">
                            <div [matTooltip]="getStateName(stateId)" class="flex-align-items-center" matTooltipPosition="after">
                                <iqser-small-chip *ngIf="!!stateId" [color]="getStateColor(stateId)"></iqser-small-chip>
                                <div class="clamp-1">{{ getStateName(stateId) }}</div>
                            </div>
                        </mat-option>
                    </mat-select>
                </mat-form-field>
            </div>

            <div class="due-date">
                <mat-checkbox
                    (change)="hasDueDate = !hasDueDate"
                    [checked]="hasDueDate"
                    [disabled]="form.get('dueDate').disabled"
                    class="filter-menu-checkbox"
                    color="primary"
                >
                    {{ 'edit-dossier-dialog.general-info.form.due-date' | translate }}
                </mat-checkbox>

                <div *ngIf="hasDueDate" class="iqser-input-group datepicker-wrapper">
                    <input [matDatepicker]="picker" formControlName="dueDate" placeholder="dd/mm/yy" />
                    <mat-datepicker-toggle [for]="picker" matSuffix>
                        <mat-icon matDatepickerToggleIcon svgIcon="iqser:calendar"></mat-icon>
                    </mat-datepicker-toggle>
                    <mat-datepicker #picker></mat-datepicker>
                </div>
            </div>
        </div>
    </div>

    <div class="dialog-actions">
        <iqser-icon-button
            (action)="deleteDossier()"
            *ngIf="permissionsService.canDeleteDossier(dossier)"
            [attr.help-mode-key]="'edit_dossier_delete_dossier_DIALOG'"
            [buttonId]="'deleteDossier'"
            [icon]="'iqser:trash'"
            [label]="'dossier-listing.delete.action' | translate"
            [type]="iconButtonTypes.dark"
        ></iqser-icon-button>

        <iqser-icon-button
            (action)="archiveDossier()"
            *ngIf="permissionsService.canArchiveDossier(dossier)"
            [attr.help-mode-key]="'edit_dossier_archive_dossier_DIALOG'"
            [icon]="'red:archive'"
            [label]="'dossier-listing.archive.action' | translate"
            [type]="iconButtonTypes.dark"
        ></iqser-icon-button>
    </div>
</form>
