<confirmation-dialog
    class="hidden-tag"
    #confirmationDialog
    (confirmAction)="confirmDeletion($event)">
</confirmation-dialog>
<app-copy-artifact></app-copy-artifact>
<app-copy-digest></app-copy-digest>
<div class="row tag-row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <clr-datagrid
            #datagrid
            [clrDgLoading]="loading"
            (clrDgRefresh)="clrDgRefresh($event)"
            [(clrDgSelected)]="selectedRow">
            <clr-dg-action-bar class="action-bar">
                <div>
                    <button
                        id="scan-btn"
                        [clrLoading]="scanBtnState"
                        type="button"
                        class="btn btn-secondary scan-btn"
                        [disabled]="
                            !(
                                canScanNow() &&
                                selectedRowHasVul() &&
                                hasEnabledScanner &&
                                hasScannerSupportVulnerability &&
                                hasScanImagePermission
                            )
                        "
                        (click)="scanNow()">
                        <clr-icon shape="shield-check" size="16"></clr-icon
                        >&nbsp;
                        <span>{{ 'VULNERABILITY.SCAN_NOW' | translate }}</span>
                    </button>
                    <button
                        id="generate-sbom-btn"
                        [clrLoading]="generateSbomBtnState"
                        type="button"
                        class="btn btn-secondary"
                        [disabled]="
                            !(
                                canGenerateSbomNow() &&
                                selectedRowHasSbom() &&
                                hasEnabledScanner &&
                                hasSbomPermission &&
                                hasScannerSupportSBOM
                            )
                        "
                        (click)="generateSbom()">
                        <clr-icon shape="sbom" size="16"></clr-icon>&nbsp;
                        <span>{{ 'SBOM.GENERATE' | translate }}</span>
                    </button>

                    <clr-dropdown class="btn btn-link" *ngIf="!depth">
                        <span
                            clrDropdownTrigger
                            id="artifact-list-action"
                            class="btn pl-0">
                            {{ 'BUTTON.ACTIONS' | translate }}
                            <clr-icon shape="caret down"></clr-icon>
                        </span>
                        <clr-dropdown-menu
                            class="action-dropdown"
                            clrPosition="bottom-left"
                            *clrIfOpen>
                            <button
                                clrDropdownItem
                                id="stop-scan"
                                [clrLoading]="stopBtnState"
                                type="button"
                                class="btn btn-secondary scan-btn action-dropdown-item"
                                [disabled]="
                                    !(canStopScan() && hasScanImagePermission)
                                "
                                (click)="stopNow()">
                                <span>{{
                                    'VULNERABILITY.STOP_NOW' | translate
                                }}</span>
                            </button>
                            <button
                                clrDropdownItem
                                id="stop-sbom-btn"
                                [clrLoading]="stopBtnState"
                                type="button"
                                class="btn btn-secondary scan-btn action-dropdown-item"
                                [disabled]="
                                    !(
                                        canStopSbom() &&
                                        hasSbomPermission &&
                                        hasEnabledScanner
                                    )
                                "
                                (click)="stopSbom()">
                                <span>{{ 'SBOM.STOP' | translate }}</span>
                            </button>
                            <div
                                class="dropdown-divider"
                                role="separator"
                                aria-hidden="true"></div>
                            <div
                                id="artifact-list-copy-digest"
                                class="action-dropdown-item no-border"
                                aria-label="copy digest"
                                clrDropdownItem
                                [clrDisabled]="
                                    !(selectedRow.length === 1 && !depth)
                                "
                                (click)="showDigestId()">
                                {{ 'REPOSITORY.COPY_DIGEST_ID' | translate }}
                            </div>
                            <div
                                class="dropdown-divider"
                                role="separator"
                                aria-hidden="true"></div>
                            <clr-dropdown>
                                <button
                                    id="artifact-list-add-labels"
                                    class="action-dropdown-item"
                                    clrDropdownTrigger
                                    [disabled]="
                                        !canAddLabel() ||
                                        !hasAddLabelImagePermission ||
                                        depth ||
                                        inprogress
                                    ">
                                    {{ 'REPOSITORY.ADD_LABELS' | translate }}
                                </button>
                                <div
                                    class="dropdown-divider"
                                    role="separator"
                                    aria-hidden="true"></div>
                                <clr-dropdown-menu
                                    [hidden]="!selectedRow.length">
                                    <div class="filter-grid">
                                        <label class="dropdown-header">{{
                                            'REPOSITORY.ADD_LABEL_TO_IMAGE'
                                                | translate
                                        }}</label>
                                        <app-label-selector
                                            [usedInDropdown]="true"
                                            [dropdownOpened]="true"
                                            [width]="200"
                                            [ownedLabels]="
                                                selectedRow[0]?.labels
                                            "
                                            (clickLabel)="stickLabel($event)"
                                            [projectId]="projectId"
                                            [scope]="'p'"></app-label-selector>
                                    </div>
                                </clr-dropdown-menu>
                            </clr-dropdown>
                            <div
                                id="artifact-list-copy"
                                class="action-dropdown-item"
                                aria-label="retag"
                                [clrDisabled]="
                                    !(selectedRow.length === 1) ||
                                    !hasRetagImagePermission ||
                                    depth
                                "
                                (click)="retag()"
                                clrDropdownItem>
                                {{ 'REPOSITORY.RETAG' | translate }}
                            </div>
                            <div
                                class="action-dropdown-item"
                                clrDropdownItem
                                *ngIf="hasDeleteImagePermission"
                                (click)="deleteArtifact()"
                                id="artifact-list-delete"
                                [clrDisabled]="
                                    !hasDeleteImagePermission ||
                                    !selectedRow.length ||
                                    depth
                                ">
                                {{ 'REPOSITORY.DELETE' | translate }}
                            </div>
                        </clr-dropdown-menu>
                    </clr-dropdown>
                </div>
                <div class="right-pos">
                    <app-artifact-filter
                        [withDivider]="true"
                        (filterEvent)="filterEvent($event)"
                        [projectId]="projectId"></app-artifact-filter>
                    <span class="refresh-btn" (click)="refresh()">
                        <clr-icon shape="refresh"></clr-icon>
                    </span>
                </div>
            </clr-dg-action-bar>

            <clr-dg-column [clrDgSortBy]="'digest'"
                ><ng-template
                    [clrDgHideableColumn]="{ hidden: hiddenArray[0] }">
                    {{ 'REPOSITORY.ARTIFACTS_COUNT' | translate }}
                </ng-template>
            </clr-dg-column>
            <clr-dg-column *ngIf="depth">
                <ng-template [clrDgHideableColumn]="{ hidden: hiddenArray[1] }">
                    {{ 'REPOSITORY.PLATFORM' | translate }}
                </ng-template>
            </clr-dg-column>
            <clr-dg-column>
                <ng-template [clrDgHideableColumn]="{ hidden: hiddenArray[2] }">
                    {{ 'REPOSITORY.TAGS' | translate }}
                </ng-template>
            </clr-dg-column>
            <clr-dg-column class="co-signed-column">
                <ng-template [clrDgHideableColumn]="{ hidden: hiddenArray[3] }">
                    {{ 'REPOSITORY.SIGNED' | translate }}
                </ng-template>
            </clr-dg-column>
            <clr-dg-column [clrDgSortBy]="'size'" class="size-column">
                <ng-template [clrDgHideableColumn]="{ hidden: hiddenArray[4] }">
                    {{ 'REPOSITORY.SIZE' | translate }}
                </ng-template>
            </clr-dg-column>
            <clr-dg-column class="vul-column">
                <ng-template [clrDgHideableColumn]="{ hidden: hiddenArray[5] }">
                    {{ 'REPOSITORY.VULNERABILITY' | translate }}
                </ng-template>
            </clr-dg-column>
            <clr-dg-column class="sbom-column">
                <ng-template [clrDgHideableColumn]="{ hidden: hiddenArray[6] }">
                    {{ 'REPOSITORY.SBOM' | translate }}
                </ng-template>
            </clr-dg-column>
            <clr-dg-column class="annotations-column">
                <ng-template [clrDgHideableColumn]="{ hidden: hiddenArray[7] }">
                    {{ 'ARTIFACT.ANNOTATION' | translate }}
                </ng-template>
            </clr-dg-column>
            <clr-dg-column>
                <ng-template [clrDgHideableColumn]="{ hidden: hiddenArray[8] }">
                    {{ 'REPOSITORY.LABELS' | translate }}
                </ng-template>
            </clr-dg-column>
            <clr-dg-column [clrDgSortBy]="pushComparator">
                <ng-template [clrDgHideableColumn]="{ hidden: hiddenArray[9] }">
                    {{ 'REPOSITORY.PUSH_TIME' | translate }}
                </ng-template>
            </clr-dg-column>
            <clr-dg-column [clrDgSortBy]="pullComparator">
                <ng-template
                    [clrDgHideableColumn]="{ hidden: hiddenArray[10] }">
                    {{ 'REPOSITORY.PULL_TIME' | translate }}
                </ng-template>
            </clr-dg-column>
            <clr-dg-placeholder>{{
                'ARTIFACT.PLACEHOLDER' | translate
            }}</clr-dg-placeholder>
            <clr-dg-row
                *ngFor="let artifact of artifactList; let i = index"
                [clrDgItem]="artifact">
                <clr-dg-cell>
                    <div class="cell white-normal">
                        <div
                            class="artifact-icon clr-display-inline-block"
                            *ngIf="artifact.icon">
                            <img
                                *ngIf="getIcon(artifact.icon)"
                                class="artifact-icon"
                                [title]="artifact.type"
                                [src]="getIcon(artifact.icon)"
                                (error)="showDefaultIcon($event)" />
                        </div>
                        <a
                            href="javascript:void(0)"
                            class="digest margin-left-5"
                            (click)="goIntoArtifactSummaryPage(artifact)"
                            title="{{ artifact.digest }}">
                            {{ artifact.digest | slice : 0 : 15 }}</a
                        >
                        <clr-tooltip
                            class="fix-width"
                            *ngIf="
                                artifact?.references &&
                                artifact?.references?.length
                            ">
                            <div clrTooltipTrigger class="level-border">
                                <div class="inner truncated">
                                    <a
                                        href="javascript:void(0)"
                                        (click)="goIntoIndexArtifact(artifact)">
                                        <clr-icon
                                            size="24"
                                            class="icon-folder"
                                            shape="folder"></clr-icon>
                                    </a>
                                </div>
                            </div>
                            <clr-tooltip-content
                                [clrPosition]="'top-right'"
                                [clrSize]="'lg'"
                                *clrIfOpen>
                                {{ 'REPOSITORY.ARTIFACT_TOOTIP' | translate }}
                            </clr-tooltip-content>
                        </clr-tooltip>
                        <app-pull-command
                            [registryUrl]="registryUrl"
                            [projectName]="projectName"
                            [repoName]="repoName"
                            [artifact]="artifact"
                            class="fix-width"></app-pull-command>
                    </div>
                </clr-dg-cell>
                <clr-dg-cell *ngIf="depth">
                    <div class="cell">
                        {{ artifact.platform?.os }}
                        /{{ artifact.platform?.architecture
                        }}{{
                            artifact.platform?.variant
                                ? '/' + artifact.platform?.variant
                                : ''
                        }}
                    </div>
                </clr-dg-cell>
                <clr-dg-cell class="center">
                    <div *ngIf="artifact.tags" class="truncated width-p-100">
                        <clr-tooltip class="width-p-100">
                            <div clrTooltipTrigger class="center">
                                <div class="center width-p-100">
                                    <span
                                        #tagsSpan
                                        class="truncated width-p-75"
                                        >{{ tagsString(artifact?.tags) }}</span
                                    >
                                    <span
                                        *ngIf="
                                            artifact?.tags?.length > 1 &&
                                            isEllipsisActive(tagsSpan)
                                        "
                                        >({{ artifact?.tagNumber }} )</span
                                    >
                                </div>
                            </div>
                            <clr-tooltip-content
                                [clrPosition]="'top-right'"
                                class="lg"
                                [clrSize]="'lg'"
                                *clrIfOpen>
                                <table
                                    class="table table-noborder mt-0 table-tag">
                                    <thead class="tag-thead">
                                        <tr>
                                            <th class="left tag-header-color">
                                                {{
                                                    'REPOSITORY.TAGS'
                                                        | translate
                                                        | uppercase
                                                }}
                                            </th>
                                            <th class="left tag-header-color">
                                                {{
                                                    'REPOSITORY.PULL_TIME'
                                                        | translate
                                                        | uppercase
                                                }}
                                            </th>
                                            <th class="left tag-header-color">
                                                {{
                                                    'REPOSITORY.PUSH_TIME'
                                                        | translate
                                                        | uppercase
                                                }}
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody class="tag-tbody">
                                        <!--display less than 9 tags(too many tags will make UI stuck)-->
                                        <tr
                                            class="tag-tr"
                                            *ngFor="let tag of artifact.tags">
                                            <td class="left tag-body-color">
                                                {{ tag.name }}
                                            </td>
                                            <td class="left tag-body-color">
                                                {{
                                                    tag.pull_time ===
                                                    availableTime
                                                        ? ''
                                                        : (tag.pull_time
                                                          | harborDatetime
                                                              : 'short')
                                                }}
                                            </td>
                                            <td class="left tag-body-color">
                                                {{
                                                    tag.push_time
                                                        | harborDatetime
                                                            : 'short'
                                                }}
                                            </td>
                                        </tr>
                                        <tr *ngIf="artifact?.tagNumber > 8">
                                            ...
                                        </tr>
                                    </tbody>
                                </table>
                            </clr-tooltip-content>
                        </clr-tooltip>
                    </div>
                </clr-dg-cell>
                <clr-dg-cell>
                    <span
                        *ngIf="artifact.signed === 'checking'"
                        class="spinner spinner-inline ml-2"></span>
                    <clr-icon
                        shape="check-circle"
                        *ngIf="artifact.signed === 'true'"
                        size="20"
                        class="signed"></clr-icon>
                    <clr-icon
                        shape="times-circle"
                        *ngIf="artifact.signed === 'false'"
                        size="16"
                        class="color-red"></clr-icon>
                </clr-dg-cell>
                <clr-dg-cell>
                    <div class="cell">
                        {{
                            artifact.size
                                ? sizeTransform(artifact.size + '')
                                : ''
                        }}
                    </div>
                </clr-dg-cell>
                <clr-dg-cell>
                    <div class="cell">
                        <span *ngIf="!hasVul(artifact)">
                            {{ 'ARTIFACT.SCAN_UNSUPPORTED' | translate }}
                        </span>
                        <hbr-vulnerability-bar
                            (submitStopFinish)="submitStopFinish($event)"
                            (scanFinished)="scanFinished($event)"
                            *ngIf="hasVul(artifact)"
                            [inputScanner]="
                                handleScanOverview(artifact.scan_overview)
                                    ?.scanner
                            "
                            (submitFinish)="submitFinish($event)"
                            [projectName]="projectName"
                            [repoName]="repoName"
                            [artifactDigest]="artifact.digest"
                            [summary]="
                                handleScanOverview(artifact.scan_overview)
                            ">
                        </hbr-vulnerability-bar>
                    </div>
                </clr-dg-cell>
                <clr-dg-cell>
                    <div class="cell">
                        <span
                            *ngIf="artifact?.accessoryLoading"
                            class="spinner spinner-inline ml-2"></span>
                        <span
                            *ngIf="
                                !hasSbom(artifact) &&
                                !artifact?.accessoryLoading
                            ">
                            {{ 'ARTIFACT.SBOM_UNSUPPORTED' | translate }}
                        </span>
                        <hbr-sbom-bar
                            (submitStopFinish)="submitSbomStopFinish($event)"
                            (scanFinished)="sbomFinished($event)"
                            *ngIf="
                                hasSbom(artifact) &&
                                !artifact?.accessoryLoading &&
                                !hasChild(artifact)
                            "
                            [inputScanner]="
                                handleSbomOverview(artifact.sbom_overview)
                                    ?.scanner
                            "
                            (submitFinish)="submitSbomFinish($event)"
                            [projectName]="projectName"
                            [projectId]="projectId"
                            [repoName]="repoName"
                            [accessories]="artifact?.accessories"
                            [artifactDigest]="artifact?.digest"
                            [sbomDigest]="artifact?.sbomDigest"
                            [sbomOverview]="artifact?.sbom_overview">
                        </hbr-sbom-bar>
                    </div>
                </clr-dg-cell>
                <clr-dg-cell>
                    <div class="cell" *ngIf="artifact.annotationsArray?.length">
                        <div class="bar-state">
                            <span class="label not-scan">{{
                                artifact.annotationsArray[0]
                            }}</span>
                        </div>
                        <div
                            class="signpost-item"
                            [hidden]="artifact.annotationsArray?.length <= 1">
                            <div class="trigger-item">
                                <clr-signpost>
                                    <button
                                        class="btn btn-link"
                                        clrSignpostTrigger>
                                        ...
                                    </button>
                                    <clr-signpost-content
                                        [clrPosition]="'left-top'"
                                        *clrIfOpen>
                                        <div>
                                            <div
                                                *ngFor="
                                                    let attr of artifact.annotationsArray
                                                "
                                                class="bar-state">
                                                <span class="label not-scan">{{
                                                    attr
                                                }}</span>
                                            </div>
                                        </div>
                                    </clr-signpost-content>
                                </clr-signpost>
                            </div>
                        </div>
                    </div>
                </clr-dg-cell>
                <clr-dg-cell>
                    <div class="cell">
                        <hbr-label-piece
                            *ngIf="artifact.labels?.length"
                            [label]="artifact.labels[0]"
                            [labelWidth]="90"
                            [withTooltip]="true">
                        </hbr-label-piece>
                        <div
                            class="signpost-item"
                            [hidden]="artifact.labels?.length <= 1">
                            <clr-signpost>
                                <button class="btn btn-link" clrSignpostTrigger>
                                    ...
                                </button>
                                <clr-signpost-content
                                    [clrPosition]="'top-middle'"
                                    *clrIfOpen>
                                    <div
                                        class="clr-signpost-content-label-list">
                                        <div
                                            *ngFor="
                                                let label of artifact.labels
                                            "
                                            class="margin-5px">
                                            <hbr-label-piece
                                                [labelWidth]="130"
                                                [label]="label"
                                                [withTooltip]="true">
                                            </hbr-label-piece>
                                        </div>
                                    </div>
                                </clr-signpost-content>
                            </clr-signpost>
                        </div>
                    </div>
                </clr-dg-cell>
                <clr-dg-cell>
                    <div class="cell">
                        {{ artifact.push_time | harborDatetime : 'short' }}
                    </div>
                </clr-dg-cell>
                <clr-dg-cell>
                    <div class="cell">
                        {{
                            artifact.pull_time === availableTime
                                ? ''
                                : (artifact.pull_time
                                  | harborDatetime : 'short')
                        }}
                    </div>
                </clr-dg-cell>
                <ng-container
                    ngProjectAs="clr-dg-row-detail"
                    *ngIf="artifact?.accessories?.length">
                    <sub-accessories
                        [projectName]="projectName"
                        [repositoryName]="repoName"
                        [artifactDigest]="artifact?.digest"
                        [total]="artifact?.accessoryNumber"
                        [accessories]="artifact?.accessories"
                        *clrIfExpanded></sub-accessories>
                </ng-container>
            </clr-dg-row>
            <clr-dg-footer>
                <clr-dg-pagination
                    #pagination
                    [clrDgTotalItems]="totalCount"
                    [(clrDgPage)]="currentPage"
                    [clrDgPageSize]="pageSize">
                    <clr-dg-page-size
                        [clrPageSizeOptions]="clrPageSizeOptions"
                        >{{
                            'PAGINATION.PAGE_SIZE' | translate
                        }}</clr-dg-page-size
                    >
                    <span *ngIf="totalCount"
                        >{{ pagination.firstItem + 1 }} -
                        {{ pagination.lastItem + 1 }}
                        {{ 'REPOSITORY.OF' | translate }}</span
                    >
                    {{ totalCount }}
                    {{ 'REPOSITORY.ITEMS' | translate }}&nbsp;&nbsp;&nbsp;&nbsp;
                </clr-dg-pagination>
            </clr-dg-footer>
        </clr-datagrid>
    </div>
</div>
