<h2>
    {{ securitySummary?.total_artifact || 0 }}
    {{ 'SECURITY_HUB.ARTIFACTS' | translate }},
    {{ securitySummary?.scanned_cnt || 0 }}
    {{ 'SECURITY_HUB.SCANNED' | translate }},
    {{ securitySummary?.total_artifact - securitySummary?.scanned_cnt }}
    {{ 'SECURITY_HUB.NOT_SCANNED' | translate }}
    <clr-tooltip class="page-title-tooltip">
        <clr-icon clrTooltipTrigger shape="info-circle" size="24"></clr-icon>
        <clr-tooltip-content clrPosition="top-right" clrSize="lg" *clrIfOpen>
            <span>{{ 'SECURITY_HUB.PAGE_TITLE_TOOLTIP' | translate }}</span>
        </clr-tooltip-content>
    </clr-tooltip>
</h2>
<div class="container">
    <div class="card">
        <div class="card-header text-truncate">
            {{ 'SECURITY_HUB.TOTAL_VUL' | translate }}
        </div>
        <div class="card-block">
            <div class="clr-row">
                <div class="clr-col center">
                    <label class="card-header text-truncate sub-header-title">
                        {{
                            'SECURITY_HUB.TOTAL_AND_FIXABLE'
                                | translate
                                    : {
                                          totalNum:
                                              securitySummary?.total_vuls || 0,
                                          fixableNum:
                                              securitySummary?.fixable_cnt || 0
                                      }
                        }}
                    </label>
                </div>
            </div>
            <div class="clr-row severity-item">
                <div class="clr-col-3 center">
                    <label class="text-truncate"
                        >{{ 'VULNERABILITY.SEVERITY.CRITICAL' | translate }}
                    </label>
                </div>
                <div class="clr-col-9">
                    {{ securitySummary?.critical_cnt || 0 }}
                </div>
            </div>
            <div class="clr-row severity-item">
                <div class="clr-col-3">
                    <label class="text-truncate">{{
                        'VULNERABILITY.SEVERITY.HIGH' | translate
                    }}</label>
                </div>
                <div class="clr-col-9">
                    {{ securitySummary?.high_cnt || 0 }}
                </div>
            </div>
            <div class="clr-row severity-item">
                <div class="clr-col-3">
                    <label class="text-truncate">{{
                        'VULNERABILITY.SEVERITY.MEDIUM' | translate
                    }}</label>
                </div>
                <div class="clr-col-9">
                    {{ securitySummary?.medium_cnt || 0 }}
                </div>
            </div>
            <div class="clr-row severity-item">
                <div class="clr-col-3">
                    <label class="text-truncate">{{
                        'VULNERABILITY.SEVERITY.LOW' | translate
                    }}</label>
                </div>
                <div class="clr-col-9">
                    {{ securitySummary?.low_cnt || 0 }}
                </div>
            </div>
            <div class="clr-row severity-item">
                <div class="clr-col-3">
                    <label class="text-truncate">{{
                        'UNKNOWN' | translate
                    }}</label>
                </div>
                <div class="clr-col-9">
                    {{ securitySummary?.unknown_cnt || 0 }}
                </div>
            </div>
            <div class="clr-row severity-item">
                <div class="clr-col-3">
                    <label class="text-truncate">{{
                        'VULNERABILITY.SEVERITY.NONE' | translate
                    }}</label>
                </div>
                <div class="clr-col-9">
                    {{ securitySummary?.none_cnt || 0 }}
                </div>
            </div>
            <div class="clr-row" [hidden]="!securitySummary?.total_vuls">
                <div class="placeholder">
                    <div #pieChart class="pie-chart" id="pie-chart"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header pb-0">
            <div class="mb-1">
                {{ 'SECURITY_HUB.TOP_5_ARTIFACT' | translate }}
            </div>
            <div class="clr-row">
                <div class="clr-col column">
                    {{ 'SECURITY_HUB.REPO_NAME' | translate }}
                </div>
                <div class="clr-col column">
                    {{ 'P2P_PROVIDER.DIGEST' | translate }}
                </div>
                <div class="clr-col column">
                    {{ 'VULNERABILITY.PLURAL' | translate }}
                </div>
            </div>
        </div>
        <div class="card-block pt-1">
            <ng-container *ngIf="securitySummary?.dangerous_artifacts?.length"
                ><div
                    class="clr-row row"
                    *ngFor="let item of securitySummary?.dangerous_artifacts">
                    <div class="clr-col">
                        <a
                            class="search"
                            href="javascript:void(0)"
                            appScrollAnchor="{{ vulId }}"
                            (click)="searchRepoClick(item)"
                            title="{{ item.repository_name }}">
                            <span class="ellipsis">
                                <clr-icon shape="search"></clr-icon
                                >{{ item.repository_name }}
                            </span>
                        </a>
                    </div>
                    <div class="clr-col" title="{{ item?.digest }}">
                        <a
                            href="javascript:void(0)"
                            [routerLink]="
                                getDigestLink(
                                    item?.project_id,
                                    item?.repository_name,
                                    item.digest
                                )
                            "
                            ><span class="ellipsis">{{
                                item?.digest?.slice(0, 15)
                            }}</span>
                        </a>
                    </div>
                    <div class="clr-col">
                        <div class="single-bar-container">
                            <app-single-bar
                                [dangerousArtifact]="item"></app-single-bar>
                        </div>
                    </div></div
            ></ng-container>
            <div
                class="datagrid-placeholder"
                *ngIf="
                    !loadingSummary &&
                    !securitySummary?.dangerous_artifacts?.length
                ">
                <div class="datagrid-placeholder-image"></div>
                <span class="datagrid-placeholder-content">{{
                    'SECURITY_HUB.NO_VUL' | translate
                }}</span>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header pb-0">
            <div class="mb-1">{{ 'SECURITY_HUB.TOP_5_CVE' | translate }}</div>
            <div class="clr-row">
                <div class="clr-col-4 column">
                    {{ 'SECURITY_HUB.CVE_ID' | translate }}
                </div>
                <div class="clr-col-2 column">
                    {{ 'VULNERABILITY.GRID.COLUMN_SEVERITY' | translate }}
                </div>
                <div class="clr-col-2 column">
                    {{ 'VULNERABILITY.GRID.CVSS3' | translate }}
                </div>
                <div class="clr-col-4 column">
                    {{ 'VULNERABILITY.GRID.COLUMN_PACKAGE' | translate }}
                </div>
            </div>
        </div>
        <div class="card-block pt-1">
            <ng-container *ngIf="securitySummary?.dangerous_cves?.length"
                ><div
                    class="clr-row row"
                    *ngFor="let item of securitySummary?.dangerous_cves">
                    <div class="clr-col-4">
                        <a
                            class="search"
                            href="javascript:void(0)"
                            appScrollAnchor="{{ vulId }}"
                            (click)="searchCVEClick(item?.cve_id)"
                            title="{{ item.cve_id }}">
                            <span class="ellipsis">
                                <clr-icon shape="search"></clr-icon
                                >{{ item.cve_id }}
                            </span>
                        </a>
                    </div>
                    <div class="clr-col-2">
                        <ng-container [ngSwitch]="item.severity">
                            <span
                                *ngSwitchCase="'Critical'"
                                class="label label-critical no-border"
                                >{{
                                    severityText(item.severity) | translate
                                }}</span
                            >
                            <span
                                *ngSwitchCase="'High'"
                                class="label label-danger no-border"
                                >{{
                                    severityText(item.severity) | translate
                                }}</span
                            >
                            <span
                                *ngSwitchCase="'Medium'"
                                class="label label-medium no-border"
                                >{{
                                    severityText(item.severity) | translate
                                }}</span
                            >
                            <span
                                *ngSwitchCase="'Low'"
                                class="label label-low no-border"
                                >{{
                                    severityText(item.severity) | translate
                                }}</span
                            >
                            <span
                                *ngSwitchCase="'None'"
                                class="label label-none no-border"
                                >{{
                                    severityText(item.severity) | translate
                                }}</span
                            >
                            <span *ngSwitchDefault>{{
                                severityText(item.severity) | translate
                            }}</span>
                        </ng-container>
                    </div>
                    <div class="clr-col-2">
                        {{ item?.cvss_score_v3 }}
                    </div>
                    <div class="clr-col-4 ellipsis">
                        <span
                            *ngIf="item?.version"
                            title="{{ item?.package + '@' + item?.version }}">
                            {{ item?.package + '@' + item?.version }}
                        </span>
                        <span
                            *ngIf="!item?.version"
                            title="{{ item?.package }}">
                            {{ item?.package }}
                        </span>
                    </div>
                </div></ng-container
            >
            <div
                class="datagrid-placeholder"
                *ngIf="
                    !loadingSummary && !securitySummary?.dangerous_cves?.length
                ">
                <div class="datagrid-placeholder-image"></div>
                <span class="datagrid-placeholder-content">{{
                    'SECURITY_HUB.NO_VUL' | translate
                }}</span>
            </div>
        </div>
    </div>
</div>
