<span
    *ngIf="onGettingUpdatedTimeStr || onGoing"
    class="mt-1 ml-1 spinner spinner-inline"></span>
<ng-container *ngIf="!(onGettingUpdatedTimeStr || onGoing)">
    <section class="form-block">
        <div *ngIf="updatedTimeStr" class="mt-1 display-flex">
            <label class="update-time">{{
                'CONFIG.SCANNING.DB_REFRESH_TIME' | translate
            }}</label>
            <span>{{ updatedTimeStr }} </span>
        </div>
        <div class="button-group">
            <cron-selection
                class="w-100"
                [disabled]="!hasDefaultScanner"
                [labelCurrent]="getLabelCurrent"
                [labelEdit]="getLabelCurrent"
                [originCron]="originCron"
                (inputvalue)="saveSchedule($event)"></cron-selection>
        </div>
    </section>
    <div class="clr-col-5">
        <div class="clr-row-3">
            <div class="btn-scan-right btn-scan margin-top-16px">
                <button
                    id="scan"
                    class="btn btn-primary btn-scan"
                    (click)="scanOrStop()"
                    [disabled]="onSubmitting || !hasDefaultScanner">
                    <span *ngIf="!isOnScanning()">{{
                        'CONFIG.SCANNING.SCAN_NOW' | translate
                    }}</span>
                    <span *ngIf="isOnScanning()">{{
                        'VULNERABILITY.STOP_NOW' | translate
                    }}</span>
                </button>
                <span
                    [hidden]="!isOnScanning()"
                    class="spinner spinner-inline margin-left-5 v-mid"></span>
            </div>
        </div>
        <div
            class="clr-row-2 pt-4"
            *ngIf="scanningMetrics && scanningMetrics.total">
            <div class="total" [style.width]="totalWidth + 'px'">
                <span class="float-left" *ngIf="isManual()">{{
                    'CONFIG.SCANNING.MANUAL' | translate
                }}</span>
                <span class="float-left" *ngIf="isSchedule()">{{
                    'CONFIG.SCANNING.SCHEDULED' | translate
                }}</span>
                <span>{{ 'SCANNER.TOTAL' | translate }}</span>
                <span class="margin-left-5">{{ scanningMetrics?.total }}</span>
            </div>
            <div
                class="container"
                id="scan-result-container"
                [style.width]="totalWidth + 'px'">
                <div class="error h-100" [style.width]="errorWidth()"></div>
                <div
                    class="finished h-100"
                    [style.width]="finishedWidth()"></div>
                <div
                    class="in-progress h-100"
                    [style.width]="runningWidth()"></div>
                <div class="abort h-100" [style.width]="abortWidth()"></div>
            </div>
            <div class="state-container" [style.width]="totalWidth + 'px'">
                <div
                    class="clr-row m-0"
                    *ngFor="let item of scanningMetrics?.metrics | keyvalue">
                    <div class="state">
                        <span
                            class="badge"
                            [ngClass]="{
                                error: isError(item?.key),
                                finished: isFinished(item?.key),
                                'in-progress': isInProgress(item?.key),
                                abort: isAborted(item?.key)
                            }"
                            >{{ item?.value }}</span
                        >
                    </div>
                    <div class="value">
                        {{ getI18nKey(item?.key) | translate }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</ng-container>
