<section class="dialog">
    <div [innerHTML]="'add-edit-clone-dossier-template.title' | translate : translateParams" class="dialog-header heading-l"></div>

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

            <div class="iqser-input-group w-400">
                <label [translate]="'add-edit-clone-dossier-template.form.description'"></label>
                <textarea
                    [placeholder]="'add-edit-clone-dossier-template.form.description-placeholder' | translate"
                    formControlName="description"
                    name="description"
                    rows="4"
                    type="text"
                ></textarea>
            </div>

            <div class="validity">
                <div>
                    <mat-checkbox (change)="toggleHasValid('from')" [checked]="hasValidFrom" class="filter-menu-checkbox" color="primary">
                        {{ 'add-edit-clone-dossier-template.form.valid-from' | translate }}
                    </mat-checkbox>

                    <mat-checkbox (change)="toggleHasValid('to')" [checked]="hasValidTo" class="filter-menu-checkbox" color="primary">
                        {{ 'add-edit-clone-dossier-template.form.valid-to' | translate }}
                    </mat-checkbox>
                </div>

                <div>
                    <div class="iqser-input-group datepicker-wrapper">
                        <ng-container *ngIf="hasValidFrom">
                            <input
                                (dateChange)="applyValidityIntervalConstraints()"
                                [matDatepicker]="fromPicker"
                                formControlName="validFrom"
                                placeholder="dd/mm/yy"
                            />
                            <mat-datepicker-toggle [for]="fromPicker" matSuffix>
                                <mat-icon matDatepickerToggleIcon svgIcon="iqser:calendar"></mat-icon>
                            </mat-datepicker-toggle>
                            <mat-datepicker #fromPicker></mat-datepicker>
                        </ng-container>
                    </div>

                    <div class="iqser-input-group datepicker-wrapper">
                        <ng-container *ngIf="hasValidTo">
                            <input
                                (dateChange)="applyValidityIntervalConstraints()"
                                [matDatepicker]="toPicker"
                                formControlName="validTo"
                                placeholder="dd/mm/yy"
                            />
                            <mat-datepicker-toggle [for]="toPicker" matSuffix>
                                <mat-icon matDatepickerToggleIcon svgIcon="iqser:calendar"></mat-icon>
                            </mat-datepicker-toggle>
                            <mat-datepicker #toPicker></mat-datepicker>
                        </ng-container>
                    </div>
                </div>
            </div>

            <div *ngIf="!isDocumine">
                <p class="heading download-includes">
                    {{ 'add-edit-clone-dossier-template.form.apply-updates-default.heading' | translate }}
                </p>
                <div class="iqser-input-group">
                    <mat-checkbox color="primary" formControlName="applyDictionaryUpdatesToAllDossiersByDefault">
                        {{ 'add-edit-clone-dossier-template.form.apply-updates-default.description' | translate }}
                    </mat-checkbox>
                </div>
            </div>

            <div *ngIf="!isDocumine" class="flex">
                <div class="half-flex-basis">
                    <p class="heading download-includes">{{ 'download-includes' | translate }}</p>

                    <div class="flex">
                        <redaction-select
                            [label]="
                                'download-type.label'
                                    | translate
                                        : {
                                              length: form.controls['downloadFileTypes'].value.length
                                          }
                            "
                            [options]="downloadTypes"
                            formControlName="downloadFileTypes"
                        ></redaction-select>
                    </div>
                </div>

                <div class="half-flex-basis w-full pl-75">
                    <p class="heading download-includes">
                        {{ 'add-edit-clone-dossier-template.form.upload-settings.heading' | translate }}
                    </p>
                    <div class="iqser-input-group">
                        <mat-checkbox color="primary" formControlName="ocrByDefault">
                            {{ 'add-edit-clone-dossier-template.form.upload-settings.ocr-by-default' | translate }}
                        </mat-checkbox>
                    </div>
                    <div class="iqser-input-group">
                        <mat-checkbox color="primary" formControlName="removeWatermark">
                            {{ 'add-edit-clone-dossier-template.form.upload-settings.remove-watermark' | translate }}
                        </mat-checkbox>
                    </div>
                </div>
            </div>

            <div *ngIf="!isDocumine">
                <p class="heading download-includes">{{ 'add-edit-clone-dossier-template.form.hidden-text.heading' | translate }}</p>
                <div class="hidden-elements">
                    <div class="iqser-input-group">
                        <mat-checkbox color="primary" formControlName="keepHiddenText">
                            {{ 'add-edit-clone-dossier-template.form.hidden-text.title' | translate }}
                        </mat-checkbox>
                        <div class="info mt-4">{{ 'add-edit-clone-dossier-template.form.hidden-text.description' | translate }}</div>
                    </div>
                    <div class="iqser-input-group">
                        <mat-checkbox color="primary" formControlName="keepImageMetadata">
                            {{ 'add-edit-clone-dossier-template.form.image-metadata.title' | translate }}
                        </mat-checkbox>
                        <div class="info mt-4">{{ 'add-edit-clone-dossier-template.form.image-metadata.description' | translate }}</div>
                    </div>
                    <div class="iqser-input-group">
                        <mat-checkbox color="primary" formControlName="keepOverlappingObjects">
                            {{ 'add-edit-clone-dossier-template.form.overlapping-elements.title' | translate }}
                        </mat-checkbox>
                        <div class="info mt-4">
                            {{ 'add-edit-clone-dossier-template.form.overlapping-elements.description' | translate }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

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

            <iqser-help-button
                *ngIf="!isDocumine && !!dossierTemplate"
                [helpButtonKey]="'edit_clone_delete_dossier_templates'"
            ></iqser-help-button>
        </div>
    </form>

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