<section class="dialog">
    <div [translate]="'download-dialog.header'" class="dialog-header heading-l"></div>

    <div *ngIf="hasUnapprovedFiles && !isDocumine" class="inline-dialog-toast toast-warning">
        <div [translate]="'download-dialog.unapproved-files-warning'"></div>
    </div>

    <form *ngIf="form" [formGroup]="form">
        <div class="dialog-content">
            <redaction-select
                *ngIf="availableReportTypes | async as reportTypes"
                [label]="'report-type.label' | translate : { length: reportTypesLength }"
                [optionTemplate]="reportTemplateOptionTemplate"
                [options]="reportTypes"
                [valueMapper]="reportTemplateValueMapper"
                class="mb-16"
                formControlName="reportTemplateIds"
            ></redaction-select>

            <redaction-select
                *ngIf="!isDocumine"
                [label]="'download-type.label' | translate : { length: downloadFileTypesLength }"
                [options]="downloadTypes"
                formControlName="downloadFileTypes"
            ></redaction-select>

            <div *ngIf="!isDocumine" class="iqser-input-group required">
                <label translate="download-dialog.form.redaction-preview-color"></label>
                <input
                    [placeholder]="'download-dialog.form.redaction-preview-color-placeholder' | translate"
                    class="hex-color-input"
                    formControlName="redactionPreviewColor"
                    name="color"
                    type="text"
                />
                <div
                    (colorPickerChange)="form.controls.redactionPreviewColor.setValue($event)"
                    [colorPicker]="form.controls.redactionPreviewColor.value"
                    [cpOutputFormat]="'hex'"
                    [style.background]="form.controls.redactionPreviewColor.value"
                    class="input-icon"
                >
                    <mat-icon
                        *ngIf="!form.controls.redactionPreviewColor.value || form.controls.redactionPreviewColor.value?.length === 0"
                        svgIcon="red:color-picker"
                    ></mat-icon>
                </div>
            </div>
        </div>

        <div class="dialog-actions">
            <iqser-icon-button
                (action)="close()"
                [disabled]="!valid"
                [label]="'download-dialog.actions.save' | translate"
                [type]="iconButtonTypes.primary"
            ></iqser-icon-button>
        </div>
    </form>

    <iqser-circle-button (action)="dialogRef.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>
