<section class="dialog">
    <form (submit)="save()" [formGroup]="form">
        <div [translate]="'add-dossier-dialog.header-new'" class="dialog-header heading-l"></div>

        <div *ngIf="config.IS_DOCUMINE && !availableReportTypes.length" class="inline-dialog-toast toast-warning">
            <div [translate]="'add-dossier-dialog.no-report-types-warning'"></div>
        </div>

        <div class="dialog-content">
            <div class="iqser-input-group required w-300">
                <label [translate]="'add-dossier-dialog.form.name.label'"></label>
                <input
                    [placeholder]="'add-dossier-dialog.form.name.placeholder' | translate"
                    formControlName="dossierName"
                    id="dossierNameInput"
                    name="dossierName"
                    type="text"
                />
            </div>

            <div class="iqser-input-group required w-400">
                <label>{{ 'add-dossier-dialog.form.template.label' | translate }}</label>
                <mat-form-field>
                    <mat-select
                        (valueChange)="dossierTemplateChanged($event)"
                        [placeholder]="'add-dossier-dialog.form.template.placeholder' | translate"
                        formControlName="dossierTemplateId"
                        id="dossierTemplateSelect"
                    >
                        <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]="'add-dossier-dialog.form.description.label'"></label>
                <textarea
                    [placeholder]="'add-dossier-dialog.form.description.placeholder' | translate"
                    formControlName="description"
                    iqserHasScrollbar
                    name="description"
                    rows="5"
                    type="text"
                ></textarea>
            </div>

            <redaction-watermark-selector
                [dossierTemplateId]="dossierTemplateId"
                [label]="'dossier-watermark-selector.watermark' | translate"
                formControlName="watermarkId"
            ></redaction-watermark-selector>

            <redaction-watermark-selector
                [dossierTemplateId]="dossierTemplateId"
                [label]="'dossier-watermark-selector.preview' | translate"
                formControlName="previewWatermarkId"
            ></redaction-watermark-selector>

            <div class="due-date">
                <div class="iqser-input-group">
                    <mat-checkbox (change)="hasDueDate = !hasDueDate" [checked]="hasDueDate" color="primary">
                        {{ 'add-dossier-dialog.form.due-date' | translate }}
                    </mat-checkbox>
                </div>

                <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>

            <p class="download-includes">{{ 'download-includes' | translate }}</p>
            <div class="flex">
                <redaction-select
                    [height]="165"
                    [label]="'report-type.label' | translate : { length: reportTemplateIdsLength }"
                    [optionTemplate]="reportTemplateOptionTemplate"
                    [options]="availableReportTypes"
                    [valueMapper]="reportTemplateValueMapper"
                    class="mr-16"
                    formControlName="reportTemplateIds"
                ></redaction-select>

                <redaction-select
                    *deny="roles.getRss"
                    [height]="165"
                    [label]="'download-type.label' | translate : { length: downloadFileTypesLength }"
                    [options]="downloadTypes"
                    formControlName="downloadFileTypes"
                ></redaction-select>
            </div>
        </div>

        <div class="dialog-actions">
            <iqser-icon-button
                (action)="save()"
                [disabled]="disabled"
                [label]="'add-dossier-dialog.actions.save' | translate"
                [type]="iconButtonTypes.primary"
                buttonId="createDossierSaveButton"
            ></iqser-icon-button>

            <iqser-icon-button
                (action)="save({ addMembers: true })"
                [buttonId]="'createDossierEditTeamButton'"
                [disabled]="disabled"
                [label]="'add-dossier-dialog.actions.save-and-add-members' | translate"
                [type]="iconButtonTypes.dark"
                icon="red:assign"
            ></iqser-icon-button>

            <iqser-help-button *deny="roles.getRss" [helpButtonKey]="'new_dossier_button'"></iqser-help-button>
        </div>
    </form>

    <iqser-circle-button (action)="close()" class="dialog-close" icon="iqser:close"></iqser-circle-button>
</section>

<ng-template #reportTemplateOptionTemplate let-option="option">
    {{ option.fileName }} {{ option.multiFileReport ? ('reports-screen.multi-file-report' | translate) : '' }}
</ng-template>
