<div>
    <section class="overview-section">
        <div class="title-wrapper">
            <div class="title-block arrow-block" *ngIf="withAdmiral">
                <clr-icon class="rotate-90 arrow-back" shape="arrow" size="36" (click)="onBack()"></clr-icon>
            </div>
            <div class="title-block">
                <h2 class="custom-h2">{{repositoryId}}:{{tagDetails.name}}</h2>
            </div>
        </div>
        <div class="summary-block row">
            <div class="image-summary col-md-4 col-sm-6">
                <div class="flex-block">
                    <section class="image-detail-label">
                        <section class="detail-row">
                            <label class="detail-label">{{'TAG.AUTHOR' | translate }}</label>
                            <div class="image-details" [title]="author | translate">{{author | translate}}</div>
                        </section>
                        <section class="detail-row">
                            <label class="detail-label">{{'TAG.ARCHITECTURE' | translate }}</label>
                            <div class="image-details" [title]="tagDetails.architecture">{{tagDetails.architecture}}</div>
                        </section>
                        <section class="detail-row">
                            <label class="detail-label">{{'TAG.OS' | translate }}</label>
                            <div class="image-details" [title]="tagDetails.os">{{tagDetails.os}}</div>
                        </section>
                        <section class="detail-row">
                            <label class="detail-label">{{'TAG.OS_VERSION' | translate }}</label>
                            <div class="image-details" [title]="tagDetails['os.version']">{{tagDetails['os.version']}}</div>
                        </section>
                        <section class="detail-row">
                            <label class="detail-label">{{'TAG.DOCKER_VERSION' | translate }}</label>
                            <div class="image-details" [title]="tagDetails.docker_version">{{tagDetails.docker_version}}</div>
                        </section>
                        <section class="detail-row" *ngIf="hasCve">
                            <label class="detail-label">{{'TAG.SCAN_COMPLETION_TIME' | translate }}</label>
                            <div class="image-details" [title]="scanCompletedDatetime | date">{{scanCompletedDatetime | date}}</div>
                        </section>
                    </section>
                </div>
            </div>
            <div class="col-md-4 col-sm-6">
                <div class="vulnerability" [hidden]="hasCve">
                    <hbr-vulnerability-bar [repoName]="repositoryId" [tagId]="tagDetails.name" [summary]="vulnerabilitySummary"></hbr-vulnerability-bar>
                </div>
                <histogram-chart *ngIf="hasCve" class="margin-top-5px" [metadata]="passMetadataToChart()" [isWhiteBackground]="true"></histogram-chart>
            </div>
            <div *ngIf="!withAdmiral && tagDetails?.labels?.length">
                <div class="third-column detail-title">{{'TAG.LABELS' | translate }}</div>
                <div class="fourth-column">
                    <div *ngFor="let label of tagDetails.labels" class="detail-tag">
                        <hbr-label-piece [label]="label"></hbr-label-piece>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <clr-tabs>
        <clr-tab *ngIf="hasVulnerabilitiesListPermission">
            <button clrTabLink [clrTabLinkInOverflow]="false" class="btn btn-link nav-link" id="tag-vulnerability" [class.active]='isCurrentTabLink("tag-vulnerability")' type="button" (click)='tabLinkClick("tag-vulnerability")'>{{'REPOSITORY.VULNERABILITY' | translate}}</button>
            <clr-tab-content id="content1" *clrIfActive="true">
                <hbr-vulnerabilities-grid [repositoryId]="repositoryId" [projectId]="projectId" [tagId]="tagId"></hbr-vulnerabilities-grid>
            </clr-tab-content>
        </clr-tab>
        <clr-tab *ngIf="hasBuildHistoryPermission">
            <button [clrTabLinkInOverflow]="false" id="tag-history" clrTabLink class="btn btn-link nav-link" [class.active]='isCurrentTabLink("tag-history")' type="button" (click)='tabLinkClick("tag-history")'>{{ 'REPOSITORY.BUILD_HISTORY' | translate }}</button>
            <clr-tab-content *clrIfActive>
                <hbr-tag-history [repositoryId]="repositoryId" [tagId]="tagId">{{ 'REPOSITORY.BUILD_HISTORY' | translate }}</hbr-tag-history>
            </clr-tab-content>
        </clr-tab>
    </clr-tabs>
</div>
