<vdr-action-bar>
    <vdr-ab-left>
        <clr-checkbox-container>
            <clr-checkbox-wrapper>
                <input type="checkbox" clrCheckbox [formControl]="liveUpdate" name="live-update"/>
                <label>{{ 'common.live-update' | translate }}</label>
            </clr-checkbox-wrapper>
            <clr-checkbox-wrapper>
                <input
                    type="checkbox"
                    clrCheckbox
                    [formControl]="hideSettled"
                    name="hide-settled"
                    (change)="refresh()"
                />
                <label>{{ 'system.hide-settled-jobs' | translate }}</label>
            </clr-checkbox-wrapper>
        </clr-checkbox-container>
    </vdr-ab-left>
    <vdr-ab-right>
        <ng-select
            [addTag]="false"
            [items]="queues$ | async"
            [hideSelected]="true"
            [multiple]="false"
            [markFirst]="false"
            [clearable]="false"
            [searchable]="false"
            bindValue="name"
            [formControl]="queueFilter"
            (change)="refresh()"
        >
            <ng-template ng-label-tmp ng-option-tmp let-item="item">
                <ng-container *ngIf="item.name === 'all'; else others">
                    {{ 'system.all-job-queues' | translate }}
                </ng-container>
                <ng-template #others>
                    <vdr-chip [colorFrom]="item.name">{{ item.name }}</vdr-chip>
                </ng-template>
            </ng-template>
        </ng-select>
        <vdr-action-bar-items locationId="job-list"></vdr-action-bar-items>
    </vdr-ab-right>
</vdr-action-bar>

<vdr-data-table
    [items]="items$ | async"
    [itemsPerPage]="itemsPerPage$ | async"
    [totalItems]="totalItems$ | async"
    [currentPage]="currentPage$ | async"
    (pageChange)="setPageNumber($event)"
    (itemsPerPageChange)="setItemsPerPage($event)"
>
    <vdr-dt-column></vdr-dt-column>
    <vdr-dt-column>{{ 'system.job-queue-name' | translate }}</vdr-dt-column>
    <vdr-dt-column>{{ 'common.created-at' | translate }}</vdr-dt-column>
    <vdr-dt-column>{{ 'system.job-state' | translate }}</vdr-dt-column>
    <vdr-dt-column>{{ 'system.job-duration' | translate }}</vdr-dt-column>
    <vdr-dt-column>{{ 'system.job-result' | translate }}</vdr-dt-column>
    <vdr-dt-column></vdr-dt-column>
    <ng-template let-job="item">
        <td class="left align-middle">
            <vdr-entity-info [entity]="job"></vdr-entity-info>
        </td>
        <td class="left align-middle">
            <vdr-dropdown *ngIf="job.data">
                <button
                    class="btn btn-link btn-icon"
                    vdrDropdownTrigger
                    [title]="'system.job-data' | translate"
                >
                    <clr-icon shape="details"></clr-icon>
                </button>
                <vdr-dropdown-menu>
                    <div class="result-detail">
                        <vdr-object-tree [value]="job.data"></vdr-object-tree>
                    </div>
                </vdr-dropdown-menu>
            </vdr-dropdown>
            <vdr-chip [colorFrom]="job.queueName">{{ job.queueName }}</vdr-chip>
        </td>

        <td class="left align-middle">{{ job.createdAt | timeAgo }}</td>
        <td class="left align-middle">
            <vdr-job-state-label [job]="job"></vdr-job-state-label>
            <div *ngIf="job.state === 'FAILED'" class="retry-info">
                after {{ job.attempts }} attempts
            </div>
            <div *ngIf="job.state === 'RUNNING' || job.state === 'RETRYING'"  class="retry-info">
                attempting {{ job.attempts + 1 }} of {{ job.retries }}
            </div>
        </td>
        <td class="left align-middle">{{ job.duration | duration }}</td>
        <td class="left align-middle">
            <vdr-dropdown *ngIf="hasResult(job)">
                <button class="btn btn-link btn-sm details-button" vdrDropdownTrigger>
                    <clr-icon shape="details"></clr-icon>
                    {{ 'system.job-result' | translate }}
                </button>
                <vdr-dropdown-menu>
                    <div class="result-detail">
                        <vdr-object-tree [value]="job.result"></vdr-object-tree>
                    </div>
                </vdr-dropdown-menu>
            </vdr-dropdown>
            <vdr-dropdown *ngIf="job.error">
                <button class="btn btn-link btn-sm details-button" vdrDropdownTrigger>
                    <clr-icon shape="exclamation-circle"></clr-icon>
                    {{ 'system.job-error' | translate }}
                </button>
                <vdr-dropdown-menu>
                    <div class="result-detail">
                        {{ job.error }}
                    </div>
                </vdr-dropdown-menu>
            </vdr-dropdown>
        </td>
        <td class="right align-middle">
            <vdr-dropdown *ngIf="!job.isSettled && job.state !== 'FAILED'">
                <button class="icon-button" vdrDropdownTrigger>
                    <clr-icon shape="ellipsis-vertical"></clr-icon>
                </button>
                <vdr-dropdown-menu vdrPosition="bottom-right">
                    <button
                        type="button"
                        class="delete-button"
                        (click)="cancelJob(job.id)"
                        [disabled]="!(['DeleteSettings', 'DeleteSystem'] | hasPermission)"
                        vdrDropdownItem
                    >
                        <clr-icon shape="ban" class="is-danger"></clr-icon>
                        {{ 'common.cancel' | translate }}
                    </button>
                </vdr-dropdown-menu>
            </vdr-dropdown>
        </td>
    </ng-template>
</vdr-data-table>
