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

        <div class="dialog-content">
            <div class="iqser-input-group">
                <label *ngIf="data.annotations.length === 1" translate="manual-annotation.dialog.content.text"></label>
            </div>
            {{
                data.annotations.length === 1
                    ? format(data.annotations[0].value)
                    : ('accept-recommendation-dialog.multiple-values' | translate)
            }}

            <div class="iqser-input-group required w-400">
                <label translate="manual-annotation.dialog.content.dictionary"></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 class="iqser-input-group w-300">
                <label translate="manual-annotation.dialog.content.comment"></label>
                <textarea formControlName="comment" iqserHasScrollbar name="comment" rows="4" type="text"></textarea>
            </div>
        </div>

        <div class="dialog-actions">
            <iqser-icon-button
                [disabled]="form.invalid"
                [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>
