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

        <div class="dialog-content redaction">
            <div class="iqser-input-group w-full selected-text-group">
                <div
                    [class.fixed-height-36]="dictionaryRequest"
                    [ngClass]="isEditingSelectedText ? 'flex relative' : 'flex-align-items-center'"
                >
                    <div class="table">
                        <label> {{ 'redact-text.dialog.content.value' | translate }} </label>
                        <div class="row">
                            <span
                                *ngIf="!isEditingSelectedText"
                                [innerHTML]="form.controls.selectedText.value"
                                [ngStyle]="{
                                    'min-width': textWidth > maximumSelectedTextWidth ? '95%' : 'unset',
                                    'max-width': textWidth > maximumSelectedTextWidth ? 0 : 'unset',
                                }"
                            ></span>
                            <textarea
                                *ngIf="isEditingSelectedText"
                                [rows]="selectedTextRows"
                                [ngStyle]="{ width: maximumTextAreaWidth + 'px' }"
                                formControlName="selectedText"
                                iqserHasScrollbar
                                name="value"
                                type="text"
                            ></textarea>

                            <iqser-circle-button
                                (action)="toggleEditingSelectedText()"
                                *ngIf="dictionaryRequest && !isEditingSelectedText"
                                [tooltip]="'redact-text.dialog.content.edit-text' | translate"
                                [size]="20"
                                [iconSize]="13"
                                icon="iqser:edit"
                                tooltipPosition="below"
                            ></iqser-circle-button>

                            <iqser-circle-button
                                (action)="undoTextChange(); toggleEditingSelectedText()"
                                *ngIf="isEditingSelectedText"
                                [showDot]="initialText !== form.get('selectedText').value"
                                [tooltip]="'redact-text.dialog.content.revert-text' | translate"
                                [size]="20"
                                [iconSize]="13"
                                class="undo-button"
                                icon="red:undo"
                                tooltipPosition="below"
                            ></iqser-circle-button>
                        </div>
                    </div>
                </div>
            </div>

            <iqser-details-radio
                (extraOptionChanged)="extraOptionChanged($event)"
                [options]="options"
                formControlName="option"
            ></iqser-details-radio>

            <div *ngIf="!dictionaryRequest" class="iqser-input-group required w-450">
                <label [translate]="'redact-text.dialog.content.reason'"></label>
                <mat-form-field>
                    <mat-select
                        [placeholder]="'redact-text.dialog.content.reason-placeholder' | translate"
                        class="full-width"
                        formControlName="reason"
                    >
                        <mat-option
                            *ngFor="let option of legalOptions"
                            [matTooltip]="option.description"
                            [value]="option"
                            matTooltipPosition="after"
                        >
                            {{ option.label }}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
            </div>

            <div *ngIf="!dictionaryRequest" class="iqser-input-group w-450">
                <label [translate]="'redact-text.dialog.content.legal-basis'"></label>
                <input [value]="form.controls.reason.value?.legalBasis" disabled type="text" />
            </div>

            <div *ngIf="dictionaryRequest" class="iqser-input-group required w-450">
                <label [translate]="'redact-text.dialog.content.type'"></label>

                <mat-form-field>
                    <mat-select [placeholder]="'redact-text.dialog.content.type-placeholder' | translate" formControlName="dictionary">
                        <mat-select-trigger>{{ displayedDictionaryLabel$ | async }}</mat-select-trigger>
                        <mat-option
                            (click)="typeChanged()"
                            *ngFor="let dictionary of dictionaries"
                            [matTooltip]="dictionary.description"
                            [value]="dictionary.type"
                            matTooltipPosition="after"
                        >
                            <span> {{ dictionary.label }} </span>
                        </mat-option>
                    </mat-select>
                </mat-form-field>
            </div>

            <div *ngIf="!dictionaryRequest" class="iqser-input-group w-450">
                <label [translate]="'redact-text.dialog.content.comment'"></label>
                <textarea
                    [placeholder]="'redact-text.dialog.content.comment-placeholder' | translate"
                    formControlName="comment"
                    iqserHasScrollbar
                    name="comment"
                    rows="4"
                    type="text"
                ></textarea>
            </div>
        </div>

        <div class="dialog-actions">
            <iqser-icon-button
                [disabled]="!form.valid"
                [label]="'redact-text.dialog.actions.save' | translate"
                [submit]="true"
                [type]="iconButtonTypes.primary"
            />

            <div [translate]="'redact-text.dialog.actions.cancel'" class="all-caps-label cancel" mat-dialog-close></div>
        </div>
    </form>

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