<app-vulnerability-summary
    (searchCVE)="searchCVE($event)"
    (searchRepo)="searchRepo($event)"></app-vulnerability-summary>
<h1 appScrollSection="{{ vulId }}">{{ 'SECURITY_HUB.VUL' | translate }}</h1>

<clr-datagrid
    [clrDgLoading]="loading"
    (clrDgRefresh)="clrDgRefresh($event, options)">
    <clr-dg-action-bar class="action-bar">
        <app-vulnerability-filter
            [loading]="loading"
            (search)="search($event)"></app-vulnerability-filter>
        <span class="refresh-btn" (click)="refresh()">
            <clr-icon shape="refresh"></clr-icon>
        </span>
    </clr-dg-action-bar>
    <clr-dg-column class="min-width">{{
        'SECURITY_HUB.CVE_ID' | translate
    }}</clr-dg-column>
    <clr-dg-column class="min-width">{{
        'SECURITY_HUB.REPO_NAME' | translate
    }}</clr-dg-column>
    <clr-dg-column class="min-width">{{
        'P2P_PROVIDER.DIGEST' | translate
    }}</clr-dg-column>
    <clr-dg-column>{{ 'AUDIT_LOG.TAGS' | translate }}</clr-dg-column>
    <clr-dg-column>{{ 'VULNERABILITY.GRID.CVSS3' | translate }}</clr-dg-column>
    <clr-dg-column>{{
        'VULNERABILITY.GRID.COLUMN_SEVERITY' | translate
    }}</clr-dg-column>
    <clr-dg-column class="min-width">{{
        'VULNERABILITY.GRID.COLUMN_PACKAGE' | translate
    }}</clr-dg-column>
    <clr-dg-column>{{
        'VULNERABILITY.GRID.COLUMN_VERSION' | translate
    }}</clr-dg-column>
    <clr-dg-column>{{
        'VULNERABILITY.GRID.COLUMN_FIXED' | translate
    }}</clr-dg-column>
    <clr-dg-placeholder
        >{{ 'SECURITY_HUB.NO_VUL' | translate }}
    </clr-dg-placeholder>
    <clr-dg-row *ngFor="let c of vul" [clrDgItem]="c">
        <clr-dg-cell class="min-width">
            <span
                *ngIf="
                    !c?.links ||
                    c?.links?.length === 0 ||
                    (c?.links?.length === 1 && !c?.links[0])
                "
                >{{ c.cve_id }}</span
            >
            <a
                rel="noopener noreferrer"
                *ngIf="c?.links && c?.links.length === 1 && c?.links[0]"
                href="{{ c?.links[0] }}"
                target="_blank"
                >{{ c.cve_id }}</a
            >
            <span *ngIf="c?.links && c?.links.length > 1">
                {{ c.cve_id }}
                <clr-signpost>
                    <clr-signpost-content *clrIfOpen>
                        <div class="mt-5px" *ngFor="let link of c?.links">
                            <a
                                rel="noopener noreferrer"
                                href="{{ link }}"
                                target="_blank"
                                >{{ link }}</a
                            >
                        </div>
                    </clr-signpost-content>
                </clr-signpost>
            </span>
        </clr-dg-cell>
        <clr-dg-cell class="ellipsis min-width" title="{{ c.repository_name }}">
            <a
                href="javascript:void(0)"
                [routerLink]="getRepoLink(c.project_id, c.repository_name)"
                >{{ c.repository_name }}</a
            >
        </clr-dg-cell>
        <clr-dg-cell class="ellipsis min-width" title="{{ c?.digest }}">
            <a
                href="javascript:void(0)"
                [routerLink]="
                    getDigestLink(c.project_id, c.repository_name, c.digest)
                "
                >{{ c?.digest?.slice(0, 15) }}</a
            >
        </clr-dg-cell>
        <clr-dg-cell class="ellipsis" title="{{ c.tags?.join(', ') }}">{{
            c.tags?.join(', ')
        }}</clr-dg-cell>
        <clr-dg-cell>{{ c.cvss_v3_score }}</clr-dg-cell>
        <clr-dg-cell [ngSwitch]="c.severity">
            <span
                *ngSwitchCase="'Critical'"
                class="label label-critical no-border"
                >{{ severityText(c.severity) | translate }}</span
            >
            <span *ngSwitchCase="'High'" class="label label-danger no-border">{{
                severityText(c.severity) | translate
            }}</span>
            <span
                *ngSwitchCase="'Medium'"
                class="label label-medium no-border"
                >{{ severityText(c.severity) | translate }}</span
            >
            <span *ngSwitchCase="'Low'" class="label label-low no-border">{{
                severityText(c.severity) | translate
            }}</span>
            <span *ngSwitchCase="'None'" class="label label-none no-border">{{
                severityText(c.severity) | translate
            }}</span>
            <span *ngSwitchDefault>{{
                severityText(c.severity) | translate
            }}</span>
        </clr-dg-cell>
        <clr-dg-cell class="ellipsis" title="{{ c.package }}">{{
            c.package
        }}</clr-dg-cell>
        <clr-dg-cell class="ellipsis" title="{{ c.version }}">{{
            c.version
        }}</clr-dg-cell>
        <clr-dg-cell class="ellipsis" title="{{ c.fixed_version }}">{{
            c.fixed_version
        }}</clr-dg-cell>
        <clr-dg-row-detail *clrIfExpanded>
            {{ 'VULNERABILITY.GRID.COLUMN_DESCRIPTION' | translate }}:
            {{ c.desc }}
        </clr-dg-row-detail>
    </clr-dg-row>
    <clr-dg-footer>
        <span class="mr-1"
            >{{ total === -1 ? '1000+' : total }}
            {{ 'SECURITY_HUB.CVE' | translate }}</span
        >
        <clr-dg-pagination
            #pagination
            [clrDgTotalItems]="total === -1 ? maxNum : total"
            [clrDgPageSize]="pageSize"
            [(clrDgPage)]="currentPage">
            <clr-dg-page-size [clrPageSizeOptions]="[10, 25, 50]">{{
                'PAGINATION.PAGE_SIZE' | translate
            }}</clr-dg-page-size>
        </clr-dg-pagination>
    </clr-dg-footer>
</clr-datagrid>
