<div>
    <div class="flex-container">
        <div class="title-container">
            <div class="chart-name">
                {{chartNameWithVersion | translate}}
            </div>
            <div>
                {{roleName | translate}}
            </div>
        </div>
        <div>
            <button class="btn  btn-secondary"
            (click)="downloadChart()">{{'HELM_CHART.DOWNLOAD' | translate}}</button>
        </div>
    </div>
    <span *ngIf="loading" class="spinner spinner-lg detail-loading">
        Loading...
    </span>
    <div *ngIf="!loading && isChartExist">
        <clr-tabs>
            <clr-tab>
                <button clrTabLink id="summary-link">{{'HELM_CHART.SUMMARY' | translate}}</button>
                <clr-tab-content id="summary-content" *clrIfActive>
                    <hbr-chart-detail-summary
                    [summary]="chartDetail.metadata"
                    [chartName]="chartName"
                    [repoURL]="repoURL"
                    [projectName]="project.name"
                    [chartVersion]="chartVersion"
                    [security]="chartDetail.security"
                    [readme]="chartDetail.files['README.md']"
                    [labels]="chartDetail.labels"></hbr-chart-detail-summary>
                </clr-tab-content>
            </clr-tab>
            <clr-tab>
                <button clrTabLink id="depend-link">{{'HELM_CHART.DEPENDENCIES' | translate}}</button>
                <clr-tab-content id="depend-content">
                    <hbr-chart-detail-dependency [dependencies]='chartDetail.dependencies'></hbr-chart-detail-dependency>
                </clr-tab-content>
            </clr-tab>
            <clr-tab>
                <button clrTabLink id="value-link">{{'HELM_CHART.VALUES' | translate}}</button>
                <clr-tab-content id="value-content">
                    <hbr-chart-detail-value
                    [values]="chartDetail.values"
                    [yaml]="chartDetail.files['values.yaml']"></hbr-chart-detail-value>
                </clr-tab-content>
            </clr-tab>
        </clr-tabs>
    </div>
    <div *ngIf="!loading && !isChartExist">
        <h6>{{'HELM_CHART.NO_DETAIL' | translate }}</h6>
    </div>

</div>
