@if (onGettingUpdatedTimeStr || onGoing) {
<span class="mt-1 ml-1 spinner spinner-inline"></span>
} @if (!(onGettingUpdatedTimeStr || onGoing)) {
<section class="form-block">
    @if (updatedTimeStr) {
    <div 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">
                @if (!isOnScanning()) {
                <span>{{ 'CONFIG.SCANNING.SCAN_NOW' | translate }}</span>
                } @if (isOnScanning()) {
                <span>{{ 'VULNERABILITY.STOP_NOW' | translate }}</span>
                }
            </button>
            <span
                [hidden]="!isOnScanning()"
                class="spinner spinner-inline margin-left-5 v-mid"></span>
        </div>
    </div>
    @if (scanningMetrics && scanningMetrics.total) {
    <div class="clr-row-2 pt-4">
        <div class="total" [style.width]="totalWidth + 'px'">
            @if (isManual()) {
            <span class="float-left">{{
                'CONFIG.SCANNING.MANUAL' | translate
            }}</span>
            } @if (isSchedule()) {
            <span class="float-left">{{
                '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'">
            @for (item of scanningMetrics?.metrics | keyvalue; track item) {
            <div class="clr-row m-0">
                <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>
}