<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)="searchChanged(''); 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 [(ngModel)]="compare" color="primary">
                    {{ 'dictionary-overview.compare.compare' | translate }}
                </mat-checkbox>
            </div>

            <ng-container *ngIf="filterByDossierTemplate">
                <div *ngIf="dossierTemplatesService.all$ | async as templates" class="iqser-input-group w-200 mt-0 mr-8">
                    <mat-form-field>
                        <mat-select [(ngModel)]="dossierTemplate" [disabled]="!compare">
                            <mat-option [value]="selectDossierTemplate">{{ selectDossierTemplate.name | translate }}</mat-option>
                            <mat-option *ngFor="let dossierTemplate of templates" [value]="dossierTemplate">
                                {{ dossierTemplate.name }}
                            </mat-option>
                        </mat-select>
                    </mat-form-field>
                </div>

                <div class="iqser-input-group w-200 mt-0">
                    <mat-form-field>
                        <mat-select [(ngModel)]="compareDictionary" [disabled]="!compare || dossierTemplateIsNotSelected">
                            <mat-option [value]="selectDictionary">{{ selectDictionary.label | translate }}</mat-option>
                            <mat-option *ngFor="let dictionary of dictionaries" [value]="dictionary">
                                {{ dictionary.label }}
                            </mat-option>
                        </mat-select>
                    </mat-form-field>
                </div>
            </ng-container>

            <div *ngIf="!filterByDossierTemplate && activeDossiersService.all$ | async as dossiers" class="iqser-input-group w-200 mt-0">
                <mat-form-field>
                    <mat-select [(ngModel)]="dossier" [disabled]="!compare">
                        <mat-option [value]="selectDossier">{{ selectDossier.dossierName | translate }}</mat-option>
                        <mat-option *ngFor="let dossier of dossiers" [value]="dossier">
                            {{ dossier.dossierName }}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
            </div>
        </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()"
            [label]="'dictionary-overview.save-changes' | translate"
            [type]="iconButtonTypes.primary"
            icon="iqser:check"
            [disabled]="!!_loadingService.isLoading()"
        ></iqser-icon-button>
        <div (click)="revert()" class="all-caps-label cancel" translate="dictionary-overview.revert-changes"></div>
    </div>
</div>
