<vdr-page-header>
    <vdr-page-title>
        <vdr-action-bar-items locationId="facet-list"></vdr-action-bar-items>
        <a
            class="btn btn-primary"
            *vdrIfPermissions="['CreateCatalog', 'CreateFacet']"
            [routerLink]="['./create']"
        >
            <clr-icon shape="plus"></clr-icon>
            {{ 'catalog.create-new-facet' | translate }}
        </a>
    </vdr-page-title>
</vdr-page-header>
<vdr-page-body>
    <vdr-language-selector
        [availableLanguageCodes]="availableLanguages$ | async"
        [currentLanguageCode]="contentLanguage$ | async"
        (languageCodeChange)="setLanguage($event)"
    ></vdr-language-selector>
    <vdr-page-body>
        <vdr-data-table-2
            class="mt-2"
            id="facet-list"
            [items]="items$ | async"
            [itemsPerPage]="itemsPerPage$ | async"
            [totalItems]="totalItems$ | async"
            [currentPage]="currentPage$ | async"
            [filters]="filters"
            (pageChange)="setPageNumber($event)"
            (itemsPerPageChange)="setItemsPerPage($event)"
        >
            <vdr-bulk-action-menu
                locationId="facet-list"
                [hostComponent]="this"
                [selectionManager]="selectionManager"
            ></vdr-bulk-action-menu>
            <vdr-dt2-search
                [searchTermControl]="searchTermControl"
                [searchTermPlaceholder]="'catalog.filter-by-name' | translate"
            ></vdr-dt2-search>
            <vdr-dt2-column
                [heading]="'common.name' | translate"
                [optional]="false"
                [sort]="sorts.get('name')"
            >
                <ng-template let-facet="item">
                    <a class="button-ghost" [routerLink]="['./', facet.id]"
                        ><span>{{ facet.name }}</span>
                        <clr-icon shape="arrow right"></clr-icon>
                    </a>
                </ng-template>
            </vdr-dt2-column>
            <vdr-dt2-column [heading]="'common.code' | translate">
                <ng-template let-facet="item">
                    {{ facet.code }}
                </ng-template>
            </vdr-dt2-column>
            <vdr-dt2-column [heading]="'common.visibility' | translate">
                <ng-template let-facet="item">
                    <div class="badge warning" *ngIf="facet.isPrivate">{{ 'common.private' }}</div>
                    <div class="badge success" *ngIf="!facet.isPrivate">{{ 'common.public' }}</div>
                </ng-template>
            </vdr-dt2-column>
            <vdr-dt2-column [heading]="'catalog.values' | translate">
                <ng-template let-facet="item">
                    <div class="facet-values-list">
                        <vdr-facet-value-chip
                            *ngFor="let value of facet.values | slice : 0 : displayLimit[facet.id] || 3"
                            [facetValue]="value"
                            [removable]="false"
                            [displayFacetName]="false"
                        ></vdr-facet-value-chip>
                        <button
                            class="button-ghost"
                            *ngIf="facet.values.length > initialLimit"
                            (click)="toggleDisplayLimit(facet)"
                        >
                            <ng-container
                                *ngIf="(displayLimit[facet.id] || 0) < facet.values.length; else collapse"
                            >
                                <clr-icon shape="plus"></clr-icon>
                                {{ facet.values.length - initialLimit }}
                            </ng-container>
                            <ng-template #collapse>
                                <clr-icon shape="minus"></clr-icon>
                            </ng-template>
                        </button>
                    </div>
                </ng-template>
            </vdr-dt2-column>
        </vdr-data-table-2>
    </vdr-page-body>
</vdr-page-body>
