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

        <div class="dialog-content">
            <div class="iqser-input-group w-450">
                <label [translate]="'redact-text.dialog.content.selected-text'"></label>
                {{ form.get('selectedText').value }}
            </div>

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

            <ng-container *deny="roles.getRss; if: !dictionaryRequest && type !== 'HINT'">
                <div 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 class="iqser-input-group w-450">
                    <label [translate]="'redact-text.dialog.content.legal-basis'"></label>
                    <input [value]="form.get('reason').value?.legalBasis" disabled type="text" />
                </div>
            </ng-container>

            <ng-container *deny="roles.getRss; if: dictionaryRequest || type === 'HINT'">
                <div class="iqser-input-group required w-450">
                    <label [translate]="'redact-text.dialog.content.type'"></label>

                    <mat-form-field>
                        <mat-select formControlName="dictionary" [placeholder]="'redact-text.dialog.content.type-placeholder' | translate">
                            <mat-select-trigger>{{ displayedDictionaryLabel }}</mat-select-trigger>
                            <mat-option
                                *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>
            </ng-container>

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

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

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

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