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

        <div class="dialog-content">
            <div *ngIf="!isRectangle" class="iqser-input-group w-450">
                <label [translate]="'manual-annotation.dialog.content.text'"></label>
                <div *ngIf="!isEditingSelectedText" class="flex-align-items-center">
                    {{ form.get('selectedText').value }}
                    <iqser-circle-button
                        (action)="isEditingSelectedText = true"
                        *ngIf="isDictionaryRequest"
                        [tooltip]="'manual-annotation.dialog.content.edit-selected-text' | translate"
                        icon="iqser:edit"
                        tooltipPosition="below"
                    ></iqser-circle-button>
                </div>

                <textarea
                    *ngIf="isEditingSelectedText"
                    formControlName="selectedText"
                    iqserHasScrollbar
                    name="comment"
                    rows="4"
                    type="text"
                ></textarea>
            </div>

            <div *ngIf="isRectangle" class="iqser-input-group">
                <label [translate]="'manual-annotation.dialog.content.rectangle'"></label>
            </div>

            <div
                *ngIf="!isFalsePositiveRequest && (isDictionaryRequest || !manualRedactionTypeExists)"
                class="iqser-input-group required w-450"
            >
                <label *ngIf="isDictionaryRequest" [translate]="'manual-annotation.dialog.content.dictionary'"></label>
                <label *ngIf="!isDictionaryRequest" [translate]="'manual-annotation.dialog.content.type'"></label>

                <mat-form-field>
                    <mat-select formControlName="dictionary">
                        <mat-select-trigger>{{ displayedDictionaryLabel }}</mat-select-trigger>
                        <mat-option
                            *ngFor="let dictionary of possibleDictionaries"
                            [matTooltip]="dictionary.description"
                            [value]="dictionary.type"
                            matTooltipPosition="after"
                        >
                            <span> {{ dictionary.label }} </span>
                        </mat-option>
                    </mat-select>
                </mat-form-field>
            </div>

            <div *deny="roles.getRss; if: !isDictionaryRequest" class="iqser-input-group required w-450">
                <label [translate]="'manual-annotation.dialog.content.reason'"></label>
                <mat-form-field>
                    <mat-select
                        [placeholder]="'manual-annotation.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 *deny="roles.getRss; if: !isDictionaryRequest" class="iqser-input-group w-450">
                <label [translate]="'manual-annotation.dialog.content.legalBasis'"></label>
                <input [value]="form.get('reason').value?.legalBasis" disabled type="text" />
            </div>

            <div *ngIf="isRectangle" class="iqser-input-group w-450">
                <label [translate]="'manual-annotation.dialog.content.section'"></label>
                <input formControlName="section" name="section" type="text" />
            </div>

            <div *ngIf="isRectangle" class="iqser-input-group w-450">
                <label [translate]="'manual-annotation.dialog.content.classification'"></label>
                <input formControlName="classification" name="classification" type="text" />
            </div>

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

            <div *ngIf="isRectangle" class="apply-on-multiple-pages iqser-input-group w-450">
                <mat-checkbox
                    (change)="applyOnMultiplePages = !applyOnMultiplePages"
                    [checked]="applyOnMultiplePages"
                    class="mb-15"
                    color="primary"
                >
                    {{ 'manual-annotation.dialog.content.apply-on-multiple-pages' | translate }}
                </mat-checkbox>

                <div *ngIf="applyOnMultiplePages">
                    <input
                        [placeholder]="'manual-annotation.dialog.content.apply-on-multiple-pages-placeholder' | translate"
                        class="full-width"
                        formControlName="multiplePages"
                    />

                    <span class="hint">{{ 'manual-annotation.dialog.content.apply-on-multiple-pages-hint' | translate }}</span>
                </div>
            </div>
        </div>

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

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