<vdr-action-bar>
    <vdr-ab-right>
        <vdr-action-bar-items locationId="role-list"></vdr-action-bar-items>
        <a class="btn btn-primary" [routerLink]="['./create']" *vdrIfPermissions="'CreateAdministrator'">
            <clr-icon shape="plus"></clr-icon>
            {{ 'settings.create-new-role' | translate }}
        </a>
    </vdr-ab-right>
</vdr-action-bar>

<vdr-data-table
    [items]="visibleRoles$ | async"
    [itemsPerPage]="itemsPerPage$ | async"
    [totalItems]="totalItems$ | async"
    [currentPage]="currentPage$ | async"
    (pageChange)="setPageNumber($event)"
    (itemsPerPageChange)="setItemsPerPage($event)"
>
    <vdr-dt-column>{{ 'common.description' | translate }}</vdr-dt-column>
    <vdr-dt-column>{{ 'common.code' | translate }}</vdr-dt-column>
    <vdr-dt-column>{{ 'settings.channel' | translate }}</vdr-dt-column>
    <vdr-dt-column>{{ 'settings.permissions' | translate }}</vdr-dt-column>
    <vdr-dt-column></vdr-dt-column>
    <vdr-dt-column></vdr-dt-column>
    <ng-template let-role="item">
        <td class="left align-middle">{{ role.description }}</td>
        <td class="left align-middle"><span *ngIf="!isDefaultRole(role)">{{ role.code }}</span></td>
        <td class="left align-middle">
            <ng-container *ngIf="!isDefaultRole(role)">
                <vdr-chip *ngFor="let channel of role.channels">
                    <vdr-channel-badge [channelCode]="channel.code"></vdr-channel-badge>
                    {{ channel.code | channelCodeToLabel | translate }}
                </vdr-chip>
            </ng-container>
        </td>
        <td class="left align-middle">
            <ng-container *ngIf="!isDefaultRole(role); else defaultRole">
                <vdr-chip *ngFor="let permission of role.permissions |  slice: 0:displayLimit[role.id] || 3">{{ permission }}</vdr-chip>
                <button
                    class="btn btn-sm btn-secondary btn-icon"
                    *ngIf="role.permissions.length > initialLimit"
                    (click)="toggleDisplayLimit(role)"
                >
                    <ng-container *ngIf="(displayLimit[role.id] || 0) < role.permissions.length; else collapse">
                        <clr-icon shape="plus"></clr-icon>
                        {{ role.permissions.length - initialLimit }}
                    </ng-container>
                    <ng-template #collapse>
                        <clr-icon shape="minus"></clr-icon>
                    </ng-template>
                </button>
            </ng-container>
            <ng-template #defaultRole>
                <span class="default-role-label">{{ 'settings.default-role-label' | translate }}</span>
            </ng-template>
        </td>
        <td class="right align-middle">
            <vdr-table-row-action
                *ngIf="!isDefaultRole(role)"
                iconShape="edit"
                [label]="'common.edit' | translate"
                [linkTo]="['./', role.id]"
            ></vdr-table-row-action>
        </td>
        <td class="right align-middle">
            <vdr-dropdown>
                <button type="button" class="btn btn-link btn-sm" vdrDropdownTrigger [disabled]="isDefaultRole(role)">
                    {{ 'common.actions' | translate }}
                    <clr-icon shape="caret down"></clr-icon>
                </button>
                <vdr-dropdown-menu vdrPosition="bottom-right">
                    <button
                        type="button"
                        class="delete-button"
                        (click)="deleteRole(role.id)"
                        [disabled]="!('SuperAdmin' | hasPermission)"
                        vdrDropdownItem
                    >
                        <clr-icon shape="trash" class="is-danger"></clr-icon>
                        {{ 'common.delete' | translate }}
                    </button>
                </vdr-dropdown-menu>
            </vdr-dropdown>
        </td>
    </ng-template>
</vdr-data-table>
