<div class="dialog">
    <form [formGroup]="form">
        <div class="dialog-content">
            <h1>{{ 'dialog-defaults-form.title' | translate }}</h1>
            <h3>{{ 'dialog-defaults-form.redaction.title' | translate }}</h3>
            <div class="iqser-input-group w-450">
                <label translate="dialog-defaults-form.redaction.add-dialog"></label>
                <mat-form-field>
                    <mat-select formControlName="addRedaction">
                        <mat-option *ngFor="let option of redactionAddOptions" [value]="option.value">{{
                            option.label | translate
                        }}</mat-option>
                    </mat-select>
                </mat-form-field>
                <mat-checkbox *ngIf="displayExtraOptionAddRedaction" formControlName="addRedactionApplyToAll">{{
                    'dialog-defaults-form.extra-option-label' | translate
                }}</mat-checkbox>
            </div>
            <div class="iqser-input-group w-450">
                <label translate="dialog-defaults-form.redaction.remove-dialog"></label>
                <mat-form-field>
                    <mat-select formControlName="removeRedaction">
                        <mat-option *ngFor="let option of redactionRemoveOptions" [value]="option.value">{{
                            option.label | translate
                        }}</mat-option>
                    </mat-select>
                </mat-form-field>
                <mat-checkbox *ngIf="displayExtraOptionRemoveRedaction" formControlName="removeRedactionApplyToAll">{{
                    'dialog-defaults-form.extra-option-label' | translate
                }}</mat-checkbox>
            </div>
            <h3>{{ 'dialog-defaults-form.recommendation.title' | translate }}</h3>
            <div class="iqser-input-group w-450">
                <label translate="dialog-defaults-form.recommendation.remove-dialog"></label>
                <mat-form-field>
                    <mat-select formControlName="removeRecommendation">
                        <mat-option *ngFor="let option of recommendationRemoveOptions" [value]="option.value">{{
                            option.label | translate
                        }}</mat-option>
                    </mat-select>
                </mat-form-field>
                <mat-checkbox *ngIf="displayExtraOptionRemoveRecommendation" formControlName="removeRecommendationApplyToAll">{{
                    'dialog-defaults-form.extra-option-label' | translate
                }}</mat-checkbox>
            </div>
            <h3>{{ 'dialog-defaults-form.hint.title' | translate }}</h3>
            <div class="iqser-input-group w-450">
                <label translate="dialog-defaults-form.hint.add-dialog"></label>
                <mat-form-field>
                    <mat-select formControlName="addHint">
                        <mat-option *ngFor="let option of hintAddOptions" [value]="option.value">{{ option.label | translate }}</mat-option>
                    </mat-select>
                </mat-form-field>
                <mat-checkbox *ngIf="displayExtraOptionAddHint" formControlName="addHintApplyToAll">{{
                    'dialog-defaults-form.extra-option-label' | translate
                }}</mat-checkbox>
            </div>
            <div class="iqser-input-group w-450">
                <label translate="dialog-defaults-form.hint.remove-dialog"></label>
                <mat-form-field>
                    <mat-select formControlName="removeHint">
                        <mat-option *ngFor="let option of removeOptions" [value]="option.value">{{ option.label | translate }}</mat-option>
                    </mat-select>
                </mat-form-field>
                <mat-checkbox *ngIf="displayExtraOptionRemoveHint" formControlName="removeHintApplyToAll">{{
                    'dialog-defaults-form.extra-option-label' | translate
                }}</mat-checkbox>
            </div>
        </div>
        <div class="dialog-actions">
            <iqser-icon-button
                (action)="save()"
                [disabled]="!valid || !changed"
                [label]="'preferences-screen.actions.save' | translate"
                [type]="iconButtonTypes.primary"
            ></iqser-icon-button>
        </div>
    </form>
</div>
