<span class="back-icon"><</span>
<a *ngIf="hasSignedIn" (click)="backToProject()" class="backStyle">{{
    'PROJECT_DETAIL.PROJECTS' | translate
}}</a>
<ng-container *ngIf="hasSignedIn && isWebhookTaskListPage()">
    <span class="back-icon"><</span>
    <a (click)="backToWebhook()" class="backStyle">{{
        'PROJECT_DETAIL.WEBHOOKS' | translate
    }}</a>
</ng-container>
<ng-container *ngIf="hasSignedIn && isP2pPreheatTaskListPage()">
    <span class="back-icon"><</span>
    <a (click)="backToP2pPreheat()" class="backStyle">{{
        'P2P_PROVIDER.P2P_PROVIDER' | translate
    }}</a>
</ng-container>

<a *ngIf="!hasSignedIn" [routerLink]="['/harbor', 'sign-in']" class="backStyle">
    {{ 'SEARCH.BACK' | translate }}</a
>
<div class="clr-row">
    <div class="clr-col-5">
        <h1 class="custom-h2 center" sub-header-title>
            <clr-icon
                *ngIf="isProxyCacheProject"
                shape="cloud-traffic"
                size="30"></clr-icon>
            <clr-icon
                *ngIf="!isProxyCacheProject"
                shape="organization"
                size="30"></clr-icon>
            <span class="ml-05 project-name">{{ currentProject.name }}</span>
            <div class="divider filter-divider" *ngIf="isMember"></div>
            <span class="role-label" *ngIf="isMember">{{
                roleName | translate
            }}</span>
        </h1>
        <div class="clr-row mt-0 line-height-10" *ngIf="isProxyCacheProject">
            <span class="proxy-cache">{{
                'PROJECT.PROXY_CACHE' | translate
            }}</span>
        </div>
    </div>
    <div class="clr-col-7 flex-end">
        <div class="card">
            <div class="card-block container">
                <div class="head">{{ 'PROJECT.ACCESS_LEVEL' | translate }}</div>
                <div class="storage-used font-weight-700">
                    <div>
                        <h3 class="mt-0">
                            {{
                                (currentProject?.metadata?.public === 'true'
                                    ? 'PROJECT.PUBLIC'
                                    : 'PROJECT.PRIVATE'
                                ) | translate
                            }}
                        </h3>
                    </div>
                </div>
            </div>
        </div>
        <div class="card" *ngIf="hasQuotaReadPermission">
            <div class="card-block container">
                <div class="head">
                    {{ 'QUOTA.QUOTA_USED' | translate }}
                </div>
                <div class="storage-used font-weight-700">
                    <div *ngIf="projectQuota">
                        <h3 class="mt-0 clr-display-inline-block">
                            <span class="size-number">{{
                                getSizeNumber()
                            }}</span>
                            <span>{{ getSizeUnit() }}</span>
                        </h3>
                        <span class="of">{{ 'QUOTA.OF' | translate }}</span>
                        <span>{{
                            projectQuota?.hard?.storage === -1
                                ? ('QUOTA.UNLIMITED' | translate)
                                : getIntegerAndUnit(
                                      projectQuota?.hard?.storage,
                                      projectQuota?.used?.storage
                                  ).partNumberHard
                        }}</span>
                        <span>{{
                            projectQuota?.hard?.storage === -1
                                ? ''
                                : getIntegerAndUnit(
                                      projectQuota?.hard?.storage,
                                      projectQuota?.used?.storage
                                  ).partCharacterHard
                        }}</span>
                        <div>
                            <div
                                class="progress-block progress-min-width progress-div">
                                <div
                                    class="progress success"
                                    [class.danger]="
                                        projectQuota?.hard?.storage !== -1
                                            ? projectQuota?.used?.storage /
                                                  projectQuota?.hard?.storage >
                                              quotaDangerCoefficient
                                            : false
                                    "
                                    [class.warning]="
                                        projectQuota?.hard?.storage !== -1
                                            ? projectQuota?.used?.storage /
                                                  projectQuota?.hard?.storage <=
                                                  quotaDangerCoefficient &&
                                              projectQuota?.used?.storage /
                                                  projectQuota?.hard?.storage >=
                                                  quotaWarningCoefficient
                                            : false
                                    ">
                                    <progress
                                        value="{{
                                            projectQuota?.hard?.storage === -1
                                                ? 0
                                                : projectQuota?.used?.storage
                                        }}"
                                        max="{{ projectQuota?.hard?.storage }}"
                                        data-displayval="100%"></progress>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<clr-tabs
    id="project-tabs"
    class="tabs"
    [class.in-overflow]="isTabLinkInOverFlow()">
    <ng-container *ngFor="let tab of tabLinkNavList; let i = index">
        <ng-container *ngIf="tab.permissions()">
            <clr-tab>
                <button
                    [class.clear-default-active]="isDefaultTab(tab, i)"
                    [clrTabLinkInOverflow]="tab.tabLinkInOverflow"
                    id="{{ 'project-' + tab.linkName }}"
                    clrTabLink
                    routerLink="{{ tab.linkName }}"
                    routerLinkActive="active"
                    type="button">
                    <a class="nav-link">{{ tab.showTabName | translate }}</a>
                </button>
            </clr-tab>
        </ng-container>
    </ng-container>
</clr-tabs>

<router-outlet></router-outlet>
