<h5 class="history-header font-style mt-3" id="history-header">
    {{ 'CLEARANCES.PURGE_HISTORY' | translate }}
</h5>

<clr-datagrid
    [(clrDgSelected)]="selectedRow"
    [clrDgLoading]="loading"
    (clrDgRefresh)="getJobs(true, $event)">
    <clr-dg-action-bar class="action-bar">
        <div class="btn-group">
            <button
                id="stop-purge"
                type="button"
                class="btn btn-secondary"
                [disabled]="!canStop()"
                (click)="openStopExecutionsDialog()">
                {{ 'REPLICATION.STOPJOB' | translate }}
            </button>
        </div>
        <span class="refresh-btn" (click)="refresh()">
            <clr-icon shape="refresh"></clr-icon>
        </span>
    </clr-dg-action-bar>
    <clr-dg-column [clrDgField]="'id'">{{
        'REPLICATION.TASK_ID' | translate
    }}</clr-dg-column>
    <clr-dg-column>{{ 'GC.TRIGGER_TYPE' | translate }}</clr-dg-column>
    <clr-dg-column>{{ 'TAG_RETENTION.DRY_RUN' | translate }}</clr-dg-column>
    <clr-dg-column>{{ 'STATUS' | translate }}</clr-dg-column>
    <clr-dg-column>{{ 'CREATION_TIME' | translate }}</clr-dg-column>
    <clr-dg-column [clrDgSortBy]="'update_time'">{{
        'UPDATE_TIME' | translate
    }}</clr-dg-column>
    <clr-dg-column>{{ 'LOGS' | translate }}</clr-dg-column>
    <clr-dg-placeholder>{{
        'CLEARANCES.NO_PURGE_RECORDS' | translate
    }}</clr-dg-placeholder>
    <clr-dg-row *ngFor="let job of jobs" [clrDgItem]="job">
        <clr-dg-cell>{{ job.id }}</clr-dg-cell>
        <clr-dg-cell>{{
            (job.schedule?.type
                ? 'SCHEDULE.' + job.schedule?.type.toUpperCase()
                : ''
            ) | translate
        }}</clr-dg-cell>
        <clr-dg-cell>{{
            isDryRun(job?.job_parameters) | translate
        }}</clr-dg-cell>
        <clr-dg-cell>{{
            job.job_status.toUpperCase() | translate
        }}</clr-dg-cell>
        <clr-dg-cell>{{
            job.creation_time | harborDatetime : 'medium'
        }}</clr-dg-cell>
        <clr-dg-cell>{{
            job.update_time | harborDatetime : 'medium'
        }}</clr-dg-cell>
        <clr-dg-cell>
            <a
                rel="noopener noreferrer"
                target="_blank"
                [href]="getLogLink(job.id)">
                <clr-icon shape="list"></clr-icon>
            </a>
        </clr-dg-cell>
    </clr-dg-row>
    <clr-dg-footer>
        <clr-dg-pagination
            #pagination
            [clrDgPageSize]="pageSize"
            [(clrDgPage)]="page"
            [clrDgTotalItems]="total">
            <clr-dg-page-size [clrPageSizeOptions]="[5, 25, 50]">{{
                'PAGINATION.PAGE_SIZE' | translate
            }}</clr-dg-page-size>
            <span *ngIf="total"
                >{{ pagination.firstItem + 1 }} - {{ pagination.lastItem + 1 }}
                {{ 'DESTINATION.OF' | translate }}</span
            >
            {{ total }} {{ 'DESTINATION.ITEMS' | translate }}
        </clr-dg-pagination>
    </clr-dg-footer>
</clr-datagrid>
