<div class="row" class="replication-row">
    <div>
        <div class="row flex-items-xs-between rightPos">
            <div class="flex-xs-middle option-right">
                <hbr-filter
                    id="filter-rules"
                    [withDivider]="true"
                    filterPlaceholder="{{
                        'REPLICATION.FILTER_POLICIES_PLACEHOLDER' | translate
                    }}"
                    [currentValue]="search.ruleName"></hbr-filter>
                <span class="refresh-btn" (click)="refreshRules()">
                    <clr-icon shape="refresh"></clr-icon>
                </span>
            </div>
        </div>
    </div>
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <hbr-list-replication-rule
            #listReplicationRule
            (replicateManual)="replicateManualRule($event)"
            (selectOne)="selectOneRule($event)"
            (hideJobs)="hideJobs()"
            (openNewRule)="openModal()"
            (editOne)="openEditRule($event)"
            [withReplicationJob]="withReplicationJob"
            [hasCreateReplicationPermission]="hasCreateReplicationPermission"
            [hasUpdateReplicationPermission]="hasUpdateReplicationPermission"
            [hasDeleteReplicationPermission]="hasDeleteReplicationPermission"
            [hasExecuteReplicationPermission]="hasExecuteReplicationPermission"
            [searchString]="
                filterComponent?.currentValue
            "></hbr-list-replication-rule>
    </div>
    <div
        class="col-lg-12 col-md-12 col-sm-12 col-xs-12 jobList"
        [hidden]="hiddenJobList">
        <div
            *ngIf="withReplicationJob"
            class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="row flex-items-xs-between jobsRow">
                <h5 class="flex-items-xs-bottom option-left-down">
                    {{ 'REPLICATION.REPLICATION_EXECUTIONS' | translate }}
                </h5>
                <div
                    class="row flex-items-xs-between flex-items-xs-bottom fiter-task">
                    <div class="execution-select">
                        <div
                            class="select filter-tag"
                            [hidden]="!isOpenFilterTag">
                            <clr-select-container>
                                <select
                                    clrSelect
                                    (change)="doFilterJob($event)">
                                    <option value="trigger">
                                        {{
                                            'REPLICATION.REPLICATION_TRIGGER'
                                                | translate
                                        }}
                                    </option>
                                    <option value="status">
                                        {{ 'REPLICATION.STATUS' | translate }}
                                    </option>
                                </select>
                            </clr-select-container>
                        </div>
                        <hbr-filter
                            id="filter-executions"
                            [withDivider]="true"
                            (openFlag)="openFilter($event)"
                            filterPlaceholder="{{
                                'REPLICATION.FILTER_EXECUTIONS_PLACEHOLDER'
                                    | translate
                            }}"
                            (filterEvt)="doSearchExecutions($event)"
                            [currentValue]="currentTerm"></hbr-filter>
                        <span class="refresh-btn">
                            <clr-icon
                                shape="refresh"
                                (click)="refreshJobs()"></clr-icon>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div
            *ngIf="withReplicationJob"
            class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <clr-datagrid
                [(clrDgSelected)]="selectedRow"
                [clrDgLoading]="jobsLoading"
                (clrDgRefresh)="clrLoadJobs(true, $event)">
                <clr-dg-action-bar>
                    <div class="btn-group">
                        <button
                            type="button"
                            class="btn btn-secondary"
                            *ngIf="isSystemAdmin"
                            [disabled]="
                                !canStop() ||
                                !(jobs && jobs.length > 0) ||
                                isStopOnGoing ||
                                !selectedRow.length
                            "
                            (click)="openStopExecutionsDialog(selectedRow)">
                            {{ 'REPLICATION.STOPJOB' | translate }}
                        </button>
                    </div>
                </clr-dg-action-bar>
                <clr-dg-column [clrDgSortBy]="'id'">{{
                    'REPLICATION.ID' | translate
                }}</clr-dg-column>
                <clr-dg-column [clrDgField]="'status'">{{
                    'REPLICATION.STATUS' | translate
                }}</clr-dg-column>
                <clr-dg-column [clrDgField]="'trigger'">{{
                    'REPLICATION.REPLICATION_TRIGGER' | translate
                }}</clr-dg-column>
                <clr-dg-column [clrDgSortBy]="creationTimeComparator">{{
                    'REPLICATION.CREATION_TIME' | translate
                }}</clr-dg-column>
                <clr-dg-column>{{
                    'REPLICATION.DURATION' | translate
                }}</clr-dg-column>
                <clr-dg-column>{{
                    'REPLICATION.SUCCESS_RATE' | translate
                }}</clr-dg-column>
                <clr-dg-column>{{
                    'REPLICATION.TOTAL' | translate
                }}</clr-dg-column>
                <clr-dg-placeholder>{{
                    'REPLICATION.JOB_PLACEHOLDER' | translate
                }}</clr-dg-placeholder>
                <clr-dg-row *ngFor="let j of jobs" [clrDgItem]="j">
                    <clr-dg-cell>
                        <a href="javascript:void(0)" (click)="goToLink(j.id)">{{
                            j.id
                        }}</a>
                    </clr-dg-cell>
                    <clr-dg-cell>
                        {{ getStatusStr(j.status) }}
                        <clr-tooltip>
                            <clr-icon
                                *ngIf="j.status_text"
                                clrTooltipTrigger
                                shape="info-circle"
                                size="20"></clr-icon>
                            <clr-tooltip-content
                                [clrPosition]="'left'"
                                clrSize="md"
                                *clrIfOpen>
                                <span>{{ j.status_text }}</span>
                            </clr-tooltip-content>
                        </clr-tooltip>
                    </clr-dg-cell>
                    <clr-dg-cell>{{ j.trigger }}</clr-dg-cell>
                    <clr-dg-cell>{{
                        j.start_time | harborDatetime: 'short'
                    }}</clr-dg-cell>
                    <clr-dg-cell>{{ getDuration(j) }}</clr-dg-cell>
                    <clr-dg-cell>
                        {{
                            (j.status === 'InProgress' || j.status === 'Failed'
                                ? j.total > 0
                                    ? j.succeed / j.total
                                    : 0
                                : j.total > 0
                                ? j.succeed / j.total
                                : 1
                            ) | percent
                        }}
                    </clr-dg-cell>
                    <clr-dg-cell>{{ j.total }}</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="showPaginationIndex"
                            >{{ pagination.firstItem + 1 }} -
                            {{ pagination.lastItem + 1 }}
                            {{ 'REPLICATION.OF' | translate }}</span
                        >
                        {{ totalCount }} {{ 'REPLICATION.ITEMS' | translate }}
                    </clr-dg-pagination>
                </clr-dg-footer>
            </clr-datagrid>
        </div>
    </div>
    <hbr-create-edit-rule
        *ngIf="isSystemAdmin"
        [withAdmiral]="withAdmiral"
        (goToRegistry)="goRegistry()"
        (reload)="reloadRules($event)"></hbr-create-edit-rule>
    <confirmation-dialog
        #replicationConfirmDialog
        (confirmAction)="confirmReplication($event)"></confirmation-dialog>
    <confirmation-dialog
        #StopConfirmDialog
        (confirmAction)="confirmStop($event)"></confirmation-dialog>
</div>
