<div *ngIf="dictionaries && selectedDictionary" class="dictionary-content">
    <div class="dictionaries">
        <div
            (click)="selectDictionary(dictionary)"
            *ngFor="let dictionary of dictionaries"
            [class.active]="dictionary.label === selectedDictionary.label"
            class="dictionary"
        >
            <redaction-annotation-icon
                [color]="dictionary.hexColor"
                [label]="dictionary.hint ? 'H' : 'R'"
                type="square"
            ></redaction-annotation-icon>
            <div class="details">
                <div [matTooltip]="dictionary.label" class="dictionary-label clamp-1" matTooltipPosition="above">
                    {{ dictionary.label }}
                </div>
                <div class="small-label stats-subtitle">
                    <div>
                        <mat-icon svgIcon="red:entries"></mat-icon>
                        {{
                            dictionary.entries.length +
                                dictionary.falsePositiveEntries.length +
                                dictionary.falseRecommendationEntries.length
                        }}
                        entries
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="entries">
        <div class="header-wrapper">
            <div class="header-left">
                <div class="heading">
                    <div class="flex-align-items-center">
                        {{ selectedDictionary?.label }}
                        <iqser-circle-button
                            *ngIf="selectedDictionary.dossierDictionaryOnly && selectedDictionary.hasDictionary"
                            (action)="openEditDictionaryModal()"
                            [size]="20"
                            [tooltip]="'edit-dossier-dialog.dictionary.edit-button-tooltip' | translate"
                            icon="iqser:edit"
                            class="p-left-8"
                        ></iqser-circle-button>
                    </div>
                    <div class="small-label stats-subtitle">
                        <div>
                            <mat-icon svgIcon="red:entries"></mat-icon>
                            <ng-container *ngIf="activeEntryType === entryTypes.ENTRY || selectedDictionary.hint">
                                {{
                                    'edit-dossier-dialog.dictionary.entries'
                                        | translate: { length: entriesToDisplay.length, hint: selectedDictionary.hint }
                                }}
                            </ng-container>
                            <ng-container *ngIf="activeEntryType === entryTypes.FALSE_POSITIVE && !selectedDictionary.hint">
                                {{
                                    'edit-dossier-dialog.dictionary.false-positive-entries' | translate: { length: entriesToDisplay.length }
                                }}
                            </ng-container>
                            <ng-container *ngIf="activeEntryType === entryTypes.FALSE_RECOMMENDATION && !selectedDictionary.hint">
                                {{
                                    'edit-dossier-dialog.dictionary.false-recommendation-entries'
                                        | translate: { length: entriesToDisplay.length }
                                }}
                            </ng-container>
                        </div>
                    </div>
                </div>
            </div>
            <div *ngIf="!selectedDictionary.hint" [class.read-only]="!canEdit" class="header-right flex">
                <iqser-icon-button
                    (click)="selectEntryType(entryTypes.ENTRY)"
                    [active]="activeEntryType === entryTypes.ENTRY"
                    [label]="'edit-dossier-dialog.dictionary.to-redact' | translate"
                ></iqser-icon-button>
                <iqser-icon-button
                    (click)="selectEntryType(entryTypes.FALSE_POSITIVE)"
                    [active]="activeEntryType === entryTypes.FALSE_POSITIVE"
                    [label]="'edit-dossier-dialog.dictionary.false-positives' | translate"
                ></iqser-icon-button>
                <iqser-icon-button
                    (click)="selectEntryType(entryTypes.FALSE_RECOMMENDATION)"
                    [active]="activeEntryType === entryTypes.FALSE_RECOMMENDATION"
                    [label]="'edit-dossier-dialog.dictionary.false-recommendations' | translate"
                ></iqser-icon-button>
            </div>
        </div>

        <redaction-dictionary-manager
            [activeEntryType]="activeEntryType"
            [canEdit]="canEdit"
            [currentDossierId]="dossier.dossierId"
            [currentDossierTemplateId]="dossier.dossierTemplateId"
            [hint]="selectedDictionary.hint"
            [initialEntries]="entriesToDisplay || []"
            [selectedDictionaryTypeLabel]="selectedDictionary.label"
            [selectedDictionaryType]="selectedDictionary.type"
            [withFloatingActions]="false"
        ></redaction-dictionary-manager>
    </div>
</div>
