<div [hidden]="!loadingGcStatus" class="clr-row mt-2 center">
    <span class="spinner spinner-md"></span>
</div>
<div [hidden]="loadingGcStatus">
    <div class="clr-row mt-1">
        <div class="clr-col-2 flex-200 font-style">
            {{ 'WEBHOOK.STATUS' | translate }}
        </div>
        <div class="clr-col">
            <div class="clr-row">
                <div class="p-06 mr-2">
                    <span class="mr-1 font-style">{{
                        'CLEARANCES.LAST_COMPLETED' | translate
                    }}</span>
                    <span class="mr-3">
                        <span
                            *ngIf="loadingLastCompletedTime"
                            class="spinner spinner-inline"></span>
                        <ng-container *ngIf="!loadingLastCompletedTime">
                            <span *ngIf="!lastCompletedTime">{{
                                'SCHEDULE.NONE' | translate
                            }}</span>
                            <span *ngIf="lastCompletedTime"
                                >{{ lastCompletedTime | harborDatetime
                                }}<span *ngIf="isDryRun"
                                    >({{
                                        'TAG_RETENTION.DRY_RUN' | translate
                                    }})</span
                                ></span
                            >
                        </ng-container>
                    </span>
                </div>
                <div class="p-06">
                    <span class="mr-1 font-style" *ngIf="nextScheduledTime">{{
                        'CLEARANCES.NEXT_SCHEDULED_TIME' | translate
                    }}</span>
                    <span *ngIf="nextScheduledTime">{{
                        nextScheduledTime | harborDatetime
                    }}</span>
                </div>
            </div>
        </div>
    </div>
    <div class="cron-selection">
        <cron-selection
            class="w-100"
            [labelCurrent]="getLabelCurrent"
            [labelEdit]="getLabelCurrent"
            [originCron]="originCron"
            (inputvalue)="saveGcSchedule($event)"></cron-selection>
    </div>
    <div class="clr-row mb-1">
        <div class="clr-col-2 flex-200 font-style">
            {{ 'JOB_SERVICE_DASHBOARD.WORKERS' | translate
            }}<clr-tooltip>
                <clr-icon
                    clrTooltipTrigger
                    shape="info-circle"
                    size="24"></clr-icon>
                <clr-tooltip-content
                    clrPosition="top-right"
                    clrSize="lg"
                    *clrIfOpen>
                    <span>{{ 'GC.WORKERS_TOOLTIP' | translate }}</span>
                </clr-tooltip-content>
            </clr-tooltip>
        </div>
        <div class="clr-col">
            <div class="clr-select-wrapper">
                <select
                    id="workers"
                    class="clr-select worker-select"
                    [(ngModel)]="workerNum">
                    <option
                        *ngFor="let item of workerOptions"
                        value="{{ item }}">
                        {{ item }}
                    </option>
                </select>
            </div>
        </div>
    </div>
    <div class="clr-row">
        <div class="clr-col-2 flex-200"></div>
        <div class="clr-col">
            <span class="explain">{{ 'GC.EXPLAIN' | translate }}</span>
        </div>
    </div>
    <div class="clr-row">
        <div class="clr-col-2 flex-200"></div>
        <div class="clr-col">
            <span class="explain">{{
                'GC.EXPLAIN_TIME_WINDOW' | translate
            }}</span>
        </div>
    </div>
    <div class="clr-row">
        <div class="clr-col-2 flex-200"></div>
        <div class="clr-col">
            <clr-toggle-container class="mt-05">
                <clr-toggle-wrapper>
                    <input
                        type="checkbox"
                        clrToggle
                        name="delete_untagged"
                        id="delete_untagged"
                        [(ngModel)]="shouldDeleteUntagged" />
                    <label class="font-weight-400" for="delete_untagged">{{
                        'GC.DELETE_UNTAGGED' | translate
                    }}</label>
                </clr-toggle-wrapper>
            </clr-toggle-container>
        </div>
    </div>
    <div class="clr-row">
        <div class="clr-col-2 flex-200">
            <button
                id="gc-now"
                class="btn btn-primary gc-start-btn"
                (click)="gcNow()"
                [disabled]="disableGC">
                {{ 'GC.GC_NOW' | translate }}
            </button>
        </div>
        <div class="clr-col">
            <button
                id="gc-dry-run"
                class="btn btn-outline gc-start-btn"
                (click)="dryRun()"
                [disabled]="dryRunOnGoing">
                {{ 'TAG_RETENTION.WHAT_IF_RUN' | translate }}
            </button>
        </div>
    </div>
    <gc-history></gc-history>
</div>
