<div class="repository-box">
    <div class="row position-relative">
        <div class="toolbar">
            <div class="row flex-items-xs-right option-right rightPos">
                <div class="flex-xs-middle">
                    <a
                        rel="noopener noreferrer"
                        #certDownloadLink
                        *ngIf="canDownloadCert"
                        [href]="downloadLink"
                        target="_blank"
                        class="btn btn-link btn-font download-link">
                        <clr-icon shape="download"></clr-icon>
                        {{
                            'CONFIG.REGISTRY_CERTIFICATE'
                                | translate
                                | uppercase
                        }}
                    </a>
                    <hbr-push-image-button
                        class="push-image-button"
                        *ngIf="
                            hasCreateRepositoryPermission &&
                            !isProxyCacheProject
                        "
                        [registryUrl]="registryUrl"
                        [projectName]="projectName"></hbr-push-image-button>
                    <hbr-filter
                        [withDivider]="true"
                        filterPlaceholder="{{
                            'REPOSITORY.FILTER_FOR_REPOSITORIES' | translate
                        }}"
                        [currentValue]="lastFilteredRepoName"></hbr-filter>
                    <span
                        class="card-btn"
                        (click)="showCard(true)"
                        (mouseenter)="mouseEnter('card')"
                        (mouseleave)="mouseLeave('card')">
                        <clr-icon
                            [ngClass]="{
                                'is-highlight': isCardView || isHovering('card')
                            }"
                            shape="view-cards"></clr-icon>
                    </span>
                    <span
                        class="list-btn"
                        (click)="showCard(false)"
                        (mouseenter)="mouseEnter('list')"
                        (mouseleave)="mouseLeave('list')">
                        <clr-icon
                            [ngClass]="{
                                'is-highlight':
                                    !isCardView || isHovering('list')
                            }"
                            shape="view-list"></clr-icon>
                    </span>
                    <span class="filter-divider"></span>
                    <span class="refresh-btn" (click)="refresh()"
                        ><clr-icon shape="refresh"></clr-icon
                    ></span>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div
            *ngIf="!isCardView"
            class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <clr-datagrid
                (clrDgRefresh)="clrLoad($event)"
                [clrDgLoading]="loading"
                [(clrDgSelected)]="selectedRow">
                <clr-dg-action-bar>
                    <button
                        type="button"
                        class="btn btn-secondary"
                        (click)="deleteRepos(selectedRow)"
                        [disabled]="
                            !selectedRow.length ||
                            !hasDeleteRepositoryPermission
                        ">
                        <clr-icon shape="times" size="16"></clr-icon>&nbsp;{{
                            'REPOSITORY.DELETE' | translate
                        }}
                    </button>
                </clr-dg-action-bar>
                <clr-dg-column [clrDgField]="'name'">{{
                    'REPOSITORY.NAME' | translate
                }}</clr-dg-column>
                <clr-dg-column>{{
                    'REPOSITORY.ARTIFACTS_COUNT' | translate
                }}</clr-dg-column>
                <clr-dg-column [clrDgSortBy]="'pull_count'">{{
                    'REPOSITORY.PULL_COUNT' | translate
                }}</clr-dg-column>
                <clr-dg-column [clrDgSortBy]="'update_time'">{{
                    'REPOSITORY.LAST_MODIFIED' | translate
                }}</clr-dg-column>
                <clr-dg-placeholder>{{
                    'REPOSITORY.PLACEHOLDER' | translate
                }}</clr-dg-placeholder>
                <clr-dg-row *ngFor="let r of repositories" [clrDgItem]="r">
                    <clr-dg-cell>
                        <a href="javascript:void(0)" [routerLink]="getLink(r)">
                            <span *ngIf="withAdmiral" class="list-img"
                                ><img [src]="getImgLink(r)" /></span
                            >{{ r.name }}</a
                        ></clr-dg-cell
                    >
                    <!-- to do -->
                    <clr-dg-cell>{{ r.artifact_count }}</clr-dg-cell>
                    <clr-dg-cell>{{ r.pull_count }}</clr-dg-cell>
                    <clr-dg-cell>{{
                        r.update_time | harborDatetime: 'short'
                    }}</clr-dg-cell>
                </clr-dg-row>
                <clr-dg-footer>
                    <clr-dg-pagination
                        #pagination
                        [(clrDgPage)]="currentPage"
                        [clrDgPageSize]="pageSize"
                        [clrDgTotalItems]="totalCount">
                        <clr-dg-page-size [clrPageSizeOptions]="[15, 25, 50]">{{
                            'PAGINATION.PAGE_SIZE' | translate
                        }}</clr-dg-page-size>
                        <span *ngIf="totalCount"
                            >{{ pagination.firstItem + 1 }} -
                            {{ pagination.lastItem + 1 }}
                            {{ 'REPOSITORY.OF' | translate }}</span
                        >
                        {{ totalCount }} {{ 'REPOSITORY.ITEMS' | translate }}
                    </clr-dg-pagination>
                </clr-dg-footer>
            </clr-datagrid>
        </div>
    </div>

    <hbr-gridview
        *ngIf="isCardView"
        #gridView
        class="position-relative"
        [items]="repositories"
        [loading]="loading"
        [pageSize]="pageSize"
        [currentPage]="currentPage"
        [totalCount]="totalCount"
        [expectScrollPercent]="90"
        [withAdmiral]="withAdmiral"
        (loadNextPageEvent)="loadNextPage()">
        <ng-template let-item="item">
            <a class="card clickable" [routerLink]="getLink(item)">
                <div class="card-header">
                    <div
                        [ngClass]="{
                            'card-media-block': true,
                            wrap: !withAdmiral
                        }">
                        <img *ngIf="withAdmiral" [src]="getImgLink(item)" />
                        <div class="card-media-description">
                            <span
                                class="card-media-title"
                                [title]="item.name"
                                >{{ item.name }}</span
                            >
                            <p class="card-media-text">{{ registryUrl }}</p>
                        </div>
                    </div>
                </div>
                <div class="card-block">
                    <div class="card-text">
                        {{
                            item.description ||
                                ('REPOSITORY.NO_INFO' | translate)
                        }}
                    </div>
                    <div class="form-group">
                        <label>{{
                            'REPOSITORY.ARTIFACTS_COUNT' | translate
                        }}</label>
                        <div>{{ item.artifact_count }}</div>
                    </div>
                    <div class="form-group">
                        <label>{{ 'REPOSITORY.PULL_COUNT' | translate }}</label>
                        <div>{{ item.pull_count }}</div>
                    </div>
                    <div class="form-group">
                        <label>{{
                            'REPOSITORY.LAST_MODIFIED' | translate
                        }}</label>
                        <div>
                            {{ item.update_time | harborDatetime: 'short' }}
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <clr-dropdown [clrCloseMenuOnItemClick]="false">
                        <button
                            type="button"
                            class="btn btn-link"
                            (click)="
                                $event.stopPropagation();
                                $event.preventDefault()
                            "
                            [disabled]="!hasDeleteRepositoryPermission"
                            clrDropdownTrigger>
                            {{ 'REPOSITORY.ACTION' | translate }}
                            <clr-icon shape="caret down"></clr-icon>
                        </button>
                        <clr-dropdown-menu clrPosition="top-left" *clrIfOpen>
                            <button
                                *ngIf="withAdmiral"
                                type="button"
                                class="btn btn-link"
                                clrDropdownItem
                                (click)="
                                    itemAddInfoEvent($event, item);
                                    $event.stopPropagation();
                                    $event.preventDefault()
                                "
                                [disabled]="!hasProjectAdminRole">
                                {{ 'REPOSITORY.ADDITIONAL_INFO' | translate }}
                            </button>
                            <button
                                type="button"
                                class="btn btn-link"
                                clrDropdownItem
                                (click)="
                                    deleteItemEvent($event, item);
                                    $event.stopPropagation();
                                    $event.preventDefault()
                                "
                                [disabled]="!hasDeleteRepositoryPermission">
                                {{ 'REPOSITORY.DELETE' | translate }}
                            </button>
                        </clr-dropdown-menu>
                    </clr-dropdown>
                </div>
            </a>
        </ng-template>
    </hbr-gridview>
    <div *ngIf="isFirstLoadingGridView && isCardView" class="first-loading">
        <div class="spinner"></div>
    </div>

    <confirmation-dialog
        #confirmationDialog
        (confirmAction)="confirmDeletion($event)"></confirmation-dialog>
</div>
