<div class="content-container" iqserHasScrollbar>
    <form [formGroup]="form" class="dialog">
        <div class="dialog-content">
            <redaction-dossier-template-details [dossierTemplateId]="dossierTemplateId"></redaction-dossier-template-details>

            <div class="heading-md mt-24 mb-8" translate="dossier-template-info-screen.title"></div>

            <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-full">
                <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 mt-12">
                <div>
                    <mat-checkbox (change)="toggleHasValid('from')" [checked]="hasValidFrom()" color="primary">
                        {{ 'add-edit-clone-dossier-template.form.valid-from' | translate }}
                    </mat-checkbox>

                    <div class="iqser-input-group datepicker-wrapper">
                        @if (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>
                        }
                    </div>
                </div>

                <div>
                    <mat-checkbox (change)="toggleHasValid('to')" [checked]="hasValidTo()" color="primary">
                        {{ 'add-edit-clone-dossier-template.form.valid-to' | translate }}
                    </mat-checkbox>
                    <div class="iqser-input-group datepicker-wrapper">
                        @if (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>
                        }
                    </div>
                </div>
            </div>

            @if (!isDocumine) {
                <div class="mt-24">
                    <div class="heading">
                        {{ 'add-edit-clone-dossier-template.form.apply-updates-default.heading' | translate }}
                    </div>
                    <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 class="mt-24">
                    <div class="heading mb-14">{{ 'download-includes' | translate }}</div>

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

                <div class="mt-24">
                    <div class="heading">
                        {{ 'add-edit-clone-dossier-template.form.upload-settings.heading' | translate }}
                    </div>
                    <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 class="mt-24 hidden-elements">
                    <div class="heading">{{ 'add-edit-clone-dossier-template.form.hidden-text.heading' | translate }}</div>
                    <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">{{ '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">{{ '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">
                            {{ 'add-edit-clone-dossier-template.form.overlapping-elements.description' | translate }}
                        </div>
                    </div>
                </div>
            }
        </div>

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