<div class="row result-row">
    <div>
        <div class="row flex-items-xs-right rightPos">
            <div class="flex-xs-middle option-right">
                <span class="refresh-btn" (click)="refresh()"
                    ><clr-icon shape="refresh"></clr-icon
                ></span>
            </div>
        </div>
    </div>
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <clr-datagrid [clrDgLoading]="loading" (clrDgRefresh)="load($event)">
            <clr-dg-action-bar>
                <div class="clr-row center">
                    <div class="ml-05">
                        <button
                            id="scan-btn"
                            (click)="scanOrStop()"
                            type="button"
                            class="btn btn-secondary"
                            [clrLoading]="scanBtnState"
                            [disabled]="!canScan()">
                            <clr-icon
                                shape="shield-check"
                                size="16"
                                *ngIf="!isRunningState()"></clr-icon
                            >&nbsp;
                            <clr-icon
                                shape="stop"
                                size="16"
                                *ngIf="isRunningState()"></clr-icon
                            >&nbsp;
                            <span *ngIf="!isRunningState()">{{
                                'VULNERABILITY.SCAN_NOW' | translate
                            }}</span>
                            <span *ngIf="isRunningState()">{{
                                'VULNERABILITY.STOP_NOW' | translate
                            }}</span>
                        </button>
                    </div>
                    <div class="ml-1">
                        <div [hidden]="!shouldShowBar()">
                            <hbr-vulnerability-bar
                                (submitStopFinish)="submitStopFinish($event)"
                                [summary]="
                                    handleScanOverview(artifact?.scan_overview)
                                "
                                [inputScanner]="scanner"
                                (submitFinish)="submitFinish($event)"
                                [projectName]="projectName"
                                [repoName]="repoName"
                                [artifactDigest]="digest">
                            </hbr-vulnerability-bar>
                        </div>
                    </div>
                </div>
            </clr-dg-action-bar>
            <clr-dg-column [clrDgField]="'id'">{{
                'VULNERABILITY.GRID.COLUMN_ID' | translate
            }}</clr-dg-column>
            <clr-dg-column [clrDgSortBy]="severitySort">{{
                'VULNERABILITY.GRID.COLUMN_SEVERITY' | translate
            }}</clr-dg-column>
            <clr-dg-column [clrDgSortBy]="cvssSort">{{
                'VULNERABILITY.GRID.CVSS3' | translate
            }}</clr-dg-column>
            <clr-dg-column [clrDgField]="'package'">{{
                'VULNERABILITY.GRID.COLUMN_PACKAGE' | translate
            }}</clr-dg-column>
            <clr-dg-column [clrDgField]="'version'">{{
                'VULNERABILITY.GRID.COLUMN_VERSION' | translate
            }}</clr-dg-column>
            <clr-dg-column [clrDgField]="'fix_version'">{{
                'VULNERABILITY.GRID.COLUMN_FIXED' | translate
            }}</clr-dg-column>
            <clr-dg-column>{{
                'VULNERABILITY.GRID.IN_ALLOW_LIST' | translate
            }}</clr-dg-column>
            <clr-dg-placeholder>
                <span *ngIf="hasScanned(); else elseBlock">{{
                    'VULNERABILITY.STATE.OTHER_STATUS' | translate
                }}</span>
                <ng-template #elseBlock>
                    {{ 'VULNERABILITY.CHART.TOOLTIPS_TITLE_ZERO' | translate }}
                </ng-template>
            </clr-dg-placeholder>
            <clr-dg-row *clrDgItems="let res of scanningResults">
                <clr-dg-cell>
                    <span *ngIf="!res.links || res.links.length === 0">{{
                        res.id
                    }}</span>
                    <a
                        rel="noopener noreferrer"
                        *ngIf="res.links && res.links.length === 1"
                        href="{{ res.links[0] }}"
                        target="_blank"
                        >{{ res.id }}</a
                    >
                    <span *ngIf="res.links && res.links.length > 1">
                        {{ res.id }}
                        <clr-signpost>
                            <clr-signpost-content *clrIfOpen>
                                <div
                                    class="mt-5px"
                                    *ngFor="let link of res.links">
                                    <a
                                        rel="noopener noreferrer"
                                        href="{{ link }}"
                                        target="_blank"
                                        >{{ link }}</a
                                    >
                                </div>
                            </clr-signpost-content>
                        </clr-signpost>
                    </span>
                </clr-dg-cell>
                <clr-dg-cell [ngSwitch]="res.severity">
                    <span
                        *ngSwitchCase="'Critical'"
                        class="label label-critical no-border"
                        >{{ severityText(res.severity) | translate }}</span
                    >
                    <span
                        *ngSwitchCase="'High'"
                        class="label label-danger no-border"
                        >{{ severityText(res.severity) | translate }}</span
                    >
                    <span
                        *ngSwitchCase="'Medium'"
                        class="label label-medium no-border"
                        >{{ severityText(res.severity) | translate }}</span
                    >
                    <span
                        *ngSwitchCase="'Low'"
                        class="label label-low no-border"
                        >{{ severityText(res.severity) | translate }}</span
                    >
                    <span
                        *ngSwitchCase="'None'"
                        class="label label-none no-border"
                        >{{ severityText(res.severity) | translate }}</span
                    >
                    <span *ngSwitchDefault>{{
                        severityText(res.severity) | translate
                    }}</span>
                </clr-dg-cell>
                <clr-dg-cell>
                    <div
                        class="clr-row mr-1"
                        *ngFor="
                            let item of res?.vendor_attributes?.CVSS | keyvalue
                        ">
                        <div class="clr-col">{{ item?.key }}:</div>
                        <div class="clr-col">{{ item?.value?.V3Score }}</div>
                    </div>
                </clr-dg-cell>
                <clr-dg-cell>{{ res.package }}</clr-dg-cell>
                <clr-dg-cell>{{ res.version }}</clr-dg-cell>
                <clr-dg-cell>
                    <div *ngIf="res.fix_version; else elseBlock">
                        <clr-icon
                            shape="wrench"
                            class="is-success"
                            size="20"></clr-icon
                        >&nbsp;<span class="font-color-green">{{
                            res.fix_version
                        }}</span>
                    </div>
                    <ng-template #elseBlock>{{ res.fix_version }}</ng-template>
                </clr-dg-cell>
                <clr-dg-cell>
                    {{
                        (isInAllowList(res.id)
                            ? 'TAG_RETENTION.YES'
                            : 'TAG_RETENTION.NO'
                        ) | translate
                    }}
                </clr-dg-cell>
                <clr-dg-row-detail *clrIfExpanded>
                    {{ 'VULNERABILITY.GRID.COLUMN_DESCRIPTION' | translate }}:
                    {{ res.description }}
                </clr-dg-row-detail>
            </clr-dg-row>

            <clr-dg-footer>
                <div class="report">
                    <i *ngIf="scanner">{{
                        'VULNERABILITY.REPORTED_BY'
                            | translate : { scanner: getScannerInfo(scanner) }
                    }}</i>
                </div>
                <clr-dg-pagination
                    #pagination
                    [clrDgPageSize]="pageSize"
                    [clrDgTotalItems]="scanningResults?.length">
                    <clr-dg-page-size [clrPageSizeOptions]="[15, 25, 50]">{{
                        'PAGINATION.PAGE_SIZE' | translate
                    }}</clr-dg-page-size>
                    <span *ngIf="scanningResults?.length"
                        >{{ pagination.firstItem + 1 }} -
                        {{ pagination.lastItem + 1 }}
                        {{ 'VULNERABILITY.GRID.FOOT_OF' | translate }}</span
                    >
                    {{ scanningResults?.length }}
                    {{ 'VULNERABILITY.GRID.FOOT_ITEMS' | translate }}
                </clr-dg-pagination>
            </clr-dg-footer>
        </clr-datagrid>
    </div>
</div>
