<div>
    <div class="row" class="label-config">
        <div>
            <div class="row flex-items-xs-between rightPos">
                <div class="flex-items-xs-middle option-right">
                    <hbr-filter
                        [withDivider]="true"
                        filterPlaceholder="{{
                            'LABEL.FILTER_LABEL_PLACEHOLDER' | translate
                        }}"
                        (filterEvt)="doSearchTargets($event)"
                        [currentValue]="targetName"></hbr-filter>
                    <span class="refresh-btn" (click)="refreshTargets()">
                        <clr-icon shape="refresh"></clr-icon>
                    </span>
                </div>
            </div>
        </div>
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 btnGroup">
            <button
                type="button"
                class="btn btn-secondary"
                [disabled]="!hasCreateLabelPermission"
                (click)="openModal()">
                <clr-icon shape="plus" size="16"></clr-icon>&nbsp;{{
                    'LABEL.NEW_LABEL' | translate
                }}
            </button>
            <button
                type="button"
                class="btn btn-secondary"
                [disabled]="
                    !(selectedRow.length === 1) || !hasUpdateLabelPermission
                "
                (click)="editLabel(selectedRow)">
                <clr-icon shape="pencil" size="16"></clr-icon>&nbsp;{{
                    'LABEL.EDIT' | translate
                }}
            </button>
            <button
                type="button"
                class="btn btn-secondary"
                [disabled]="!selectedRow.length || !hasDeleteLabelPermission"
                (click)="deleteLabels(selectedRow)">
                <clr-icon shape="times" size="16"></clr-icon>&nbsp;{{
                    'LABEL.DELETE' | translate
                }}
            </button>
            <hbr-create-edit-label
                [scope]="scope"
                [projectId]="projectId"
                (reload)="reload()"></hbr-create-edit-label>
        </div>
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <clr-datagrid
                (clrDgRefresh)="retrieve($event)"
                [clrDgLoading]="loading"
                [(clrDgSelected)]="selectedRow">
                <clr-dg-column [clrDgSortBy]="'name'">{{
                    'LABEL.LABEL' | translate
                }}</clr-dg-column>
                <clr-dg-column>{{
                    'LABEL.DESCRIPTION' | translate
                }}</clr-dg-column>
                <clr-dg-column [clrDgSortBy]="'creation_time'">{{
                    'LABEL.CREATION_TIME' | translate
                }}</clr-dg-column>
                <clr-dg-placeholder>{{
                    'LABEL.PLACEHOLDER' | translate
                }}</clr-dg-placeholder>
                <clr-dg-row *ngFor="let label of targets" [clrDgItem]="label">
                    <clr-dg-cell>
                        <hbr-label-piece [label]="label"></hbr-label-piece>
                    </clr-dg-cell>
                    <clr-dg-cell>{{ label.description }}</clr-dg-cell>
                    <clr-dg-cell>{{
                        label.creation_time | harborDatetime : 'short'
                    }}</clr-dg-cell>
                </clr-dg-row>
                <clr-dg-footer>
                    <clr-dg-pagination
                        #pagination
                        [clrDgPageSize]="pageSize"
                        [(clrDgPage)]="page"
                        [clrDgTotalItems]="total">
                        <clr-dg-page-size
                            [clrPageSizeOptions]="clrPageSizeOptions"
                            >{{
                                'PAGINATION.PAGE_SIZE' | translate
                            }}</clr-dg-page-size
                        >
                        <span *ngIf="total"
                            >{{ pagination.firstItem + 1 }} -
                            {{ pagination.lastItem + 1 }}
                            {{ 'DESTINATION.OF' | translate }}</span
                        >
                        {{ total }} {{ 'DESTINATION.ITEMS' | translate }}
                    </clr-dg-pagination>
                </clr-dg-footer>
            </clr-datagrid>
        </div>
    </div>
    <confirmation-dialog
        #confirmationDialog
        (confirmAction)="confirmDeletion($event)"></confirmation-dialog>
</div>
