<vdr-action-bar>
    <vdr-ab-right>
        <a class="btn btn-primary" [routerLink]="['./create']">
            <clr-icon shape="plus"></clr-icon>
            {{ 'catalog.create-new-facet' | translate }}
        </a>
    </vdr-ab-right>
</vdr-action-bar>

<vdr-data-table
    [items]="items$ | async"
    [itemsPerPage]="itemsPerPage$ | async"
    [totalItems]="totalItems$ | async"
    [currentPage]="currentPage$ | async"
    (pageChange)="setPageNumber($event)"
    (itemsPerPageChange)="setItemsPerPage($event)"
>
    <vdr-dt-column>{{ 'common.code' | translate }}</vdr-dt-column>
    <vdr-dt-column>{{ 'common.name' | translate }}</vdr-dt-column>
    <vdr-dt-column [expand]="true">{{ 'catalog.values' | translate }}</vdr-dt-column>
    <vdr-dt-column>{{ 'catalog.visibility' | translate }}</vdr-dt-column>
    <vdr-dt-column></vdr-dt-column>
    <vdr-dt-column></vdr-dt-column>
    <ng-template let-facet="item">
        <td class="left align-middle" [class.private]="facet.isPrivate">{{ facet.code }}</td>
        <td class="left align-middle" [class.private]="facet.isPrivate">{{ facet.name }}</td>
        <td class="left align-middle" [class.private]="facet.isPrivate">
            <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="btn btn-sm btn-secondary btn-icon"
                *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>
        </td>
        <td class="left align-middle" [class.private]="facet.isPrivate">
            <vdr-chip>
                {{ facet.isPrivate ? ('catalog.private' | translate) : ('catalog.public' | translate) }}
            </vdr-chip>
        </td>
        <td class="right align-middle" [class.private]="facet.isPrivate">
            <vdr-table-row-action
                iconShape="edit"
                [label]="'common.edit' | translate"
                [linkTo]="['./', facet.id]"
            ></vdr-table-row-action>
        </td>
        <td class="right align-middle" [class.private]="facet.isPrivate">
            <vdr-dropdown>
                <button type="button" class="btn btn-link btn-sm" vdrDropdownTrigger>
                    {{ 'common.actions' | translate }}
                    <clr-icon shape="caret down"></clr-icon>
                </button>
                <vdr-dropdown-menu vdrPosition="bottom-right">
                    <button
                        type="button"
                        class="delete-button"
                        (click)="deleteFacet(facet.id)"
                        vdrDropdownItem
                    >
                        {{ 'common.delete' | translate }}
                    </button>
                </vdr-dropdown-menu>
            </vdr-dropdown>
        </td>
    </ng-template>
</vdr-data-table>
