<section class="dialog">
    <form (submit)="save()" [formGroup]="form">
        <div
            [innerHTML]="'resize-redaction.dialog.header' | translate: { type: redaction.hint ? 'hint' : 'redaction' }"
            class="dialog-header heading-l"
        ></div>

        <div class="dialog-content redaction">
            <ng-container *ngIf="!redaction.isImage && !redaction.rectangle">
                <div class="iqser-input-group w-450">
                    <label [translate]="'resize-redaction.dialog.content.original-text'" class="selected-text"></label>
                    <span>{{ redaction.value }}</span>
                </div>

                <div class="iqser-input-group w-450">
                    <label [translate]="'resize-redaction.dialog.content.resized-text'" class="selected-text"></label>
                    <span>{{ data.text }}</span>
                </div>
            </ng-container>

            <iqser-details-radio [options]="options" formControlName="option" />

            <div class="iqser-input-group required w-450">
                <label [translate]="'resize-redaction.dialog.content.type'"></label>

                <mat-form-field>
                    <mat-select formControlName="dictionary">
                        <mat-select-trigger>{{ displayedDictionaryLabel }}</mat-select-trigger>
                        <mat-option [value]="redaction.entity.type">
                            <span> {{ redaction.entity.label }} </span>
                        </mat-option>
                    </mat-select>
                </mat-form-field>
            </div>

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

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

            <div [translate]="'resize-redaction.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>
