<vdr-page-header>
    <vdr-page-title></vdr-page-title>
</vdr-page-header>
<vdr-page-body>
    <vdr-page-block>
        <vdr-action-bar>
            <vdr-ab-left>
                <clr-checkbox-wrapper class="mr-2">
                    <input type="checkbox" clrCheckbox [formControl]="liveUpdate" name="live-update" />
                    <label>{{ 'common.live-update' | translate }}</label>
                </clr-checkbox-wrapper>
            </vdr-ab-left>
            <vdr-ab-right>
                <vdr-action-bar-items locationId="job-list"></vdr-action-bar-items>
                <ng-select
                    class="mr-2"
                    [addTag]="false"
                    [hideSelected]="true"
                    [multiple]="false"
                    [markFirst]="false"
                    [clearable]="false"
                    [searchable]="false"
                    [formControl]="stateFilter"
                    (change)="refresh()"
                >
                    <ng-option [value]="''">
                        <vdr-chip>{{ 'system.job-state-all' | translate }}</vdr-chip>
                    </ng-option>
                    <ng-option [value]="'PENDING'">
                        <vdr-chip>{{ 'system.job-state-pending' | translate }}</vdr-chip>
                    </ng-option>
                    <ng-option [value]="'RUNNING'">
                        <vdr-chip colorType="warning">{{ 'system.job-state-running' | translate }}</vdr-chip>
                    </ng-option>
                    <ng-option [value]="'COMPLETED'">
                        <vdr-chip colorType="success">{{ 'system.job-state-completed' | translate }}</vdr-chip>
                    </ng-option>
                    <ng-option [value]="'FAILED'">
                        <vdr-chip colorType="error">{{ 'system.job-state-failed' | translate }}</vdr-chip>
                    </ng-option>
                    <ng-option [value]="'CANCELLED'">
                        <vdr-chip colorType="error">{{ 'system.job-state-cancelled' | translate }}</vdr-chip>
                    </ng-option>
                </ng-select>
                <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">
                            <vdr-chip>{{ 'system.all-job-queues' | translate }}</vdr-chip>
                        </ng-container>
                        <ng-template #others>
                            <vdr-chip [colorFrom]="item.name">{{ item.name }}</vdr-chip>
                        </ng-template>
                    </ng-template>
                </ng-select>
            </vdr-ab-right>
        </vdr-action-bar>
    </vdr-page-block>

    <vdr-data-table-2
        id="job-list"
        [items]="items$ | async"
        [itemsPerPage]="itemsPerPage$ | async"
        [totalItems]="totalItems$ | async"
        [currentPage]="currentPage$ | async"
        (pageChange)="setPageNumber($event)"
        (itemsPerPageChange)="setItemsPerPage($event)"
    >
        <vdr-dt2-column [heading]="'common.id' | translate" id="id">
            <ng-template let-job="item">
                {{ job.id }}
            </ng-template>
        </vdr-dt2-column>
        <vdr-dt2-column [heading]="'common.created-at' | translate" id="created-at">
            <ng-template let-job="item">
                {{ job.createdAt | timeAgo }}
            </ng-template>
        </vdr-dt2-column>
        <vdr-dt2-column [heading]="'system.job-queue-name' | translate" id="job-queue-name" [optional]="false">
            <ng-template let-job="item">
                <vdr-chip [colorFrom]="job.queueName">{{ job.queueName }}</vdr-chip>
            </ng-template>
        </vdr-dt2-column>
        <vdr-dt2-column [heading]="'system.job-data' | translate" id="job-data" [optional]="false">
            <ng-template let-job="item">
                <vdr-dropdown *ngIf="job.data">
                    <button
                        class="button-small"
                        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>
            </ng-template>
        </vdr-dt2-column>
        <vdr-dt2-column [heading]="'system.job-state' | translate" id="job-state">
            <ng-template let-job="item">
                <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 }} of {{ job.retries + 1 }}
                </div>
            </ng-template>
        </vdr-dt2-column>
        <vdr-dt2-column [heading]="'system.job-duration' | translate" id="job-duration">
            <ng-template let-job="item">
                {{ job.duration | duration }}
            </ng-template>
        </vdr-dt2-column>
        <vdr-dt2-column [heading]="'system.job-result' | translate" id="job-result">
            <ng-template let-job="item">
                <vdr-dropdown *ngIf="hasResult(job)">
                    <button class="button-small mr-1" 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="button-small" 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>
                <vdr-dropdown *ngIf="!job.isSettled && job.state !== 'FAILED'">
                    <button class="icon-button" vdrDropdownTrigger>
                        <clr-icon shape="ellipsis-vertical" size="12"></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>
            </ng-template>
        </vdr-dt2-column>
    </vdr-data-table-2>
</vdr-page-body>
