<h4>{{ 'REPOSITORY.TAGS' | translate }}</h4>

<clr-datagrid
    [clrDgLoading]="loading"
    (clrDgRefresh)="getCurrentArtifactTags($event)"
    [(clrDgSelected)]="selectedRow">
    <clr-dg-action-bar>
        <div class="action-bar">
            <div>
                <button
                    *ngIf="!isProxyCacheProject"
                    id="new-tag"
                    type="button"
                    [disabled]="!hasCreateTagPermission"
                    class="btn btn-secondary"
                    (click)="addTag()">
                    <clr-icon shape="plus" size="16"></clr-icon>&nbsp;{{
                        'TAG.ADD_TAG' | translate
                    }}
                </button>
                <button
                    id="delete-tag"
                    type="button"
                    class="btn btn-secondary"
                    [disabled]="
                        !(
                            selectedRow.length >= 1 &&
                            !hasImmutableOnTag() &&
                            hasDeleteTagPermission
                        )
                    "
                    (click)="removeTag()">
                    <clr-icon shape="trash" size="16"></clr-icon>&nbsp;{{
                        'TAG.REMOVE_TAG' | translate
                    }}
                </button>
            </div>
            <div class="right-pos">
                <app-pull-command
                    [isTagMode]="true"
                    [artifact]="artifactDetails"
                    [accessoryType]="accessoryType"
                    [registryUrl]="registryUrl"
                    [projectName]="projectName"
                    [repoName]="repositoryName"
                    [selectedTags]="selectedRow"
                    class="mr-1"></app-pull-command>
                <span class="refresh-btn" (click)="refresh()">
                    <clr-icon shape="refresh"></clr-icon>
                </span>
            </div>
        </div>

        <form
            #tagForm="ngForm"
            [hidden]="!newTagformShow"
            class="label-form stack-block-label">
            <section>
                <label>
                    <label for="name">{{ 'TAG.NAME' | translate }}</label>
                    <label
                        class="clr-control-container"
                        [class.clr-error]="
                            isTagNameExist || name.hasError('pattern')
                        ">
                        <input
                            clrInput
                            type="text"
                            id="name"
                            name="name"
                            required
                            size="20"
                            autocomplete="off"
                            [(ngModel)]="newTagName.name"
                            #name="ngModel"
                            pattern="^[\w][\w.-]{0,127}$"
                            (keyup)="existValid(newTagName.name)" />
                        <span
                            class="spinner spinner-inline spinner-tag"
                            [hidden]="!tagNameCheckOnGoing"></span>

                        <clr-control-error
                            class="position-ab white-space-nowrap"
                            *ngIf="isTagNameExist">
                            {{ 'TAG.NAME_ALREADY_EXISTS' | translate }}
                        </clr-control-error>
                        <clr-control-error
                            class="position-ab white-space-nowrap"
                            *ngIf="name.hasError('pattern')">
                            {{ 'RETAG.TIP_TAG' | translate }}
                        </clr-control-error>
                    </label>
                </label>
                <label class="ml-1">
                    <button
                        type="button"
                        class="btn btn-sm btn-outline"
                        (click)="cancelAddTag()">
                        {{ 'BUTTON.CANCEL' | translate }}
                    </button>
                    <button
                        id="add-ok"
                        type="submit"
                        class="btn btn-sm btn-primary"
                        (click)="saveAddTag()"
                        [disabled]="
                            isTagNameExist ||
                            tagNameCheckOnGoing ||
                            !newTagName.name ||
                            tagForm.invalid
                        ">
                        {{ 'BUTTON.OK' | translate }}
                    </button>
                </label>
            </section>
        </form>
    </clr-dg-action-bar>
    <clr-dg-column [clrDgField]="'name'">{{
        'TAG.NAME' | translate
    }}</clr-dg-column>
    <clr-dg-column [clrDgSortBy]="'pull_time'">{{
        'TAG.PULL_TIME' | translate
    }}</clr-dg-column>
    <clr-dg-column [clrDgSortBy]="'push_time'">{{
        'TAG.PUSH_TIME' | translate
    }}</clr-dg-column>
    <clr-dg-placeholder>
        <span>{{ 'TAG.PLACEHOLDER' | translate }}</span>
    </clr-dg-placeholder>
    <clr-dg-row *ngFor="let tag of currentTags" [clrDgItem]="tag">
        <clr-dg-cell>
            <div class="cell white-normal" [class.immutable]="tag.immutable">
                <span
                    href="javascript:void(0)"
                    class="max-width-100"
                    title="{{ tag.name }}"
                    >{{ tag.name }}</span
                >
                <span *ngIf="tag.immutable" class="label label-info ml-8">{{
                    'REPOSITORY.IMMUTABLE' | translate
                }}</span>
            </div>
        </clr-dg-cell>
        <clr-dg-cell>{{
            tag.pull_time !== availableTime
                ? (tag.pull_time | harborDatetime : 'short')
                : ''
        }}</clr-dg-cell>
        <clr-dg-cell>{{
            tag.push_time | harborDatetime : 'short'
        }}</clr-dg-cell>
    </clr-dg-row>

    <clr-dg-footer>
        <clr-dg-pagination
            #pagination
            [clrDgTotalItems]="totalCount"
            [(clrDgPage)]="currentPage"
            [clrDgPageSize]="pageSize">
            <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 }}
                {{ 'TAG.OF' | translate }} {{ totalCount }}
                {{ 'TAG.ITEMS' | translate }}</span
            >
        </clr-dg-pagination>
    </clr-dg-footer>
</clr-datagrid>

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