<clr-datagrid
    [clrDgPreserveSelection]="true"
    [(clrDgSelected)]="selectedRow"
    [clrDgLoading]="loadingData"
    class="datagrid-compact">
    <clr-dg-action-bar class="action-bar">
        <robot-permissions-panel
            [mode]="PermissionSelectPanelModes.DROPDOWN"
            [(permissionsModel)]="initialAccess"
            (permissionsModelChange)="resetAccess(initialAccess)"
            [candidatePermissions]="robotMetadata?.project">
            <button class="btn btn-secondary btn-sm m-0">
                {{ 'SYSTEM_ROBOT.RESET_PERMISSION' | translate }}
                <clr-icon size="12" shape="caret down"></clr-icon>
            </button>
        </robot-permissions-panel>
        <button
            (click)="selectAllOrUnselectAll()"
            class="btn btn-secondary btn-sm m-0 ml-1">
            <span *ngIf="showSelectAll">{{
                'SYSTEM_ROBOT.SELECT_ALL_PROJECT' | translate
            }}</span>
            <span *ngIf="!showSelectAll">{{
                'SYSTEM_ROBOT.UNSELECT_ALL_PROJECT' | translate
            }}</span>
        </button>
    </clr-dg-action-bar>
    <clr-dg-column
        [clrDgField]="'name'"
        [(clrFilterValue)]="myNameFilterValue"
        >{{ 'PROJECT.NAME' | translate }}</clr-dg-column
    >
    <clr-dg-column [clrDgSortBy]="timeComparator">{{
        'PROJECT.CREATION_TIME' | translate
    }}</clr-dg-column>
    <clr-dg-column>{{
        'SYSTEM_ROBOT.PERMISSION_COLUMN' | translate
    }}</clr-dg-column>
    <clr-dg-row *clrDgItems="let p of projects" [clrDgItem]="p">
        <clr-dg-cell>
            <a href="javascript:void(0)" [routerLink]="getLink(p.project_id)">{{
                p.name
            }}</a>
        </clr-dg-cell>
        <clr-dg-cell>{{
            p.creation_time | harborDatetime : 'short'
        }}</clr-dg-cell>
        <clr-dg-cell>
            <robot-permissions-panel
                [usedInDatagrid]="true"
                [mode]="PermissionSelectPanelModes.DROPDOWN"
                [(permissionsModel)]="selectedProjectPermissionMap[p.name]"
                [candidatePermissions]="robotMetadata?.project">
                <button class="btn btn-link btn-sm m-0 p-0">
                    {{ selectedProjectPermissionMap[p.name]?.length || 0 }}
                    {{ 'SYSTEM_ROBOT.PERMISSIONS' | translate }}
                    <clr-icon shape="caret down"></clr-icon>
                </button>
            </robot-permissions-panel>
        </clr-dg-cell>
    </clr-dg-row>
    <clr-dg-footer>
        <clr-dg-pagination
            #pagination
            [(clrDgPage)]="currentPage"
            [clrDgPageSize]="pageSize">
            <clr-dg-page-size [clrPageSizeOptions]="[5, 10]">{{
                'PAGINATION.PAGE_SIZE' | translate
            }}</clr-dg-page-size>
            <span
                >{{ pagination.firstItem + 1 }} - {{ pagination.lastItem + 1 }}
                {{ 'PROJECT.OF' | translate }}
            </span>
            {{ projects?.length }} {{ 'PROJECT.ITEMS' | translate }}
        </clr-dg-pagination>
    </clr-dg-footer>
</clr-datagrid>
