<clr-datagrid
    [(clrDgSelected)]="selectedRows"
    [clrDgLoading]="loading"
    (clrDgRefresh)="clrLoad($event)">
    <clr-dg-action-bar>
        <clr-dg-action-bar class="action-bar mt-0">
            <div>
                <button
                    [clrLoading]="loadingStop"
                    [disabled]="loadingStop || !selectedRows?.length"
                    type="button"
                    class="btn btn-secondary"
                    (click)="stop()">
                    {{ 'JOB_SERVICE_DASHBOARD.STOP_BTN' | translate }}
                </button>
                <button
                    (click)="pause()"
                    [disabled]="!canPause()"
                    type="button"
                    class="btn btn-secondary">
                    {{ 'JOB_SERVICE_DASHBOARD.PAUSE_BTN' | translate }}
                </button>
                <button
                    (click)="resume()"
                    [disabled]="!canResume()"
                    type="button"
                    class="btn btn-secondary">
                    {{ 'JOB_SERVICE_DASHBOARD.RESUME_BTN' | translate }}
                </button>
                <clr-tooltip>
                    <clr-icon
                        clrTooltipTrigger
                        shape="info-circle"
                        size="24"></clr-icon>
                    <clr-tooltip-content
                        clrPosition="top-right"
                        clrSize="lg"
                        *clrIfOpen>
                        <div>
                            {{
                                'JOB_SERVICE_DASHBOARD.QUEUE_STOP_BTN_INFO'
                                    | translate
                            }}
                        </div>
                        <div>
                            {{
                                'JOB_SERVICE_DASHBOARD.QUEUE_PAUSE_BTN_INFO'
                                    | translate
                            }}
                        </div>
                        <div>
                            {{
                                'JOB_SERVICE_DASHBOARD.QUEUE_RESUME_BTN_INFO'
                                    | translate
                            }}
                        </div>
                    </clr-tooltip-content>
                </clr-tooltip>
            </div>
            <span class="refresh-btn">
                <clr-icon shape="refresh" (click)="getJobs()"></clr-icon>
            </span>
        </clr-dg-action-bar>
    </clr-dg-action-bar>
    <clr-dg-column [clrDgField]="'job_type'">{{
        'JOB_SERVICE_DASHBOARD.JOB_TYPE' | translate
    }}</clr-dg-column>
    <clr-dg-column [clrDgSortBy]="'count'">{{
        'JOB_SERVICE_DASHBOARD.PENDING_COUNT' | translate
    }}</clr-dg-column>
    <clr-dg-column [clrDgSortBy]="'latency'">{{
        'JOB_SERVICE_DASHBOARD.LATENCY' | translate
    }}</clr-dg-column>
    <clr-dg-column>{{
        'JOB_SERVICE_DASHBOARD.PAUSED' | translate
    }}</clr-dg-column>
    <clr-dg-placeholder>{{
        'JOB_SERVICE_DASHBOARD.NO_JOB_QUEUE' | translate
    }}</clr-dg-placeholder>
    <clr-dg-row *clrDgItems="let j of jobQueue" [clrDgItem]="j">
        <clr-dg-cell>{{ j.job_type }}</clr-dg-cell>
        <clr-dg-cell>{{ j.count || 0 }}</clr-dg-cell>
        <clr-dg-cell>
            <span class="container">
                <cds-icon
                    *ngIf="showWarning(j?.latency)"
                    size="20"
                    class="warning"
                    shape="exclamation-triangle"></cds-icon>
                <span class="ml-5px">{{ getDuration(j?.latency) || 0 }}</span>
            </span>
        </clr-dg-cell>
        <clr-dg-cell>{{ isPaused(j?.paused) | translate }}</clr-dg-cell>
    </clr-dg-row>
    <clr-dg-footer>
        <clr-dg-pagination
            #pagination
            [clrDgPageSize]="pageSize"
            [clrDgTotalItems]="jobQueue?.length">
            <clr-dg-page-size [clrPageSizeOptions]="[15, 25, 50]">{{
                'PAGINATION.PAGE_SIZE' | translate
            }}</clr-dg-page-size>
            <span *ngIf="jobQueue?.length">
                {{ pagination.firstItem + 1 }} -
                {{ pagination.lastItem + 1 }}
                {{ 'GROUP.OF' | translate }}
            </span>
            {{ jobQueue?.length }} {{ 'GROUP.ITEMS' | translate }}
        </clr-dg-pagination>
    </clr-dg-footer>
</clr-datagrid>
