<section>
    <div class="page-header">
        <redaction-dossier-template-breadcrumbs class="flex-1"></redaction-dossier-template-breadcrumbs>

        <div class="flex-1 actions">
            <redaction-dossier-template-actions></redaction-dossier-template-actions>

            <iqser-circle-button
                [routerLink]="['../..']"
                [tooltip]="'common.close' | translate"
                icon="iqser:close"
                tooltipPosition="below"
            ></iqser-circle-button>
        </div>
    </div>

    <div class="content-inner">
        <div class="overlay-shadow"></div>

        <redaction-admin-side-nav type="dossierTemplates"></redaction-admin-side-nav>

        <div class="content-container">
            <iqser-table
                (noDataAction)="openAddEntityDialog()"
                [bulkActions]="bulkActions"
                [headerTemplate]="headerTemplate"
                [itemSize]="80"
                [noDataButtonIcon]="'iqser:plus'"
                [noDataButtonLabel]="'entities-listing.no-data.action' | translate"
                [noDataText]="'entities-listing.no-data.title' | translate"
                [noMatchText]="'entities-listing.no-match.title' | translate"
                [showNoDataButton]="permissionsService.canEditEntities()"
                [tableColumnConfigs]="tableColumnConfigs"
                noDataIcon="red:dictionary"
            ></iqser-table>
        </div>
    </div>
</section>

<ng-template #bulkActions>
    <iqser-circle-button
        (action)="openDeleteEntitiesDialog()"
        *ngIf="permissionsService.canDeleteEntities(listingService.selected)"
        [tooltip]="'entities-listing.bulk.delete' | translate"
        icon="iqser:trash"
    ></iqser-circle-button>
</ng-template>

<ng-template #headerTemplate>
    <div class="table-header-actions">
        <iqser-input-with-action
            [(value)]="searchService.searchValue"
            [placeholder]="'entities-listing.search' | translate"
        ></iqser-input-with-action>
        <div class="actions">
            <iqser-icon-button
                (action)="openAddEntityDialog()"
                *ngIf="permissionsService.canEditEntities()"
                [attr.help-mode-key]="'create_new_entity'"
                [label]="'entities-listing.add-new' | translate"
                [type]="iconButtonTypes.primary"
                icon="iqser:plus"
            ></iqser-icon-button>
        </div>
    </div>
</ng-template>

<ng-container *ngIf="templateStats$ | async as templateStats">
    <ng-template #tableItemTemplate let-entity="entity">
        <div *ngIf="cast(entity) as dict">
            <div class="cell">
                <div [attr.help-mode-key]="'entities'">
                    <div [ngStyle]="{ 'background-color': dict.hexColor }" class="color-square"></div>
                    <div class="dict-name">
                        <div class="table-item-title heading">
                            {{ dict.label }}
                        </div>
                    </div>
                </div>
            </div>

            <div class="cell center">
                <span class="small-label">{{ dict.rank }}</span>
            </div>

            <div class="cell center">
                <redaction-annotation-icon
                    [color]="dict.hexColor"
                    [label]="dict.hint ? 'H' : ('redaction-abbreviation' | translate)"
                    [type]="dict.hint ? 'circle' : 'square'"
                ></redaction-annotation-icon>
            </div>

            <div class="cell">
                <div class="small-label">
                    {{ templateStats.dictionarySummary(dict.type)?.entriesCount || 0 }}
                </div>

                <div class="action-buttons">
                    <div [attr.help-mode-key]="'edit_delete_entities'">
                        <iqser-circle-button
                            (action)="openDeleteEntitiesDialog([dict])"
                            *ngIf="permissionsService.canDeleteEntities(dict)"
                            [tooltip]="'entities-listing.action.delete' | translate"
                            icon="iqser:trash"
                        ></iqser-circle-button>

                        <iqser-circle-button
                            *ngIf="permissionsService.canEditEntities()"
                            [routerLink]="dict.routerLink | tenant"
                            [tooltip]="'entities-listing.action.edit' | translate"
                            icon="iqser:edit"
                        ></iqser-circle-button>
                    </div>
                </div>
            </div>
        </div>
    </ng-template>
</ng-container>
