<h2 class="custom-h2">{{ 'SYSTEM_ROBOT.ROBOT_ACCOUNT_NAV' | translate }}</h2>
<div class="row robot-space">
    <div>
        <div class="row flex-items-xs-between rightPos">
            <div class="flex-xs-middle option-left"></div>
            <div class="flex-xs-middle option-right">
                <hbr-filter
                    [width]="240"
                    [withDivider]="true"
                    filterPlaceholder="{{
                        'SYSTEM_ROBOT.SEARCH_BY_NAME' | translate
                    }}"></hbr-filter>
                <span class="refresh-btn" (click)="refresh()">
                    <clr-icon shape="refresh"></clr-icon>
                </span>
            </div>
        </div>
    </div>
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <clr-dg-action-bar>
            <button
                [disabled]="loadingData || loadingMetadata"
                [clrLoading]="addBtnState"
                class="btn btn-secondary"
                (click)="openNewRobotModal(false)">
                <span>
                    <clr-icon shape="plus" size="16"></clr-icon>&nbsp;{{
                        'ROBOT_ACCOUNT.NEW_ROBOT_ACCOUNT' | translate
                    }}
                </span>
            </button>
            <clr-dropdown
                [clrCloseMenuOnItemClick]="false"
                class="btn btn-link"
                clrDropdownTrigger>
                <span
                    >{{ 'MEMBER.ACTION' | translate
                    }}<clr-icon
                        shape="caret
            down"></clr-icon
                ></span>
                <clr-dropdown-menu *clrIfOpen>
                    <button
                        [disabled]="
                            loadingData ||
                            !(selectedRows && selectedRows.length === 1)
                        "
                        clrDropdownItem
                        (click)="openTokenModal()">
                        <clr-icon shape="details" size="16"></clr-icon>&nbsp;
                        <span id="system-robot-token">{{
                            'SYSTEM_ROBOT.VIEW_SECRET' | translate
                        }}</span>
                    </button>
                    <button
                        [disabled]="
                            loadingData ||
                            !(selectedRows && selectedRows.length === 1)
                        "
                        clrDropdownItem
                        (click)="openNewRobotModal(true)">
                        <clr-icon shape="edit" size="16"></clr-icon>&nbsp;
                        <span id="system-robot-edit">{{
                            'BUTTON.EDIT' | translate
                        }}</span>
                    </button>
                    <button
                        *ngIf="
                            selectedRows &&
                            selectedRows.length === 1 &&
                            selectedRows[0].disable
                        "
                        type="button"
                        class="btn btn-secondary"
                        (click)="disableOrEnable()"
                        [disabled]="
                            !(
                                selectedRows &&
                                selectedRows.length === 1 &&
                                selectedRows[0].disable
                            )
                        ">
                        <clr-icon size="16" shape="success-standard"></clr-icon
                        >&nbsp;
                        <span id="distribution-enable">{{
                            'WEBHOOK.ENABLED_BUTTON' | translate
                        }}</span>
                    </button>
                    <button
                        *ngIf="
                            !(
                                selectedRows &&
                                selectedRows.length === 1 &&
                                selectedRows[0].disable
                            )
                        "
                        type="button"
                        class="btn btn-secondary"
                        (click)="disableOrEnable()"
                        [disabled]="
                            !(
                                selectedRows &&
                                selectedRows.length === 1 &&
                                !selectedRows[0].disable
                            )
                        ">
                        <clr-icon size="16" shape="ban"></clr-icon>&nbsp;
                        <span id="distribution-disable">{{
                            'WEBHOOK.DISABLED_BUTTON' | translate
                        }}</span>
                    </button>
                    <div class="dropdown-divider"></div>
                    <button
                        [disabled]="
                            loadingData ||
                            !(selectedRows && selectedRows.length >= 1)
                        "
                        clrDropdownItem
                        (click)="openDeleteRobotsDialog()">
                        <clr-icon shape="window-close" size="16"></clr-icon
                        >&nbsp;
                        <span id="system-robot-delete">{{
                            'BUTTON.DELETE' | translate
                        }}</span>
                    </button>
                </clr-dropdown-menu>
            </clr-dropdown>
        </clr-dg-action-bar>
        <clr-datagrid
            (clrDgRefresh)="clrLoad($event)"
            [clrDgLoading]="loading"
            [(clrDgSelected)]="selectedRows">
            <clr-dg-column [clrDgSortBy]="'name'">{{
                'ROBOT_ACCOUNT.NAME' | translate
            }}</clr-dg-column>
            <clr-dg-column>{{
                'ROBOT_ACCOUNT.ENABLED_STATE' | translate
            }}</clr-dg-column>
            <clr-dg-column class="permission-col">{{
                'ROBOT_ACCOUNT.SYSTEM_PERMISSIONS' | translate
            }}</clr-dg-column>
            <clr-dg-column class="projects-col">{{
                'SYSTEM_ROBOT.PROJECTS' | translate
            }}</clr-dg-column>
            <clr-dg-column [clrDgSortBy]="'creation_time'">{{
                'ROBOT_ACCOUNT.CREATION' | translate
            }}</clr-dg-column>
            <clr-dg-column>{{
                'SYSTEM_ROBOT.EXPIRES_IN' | translate
            }}</clr-dg-column>
            <clr-dg-column>{{
                'ROBOT_ACCOUNT.DESCRIPTION' | translate
            }}</clr-dg-column>
            <clr-dg-placeholder>{{
                'SYSTEM_ROBOT.NOT_FOUND' | translate
            }}</clr-dg-placeholder>
            <clr-dg-row *ngFor="let r of robots" [clrDgItem]="r">
                <clr-dg-cell>{{ r.name }}</clr-dg-cell>
                <clr-dg-cell [ngSwitch]="r.disable">
                    <clr-icon
                        shape="check-circle"
                        *ngSwitchCase="false"
                        size="20"
                        class="color-green"></clr-icon>
                    <clr-icon
                        shape="times-circle"
                        *ngSwitchCase="true"
                        size="16"
                        class="color-red red-position"></clr-icon>
                </clr-dg-cell>
                <clr-dg-cell>
                    <span *ngIf="!getSystemAccess(r)?.length">
                        {{ 'SCHEDULE.NONE' | translate }}
                    </span>
                    <robot-permissions-panel
                        *ngIf="getSystemAccess(r)?.length"
                        [mode]="PermissionSelectPanelModes.MODAL"
                        [permissionsModel]="getSystemAccess(r)"
                        [candidatePermissions]="getSystemAccess(r)">
                        <button class="btn btn-link btn-sm m-0 p-0" modal>
                            {{ getSystemAccess(r)?.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>
                    <div
                        class="all-projects"
                        *ngIf="r.permissionScope?.coverAll">
                        <span>{{
                            'SYSTEM_ROBOT.ALL_PROJECTS' | translate
                        }}</span>

                        <robot-permissions-panel
                            [mode]="PermissionSelectPanelModes.MODAL"
                            [permissionsModel]="r.permissionScope?.access"
                            [candidatePermissions]="r.permissionScope?.access">
                            <button class="btn btn-link btn-sm m-0" modal>
                                {{ r.permissionScope?.access?.length }}
                                {{ 'SYSTEM_ROBOT.PERMISSIONS' | translate }}
                                <clr-icon
                                    class="icon"
                                    size="12"
                                    shape="caret down"></clr-icon>
                            </button>
                        </robot-permissions-panel>
                    </div>
                    <span
                        *ngIf="
                            !r.permissionScope || !r.permissionScope?.coverAll
                        ">
                        <a
                            *ngIf="getProjects(r)?.length"
                            href="javascript:void(0)"
                            (click)="openProjectModal(getProjects(r), r.name)">
                            {{ getProjects(r)?.length }}
                            {{ 'SYSTEM_ROBOT.COVERED_PROJECTS' | translate }}
                        </a>
                        <span *ngIf="!getProjects(r)?.length">
                            {{ 'SCHEDULE.NONE' | translate }}
                        </span>
                    </span>
                </clr-dg-cell>
                <clr-dg-cell>{{
                    r.creation_time | harborDatetime : 'short'
                }}</clr-dg-cell>
                <clr-dg-cell
                    ><app-remaining-time
                        [deadline]="r?.expires_at"
                        [timeDiff]="deltaTime"></app-remaining-time
                ></clr-dg-cell>
                <clr-dg-cell>{{ r.description }}</clr-dg-cell>
            </clr-dg-row>
            <clr-dg-footer>
                <clr-dg-pagination
                    #pagination
                    [clrDgPageSize]="pageSize"
                    [(clrDgPage)]="currentPage"
                    [clrDgTotalItems]="total">
                    <clr-dg-page-size
                        [clrPageSizeOptions]="clrPageSizeOptions"
                        >{{
                            'PAGINATION.PAGE_SIZE' | translate
                        }}</clr-dg-page-size
                    >
                    <span *ngIf="total"
                        >{{ pagination.firstItem + 1 }}
                        -
                        {{ pagination.lastItem + 1 }}
                        {{ 'ROBOT_ACCOUNT.OF' | translate }}
                    </span>
                    {{ total }} {{ 'ROBOT_ACCOUNT.ITEMS' | translate }}
                </clr-dg-pagination>
            </clr-dg-footer>
        </clr-datagrid>
    </div>
</div>
<new-robot
    (addSuccess)="addSuccess($event)"
    [robotMetadata]="robotMetadata"></new-robot>
<view-token (refreshSuccess)="refresh()"></view-token>
<app-projects-modal></app-projects-modal>
