<div class="dictionary-content" *ngIf="dictionaries && selectedDictionary">
    <div class="dictionaries">
        <div
            class="dictionary"
            *ngFor="let dictionary of dictionaries"
            [class.active]="dictionary.label === selectedDictionary.label"
            (click)="selectDictionary(dictionary)"
        >
            <redaction-annotation-icon
                [color]="dictionary.hexColor"
                [label]="dictionary.hint ? 'H' : 'R'"
                type="square"
            ></redaction-annotation-icon>
            <div class="details">
                <span> {{ dictionary.label }} </span>
                <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 }}
                    </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 class="header-right flex" [class.read-only]="!canEdit" *ngIf="!selectedDictionary.hint">
                <iqser-icon-button
                    [label]="'edit-dossier-dialog.dictionary.to-redact' | translate"
                    [active]="activeEntryType === entryTypes.ENTRY"
                    (click)="selectEntryType(entryTypes.ENTRY)"
                ></iqser-icon-button>
                <iqser-icon-button
                    [label]="'edit-dossier-dialog.dictionary.false-positives' | translate"
                    [active]="activeEntryType === entryTypes.FALSE_POSITIVE"
                    (click)="selectEntryType(entryTypes.FALSE_POSITIVE)"
                ></iqser-icon-button>
                <iqser-icon-button
                    [label]="'edit-dossier-dialog.dictionary.false-recommendations' | translate"
                    [active]="activeEntryType === entryTypes.FALSE_RECOMMENDATION"
                    (click)="selectEntryType(entryTypes.FALSE_RECOMMENDATION)"
                ></iqser-icon-button>
            </div>
        </div>

        <redaction-dictionary-manager
            [canEdit]="canEdit"
            [initialEntries]="entriesToDisplay || []"
            [withFloatingActions]="false"
            [selectedDictionaryType]="selectedDictionary.type"
            [activeEntryType]="activeEntryType"
            [hint]="selectedDictionary.hint"
        ></redaction-dictionary-manager>
    </div>
</div>
