<clr-modal
    clrModalSize="lg"
    [(clrModalOpen)]="projectsModalOpened"
    [clrModalStaticBackdrop]="true"
    [clrModalClosable]="true">
    <h3 class="modal-title">
        <span>{{ 'SYSTEM_ROBOT.PROJECTS_MODAL_TITLE' | translate }}</span>
        <div class="nav-divider"></div>
        <span class="name">{{ robotName }}</span>
    </h3>
    <div class="modal-body">
        <p class="mt-0">
            {{ 'SYSTEM_ROBOT.PROJECTS_MODAL_SUMMARY' | translate }}
        </p>
        <clr-datagrid
            (clrDgRefresh)="clrDgRefresh($event)"
            [clrDgLoading]="loading">
            <clr-dg-column>{{ 'PROJECT.NAME' | translate }}</clr-dg-column>
            <clr-dg-column>{{
                'SYSTEM_ROBOT.PERMISSION_COLUMN' | translate
            }}</clr-dg-column>
            <clr-dg-column>{{
                'PROJECT.CREATION_TIME' | translate
            }}</clr-dg-column>
            <clr-dg-row *clrDgItems="let p of permissions" [clrDgItem]="p">
                <clr-dg-cell>
                    <a
                        href="javascript:void(0)"
                        (click)="goToLink(getProject(p)?.project_id)"
                        >{{ p.namespace }}</a
                    >
                </clr-dg-cell>
                <clr-dg-cell>
                    <robot-permissions-panel
                        [mode]="PermissionSelectPanelModes.MODAL"
                        [permissionsModel]="p.access"
                        [candidatePermissions]="p.access">
                        <button class="btn btn-link btn-sm m-0" modal>
                            {{ p.access?.length }}
                            {{ 'SYSTEM_ROBOT.PERMISSIONS' | translate }}
                            <clr-icon
                                class="icon"
                                size="12"
                                shape="caret down"></clr-icon>
                        </button>
                    </robot-permissions-panel>
                </clr-dg-cell>
                <clr-dg-cell>{{
                    getProject(p)?.creation_time | harborDatetime : 'short'
                }}</clr-dg-cell>
            </clr-dg-row>
            <clr-dg-footer>
                <clr-dg-pagination #pagination [clrDgPageSize]="pageSize">
                    <clr-dg-page-size [clrPageSizeOptions]="[10, 20, 30]">{{
                        'PAGINATION.PAGE_SIZE' | translate
                    }}</clr-dg-page-size>
                    <span
                        >{{ pagination.firstItem + 1 }} -
                        {{ pagination.lastItem + 1 }}
                        {{ 'PROJECT.OF' | translate }}
                    </span>
                    {{ permissions?.length }} {{ 'PROJECT.ITEMS' | translate }}
                </clr-dg-pagination>
            </clr-dg-footer>
        </clr-datagrid>
    </div>
    <div class="modal-footer">
        <button type="button" (click)="close()" class="btn btn-primary">
            {{ 'BUTTON.CLOSE' | translate }}
        </button>
    </div>
</clr-modal>
