<div>
    <div class="breadcrumb">
        <span class="back-icon"><</span>
        <a (click)="goProBack()">{{ 'SIDE_NAV.PROJECTS' | translate }}</a>
        <span class="back-icon"><</span>
        <a (click)="watchGoBackEvt(projectId)">{{ projectName }}</a>
        <span *ngIf="depth"
            >&lt;<a (click)="backInitRepo()">{{ repoName }}</a></span
        >
        <span *ngIf="referArtifactNameArray?.length >= 1">
            <span *ngFor="let digest of referArtifactNameArray; let i = index">
                &lt;<a (click)="jumpDigest(i)">{{
                    digest | slice : 0 : 15
                }}</a></span
            >
        </span>
    </div>
    <section class="overview-section">
        <div class="title-wrapper">
            <div class="title-block">
                <h2 sub-header-title class="custom-h2" *ngIf="!artifactDigest">
                    {{ repoName }}
                </h2>
                <h2 sub-header-title class="custom-h2" *ngIf="artifactDigest">
                    {{ artifactDigest | slice : 0 : 15 }}
                </h2>
            </div>
        </div>
    </section>

    <section class="detail-section">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <ul id="configTabs" class="nav" role="tablist">
                <li
                    role="presentation"
                    class="nav-item"
                    *ngIf="!artifactDigest">
                    <button
                        id="repo-info"
                        class="btn btn-link nav-link"
                        aria-controls="info"
                        type="button"
                        routerLinkActive="active"
                        routerLink="./info-tab">
                        {{ 'REPOSITORY.INFO' | translate }}
                    </button>
                </li>
                <li role="presentation" class="nav-item">
                    <button
                        id="repo-image"
                        class="btn btn-link nav-link"
                        aria-controls="image"
                        type="button"
                        routerLinkActive="active"
                        routerLink="./artifacts-tab">
                        {{ 'REPOSITORY.ARTIFACTS' | translate }}
                    </button>
                </li>
            </ul>
            <router-outlet></router-outlet>
        </div>
    </section>
</div>
