<div class="color-0 pt-1">
    <div class="row" class="label-config">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 quota-top">
            <div class="default-quota">
                <div>
                    <div class="default-quota-text pr-1"><span>{{'QUOTA.PROJECT_QUOTA_DEFAULT_ARTIFACT' | translate}}</span><span
                            class="num-count">{{ quotaHardLimitValue?.countLimit === -1? ('QUOTA.UNLIMITED'| translate): quotaHardLimitValue?.countLimit }}</span>
                    </div>
                    <div class="default-quota-text pr-1"><span>{{'QUOTA.PROJECT_QUOTA_DEFAULT_DISK' | translate}}</span><span class="num-count">
                            {{ quotaHardLimitValue?.storageLimit === -1?('QUOTA.UNLIMITED' | translate): getIntegerAndUnit(quotaHardLimitValue?.storageLimit, 0).partNumberHard}}
                            {{ quotaHardLimitValue?.storageLimit === -1?'':quotaHardLimitValue?.storageUnit }}</span>
                    </div>
                </div>
                <button class="btn btn-link btn-sm default-quota-edit-button pt-0 mt-0"
                    (click)="editDefaultQuota(quotaHardLimitValue)">{{'QUOTA.EDIT' | translate}}</button>
            </div>
            <div class="refresh-div mr-1">
                <span class="refresh-btn" (click)="refresh()">
                    <clr-icon shape="refresh"></clr-icon>
                </span>
            </div>
        </div>
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <clr-datagrid [clrDgLoading]="loading" (clrDgRefresh)="getQuotaList($event)">
                <clr-dg-column>{{'QUOTA.PROJECT' | translate}}</clr-dg-column>
                <clr-dg-column>{{'QUOTA.OWNER' | translate}}</clr-dg-column>
                <clr-dg-column [clrDgSortBy]="countComparator">{{'QUOTA.COUNT' | translate }}</clr-dg-column>
                <clr-dg-column [clrDgSortBy]="storageComparator">{{'QUOTA.STORAGE' | translate }}</clr-dg-column>
                <clr-dg-placeholder>{{'QUOTA.PLACEHOLDER' | translate }}</clr-dg-placeholder>
                <clr-dg-row *ngFor="let quota of quotaList" [clrDgItem]='quota'>
                    <clr-dg-action-overflow>
                        <button class="action-item" (click)="editQuota(quota)">{{'QUOTA.EDIT' | translate}}</button>
                    </clr-dg-action-overflow>
                    <clr-dg-cell>
                        <a href="javascript:void(0)" (click)="goToLink(quota?.ref?.id)">{{quota?.ref?.name}}</a></clr-dg-cell>
                    <clr-dg-cell>{{quota?.ref?.owner_name}}</clr-dg-cell>
                    <clr-dg-cell>
                        <div class="progress-block progress-min-width">
                            <div class="progress success"
                                [class.danger]="quota.hard.count!==-1?quota.used.count/quota.hard.count>quotaDangerCoefficient:false"
                                [class.warning]="quota.hard.count!==-1?quota.used.count/quota.hard.count<=quotaDangerCoefficient &&quota.used.count/quota.hard.count>=quotaWarningCoefficient:false"
                                >
                                <progress value="{{quota.hard.count===-1? 0 : quota.used.count}}"
                                    max="{{quota.hard.count}}" data-displayval="100%"></progress>
                            </div>
                            <label class="min-label-width">{{ quota?.used?.count }} {{ 'QUOTA.OF' | translate }}
                                {{ quota?.hard.count ===-1?('QUOTA.UNLIMITED' | translate): quota?.hard?.count }}</label>
                        </div>
                    </clr-dg-cell>
                    <clr-dg-cell>
                        <div class="progress-block progress-min-width">
                            <div class="progress success"
                                [class.danger]="quota.hard.storage!==-1?quota.used.storage/quota.hard.storage>quotaDangerCoefficient:false"
                                [class.warning]="quota.hard.storage!==-1?quota.used.storage/quota.hard.storage>=quotaWarningCoefficient&&quota.used.storage/quota.hard.storage<=quotaDangerCoefficient:false"
                                >
                                <progress value="{{quota.hard.storage===-1? 0 : quota.used.storage}}"
                                    max="{{quota.hard.storage}}" data-displayval="100%"></progress>
                            </div>
                            <label class="min-label-width">{{ quota?.hard?.storage ===-1 ? getSuitableUnit(quota?.used?.storage) :
                                (getIntegerAndUnit(quota?.hard?.storage, quota?.used?.storage).partNumberUsed + getIntegerAndUnit(quota?.hard?.storage, quota?.used?.storage).partCharacterUsed)}}
                                {{ 'QUOTA.OF' | translate }}
                                {{ (quota?.hard?.storage ===-1 ? 'QUOTA.UNLIMITED':
                                (getIntegerAndUnit(quota?.hard?.storage, quota?.used?.storage).partNumberHard + getIntegerAndUnit(quota?.hard?.storage, quota?.used?.storage).partCharacterHard)) | translate }}
                            </label>
                        </div>
                    </clr-dg-cell>
                </clr-dg-row>
                <clr-dg-footer>
                    <span>{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
                        {{'DESTINATION.OF' | translate}}</span>
                    {{totalCount}} {{'SUMMARY.QUOTAS' | translate}}
                    <clr-dg-pagination #pagination [clrDgPageSize]="pageSize" [(clrDgPage)]="currentPage"
                        [clrDgTotalItems]="totalCount"></clr-dg-pagination>
                </clr-dg-footer>
            </clr-datagrid>
        </div>
    </div>
    <edit-project-quotas #editProjectQuotas (confirmAction)="confirmEdit($event)"></edit-project-quotas>
</div>
