<div class="content-container">
    <div class="actions-bar">
        <div class="flex-align-items-center mr-32">
            <div class="iqser-input-group w-250">
                <input
                    #inputElement
                    (keyup)="searchChanged(searchText)"
                    [(ngModel)]="searchText"
                    [class.with-matches]="searchText.length > 0"
                    [placeholder]="'dictionary-overview.search' | translate"
                    type="text"
                />

                <div class="input-icons">
                    <div *ngIf="searchText.length === 0" class="no-input">
                        <mat-icon svgIcon="iqser:search"></mat-icon>
                    </div>

                    <div *ngIf="searchText.length > 0" class="with-input">
                        {{ currentMatch + '/' + findMatches.length }}
                        <mat-icon (click)="previousSearchMatch()" class="pointer" svgIcon="red:arrow-up"></mat-icon>
                        <mat-icon (click)="nextSearchMatch()" class="pointer" svgIcon="iqser:arrow-down"></mat-icon>
                        <mat-icon (click)="revert(); inputElement.focus()" class="pointer" svgIcon="iqser:close"></mat-icon>
                    </div>
                </div>
            </div>

            <iqser-circle-button
                (action)="download()"
                *ngIf="canDownload"
                [attr.help-mode-key]="helpModeKey"
                [matTooltip]="'dictionary-overview.download' | translate"
                class="ml-8"
                icon="iqser:download"
            ></iqser-circle-button>
        </div>

        <div class="compare">
            <div class="iqser-input-group mr-16">
                <mat-checkbox (change)="toggleCompareMode()" color="primary">
                    {{ 'dictionary-overview.compare.compare' | translate }}
                </mat-checkbox>
            </div>

            <ng-container>
                <div *ngIf="dossierTemplates" class="iqser-input-group w-200 mt-0 mr-8">
                    <mat-form-field>
                        <mat-select
                            [(ngModel)]="selectedDossierTemplate"
                            [disabled]="!compare || dossierTemplates.length === 1"
                            [placeholder]="
                                selectedDossierTemplate.id ? selectedDossierTemplate.name : (selectedDossierTemplate.name | translate)
                            "
                        >
                            <ng-container *ngFor="let dossierTemplate of dossierTemplates">
                                <mat-option
                                    *ngIf="!initialDossierTemplateId || dossierTemplate?.id !== selectedDossierTemplate.id"
                                    [class.mat-mdc-option-active]="false"
                                    [value]="dossierTemplate"
                                >
                                    {{ dossierTemplate.id ? dossierTemplate.name : (dossierTemplate.name | translate) }}
                                </mat-option>
                            </ng-container>
                        </mat-select>
                    </mat-form-field>
                </div>

                <div class="iqser-input-group w-200 mt-0">
                    <mat-form-field *ngIf="initialDossierTemplateId">
                        <mat-select
                            [(ngModel)]="selectedDossier"
                            [disabled]="!compare || (dossiers.length === 1 && !optionNotSelected)"
                            [placeholder]="selectedDossier.dossierId ? selectedDossier.dossierName : (selectDictionary.label | translate)"
                        >
                            <ng-container *ngFor="let dossier of dossiers; let index = index">
                                <mat-option
                                    *ngIf="dossier.dossierId !== selectedDossier.dossierId"
                                    [class.mat-mdc-option-active]="false"
                                    [value]="dossier"
                                >
                                    {{ dossier.dossierName }}
                                </mat-option>
                                <mat-divider
                                    *ngIf="index === dossiers.length - 2 && !selectedDossier.dossierId?.includes('template')"
                                ></mat-divider>
                            </ng-container>
                        </mat-select>
                    </mat-form-field>

                    <mat-form-field *ngIf="!initialDossierTemplateId">
                        <mat-select
                            [(ngModel)]="selectedDictionary"
                            [disabled]="!compare || !templateSelected"
                            [placeholder]="selectedDictionary.id ? selectedDictionary.label : (selectDictionary.label | translate)"
                        >
                            <ng-container *ngFor="let dictionary of dictionaries; let index = index">
                                <mat-option [value]="dictionary">
                                    {{ dictionary.id ? dictionary.label : (dictionary.label | translate) }}
                                </mat-option>
                            </ng-container>
                        </mat-select>
                    </mat-form-field>
                </div>
            </ng-container>
        </div>
    </div>

    <div class="editor-container">
        <redaction-editor
            [canEdit]="canEdit"
            [diffEditorText]="diffEditorText"
            [initialEntries]="initialEntries"
            [showDiffEditor]="compare && showDiffEditor"
        ></redaction-editor>

        <div *ngIf="compare && optionNotSelected" class="no-dictionary-selected">
            <mat-icon svgIcon="red:dictionary"></mat-icon>
            <span class="heading-l" translate="dictionary-overview.select-dictionary"></span>
        </div>
    </div>

    <div *ngIf="withFloatingActions && !!editor?.hasChanges && canEdit && !isLeavingPage" [class.offset]="compare" class="changes-box">
        <iqser-icon-button
            (action)="saveDictionary.emit()"
            [disabled]="!!_loadingService.isLoading()"
            [label]="'dictionary-overview.save-changes' | translate"
            [type]="iconButtonTypes.primary"
            icon="iqser:check"
        ></iqser-icon-button>
        <div (click)="revert()" class="all-caps-label cancel" translate="dictionary-overview.revert-changes"></div>
    </div>
</div>
