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

        <div class="dialog-content redaction">
            <div *ngIf="showList">
                <label
                    [translate]="'edit-redaction.dialog.content.redacted-text'"
                    [translateParams]="{ length: redactedTexts.length }"
                    class="selected-text"
                ></label>
                <cdk-virtual-scroll-viewport
                    [itemSize]="16"
                    [ngStyle]="{ height: redactedTexts.length <= 5 ? 16 * redactedTexts.length + 'px' : 80 + 'px' }"
                >
                    <ul *cdkVirtualFor="let text of redactedTexts">
                        <li>{{ text }}</li>
                    </ul>
                </cdk-virtual-scroll-viewport>
            </div>

            <div class="iqser-input-group required w-450">
                <label [translate]="'edit-redaction.dialog.content.type'"></label>
                <mat-form-field>
                    <mat-select formControlName="type" [placeholder]="'edit-redaction.dialog.content.unchanged' | 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>

            <div class="iqser-input-group w-450">
                <label [translate]="'edit-redaction.dialog.content.comment'"></label>
                <textarea
                    [placeholder]="
                        redactedTexts.length === 1
                            ? ('edit-redaction.dialog.content.comment-placeholder' | translate)
                            : ('edit-redaction.dialog.content.unchanged' | translate)
                    "
                    formControlName="comment"
                    iqserHasScrollbar
                    name="comment"
                    rows="4"
                    type="text"
                ></textarea>
            </div>
        </div>

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

            <div [translate]="'edit-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"></iqser-circle-button>
</section>
