<div class="replication-tasks">
    <section class="overview-section">
        <div class="title-wrapper">
            <div>
                <a (click)="onBack()" class="onback"
                    ><{{ 'PROJECT_DETAIL.REPLICATION' | translate }}</a
                >
            </div>
            <div class="title-block">
                <div>
                    <h2 class="custom-h2 h2-style">
                        {{ 'REPLICATION.REPLICATION_EXECUTION' | translate }}
                    </h2>
                    <span class="id-divider"></span>
                    <h2 class="custom-h2 h2-style">{{ executionId }}</h2>
                </div>
                <div class="margin-top-16px">
                    <div
                        class="status-progress"
                        *ngIf="
                            execution && execution['status'] === 'InProgress'
                        ">
                        <span class="spinner spinner-inline"></span>
                        <span>{{ 'REPLICATION.IN_PROGRESS' | translate }}</span>
                    </div>
                    <div
                        class="status-success"
                        *ngIf="execution && execution['status'] === 'Succeed'">
                        <clr-icon
                            size="18"
                            shape="success-standard"
                            class="color-green"></clr-icon>
                        <span>{{ 'REPLICATION.SUCCESS' | translate }}</span>
                    </div>
                    <div
                        class="status-failed"
                        *ngIf="execution && execution['status'] === 'Failed'">
                        <clr-icon
                            size="18"
                            shape="error-standard"
                            class="color-red"></clr-icon>
                        <span>{{ 'REPLICATION.FAILURE' | translate }}</span>
                    </div>
                </div>
                <div class="button-stop">
                    <button
                        class="btn btn-primary"
                        (click)="stopJob()"
                        [disabled]="stopOnGoing || !canStop()">
                        {{ 'REPLICATION.STOPJOB' | translate }}
                    </button>
                    <span
                        class="spinner spinner-inline"
                        [hidden]="inProgress === false"></span>
                </div>
            </div>
        </div>
        <div class="execution-block">
            <div class="executions-detail">
                <div>
                    <label
                        >{{ 'REPLICATION.TRIGGER_MODE' | translate }} :</label
                    >
                    <span>{{ trigger | translate }}</span>
                </div>
                <div>
                    <label
                        >{{ 'REPLICATION.CREATION_TIME' | translate }} :</label
                    >
                    <span>{{ startTime | harborDatetime : 'short' }}</span>
                </div>
            </div>
            <div class="flex-block">
                <section class="execution-detail-label">
                    <section class="detail-row">
                        <div class="num-success common-style"></div>
                        <label class="detail-span">{{
                            'REPLICATION.SUCCESS' | translate
                        }}</label>
                        <div class="execution-details">{{ successNum }}</div>
                    </section>
                    <section class="detail-row">
                        <div class="num-failed common-style"></div>
                        <label class="detail-span">{{
                            'REPLICATION.FAILURE' | translate
                        }}</label>
                        <div class="execution-details">{{ failedNum }}</div>
                    </section>
                    <section class="detail-row">
                        <div class="num-progress common-style"></div>
                        <label class="detail-span">{{
                            'REPLICATION.IN_PROGRESS' | translate
                        }}</label>
                        <div class="execution-details">{{ progressNum }}</div>
                    </section>
                    <section class="detail-row">
                        <div class="num-stopped common-style"></div>
                        <label class="detail-span">{{
                            'REPLICATION.STOPPED' | translate
                        }}</label>
                        <div class="execution-details">{{ stoppedNum }}</div>
                    </section>
                </section>
            </div>
        </div>
    </section>

    <div class="tasks-detail">
        <h3 class="modal-title">{{ 'P2P_PROVIDER.TASKS' | translate }}</h3>
        <div class="row flex-items-xs-between flex-items-xs-bottom">
            <div class="action-select">
                <div
                    class="select filter-tag clr-select-wrapper"
                    [hidden]="!isOpenFilterTag">
                    <select class="clr-select" (change)="selectFilter($event)">
                        <option value="resourceType">
                            {{ 'REPLICATION.RESOURCE_TYPE' | translate }}
                        </option>
                        <option value="status">
                            {{ 'REPLICATION.STATUS' | translate }}
                        </option>
                    </select>
                </div>
                <hbr-filter
                    [withDivider]="true"
                    (openFlag)="openFilter($event)"
                    filterPlaceholder="{{
                        'REPLICATION.FILTER_PLACEHOLDER' | translate
                    }}"
                    (filterEvt)="doSearch($event)"
                    [currentValue]="searchTask"></hbr-filter>
                <span class="refresh-btn">
                    <clr-icon
                        shape="refresh"
                        (click)="refreshTasks()"></clr-icon>
                </span>
            </div>
        </div>
        <clr-datagrid
            (clrDgRefresh)="clrLoadTasks(true, $event)"
            [clrDgLoading]="loading">
            <clr-dg-column>{{
                'REPLICATION.TASK_ID' | translate
            }}</clr-dg-column>
            <clr-dg-column class="resource-width">{{
                'REPLICATION.RESOURCE_TYPE' | translate
            }}</clr-dg-column>
            <clr-dg-column [clrDgField]="'src_resource'">{{
                'REPLICATION.SOURCE' | translate
            }}</clr-dg-column>
            <clr-dg-column [clrDgField]="'dst_resource'">{{
                'REPLICATION.DESTINATION' | translate
            }}</clr-dg-column>
            <clr-dg-column [clrDgField]="'operation'">{{
                'REPLICATION.OPERATION' | translate
            }}</clr-dg-column>
            <clr-dg-column>{{
                'REPLICATION.STATUS' | translate
            }}</clr-dg-column>
            <clr-dg-column [clrDgSortBy]="startTimeComparator">{{
                'REPLICATION.CREATION_TIME' | translate
            }}</clr-dg-column>
            <clr-dg-column [clrDgSortBy]="endTimeComparator">{{
                'REPLICATION.END_TIME' | translate
            }}</clr-dg-column>
            <clr-dg-column>{{ 'REPLICATION.LOGS' | translate }}</clr-dg-column>
            <clr-dg-placeholder>{{
                'P2P_PROVIDER.TASKS_PLACEHOLDER' | translate
            }}</clr-dg-placeholder>
            <clr-dg-row *ngFor="let t of tasks">
                <clr-dg-cell>{{ t.id }}</clr-dg-cell>
                <clr-dg-cell class="resource-width">{{
                    t.resource_type
                }}</clr-dg-cell>
                <clr-dg-cell>{{ t.src_resource }}</clr-dg-cell>
                <clr-dg-cell>{{ t.dst_resource }}</clr-dg-cell>
                <clr-dg-cell>{{ t.operation }}</clr-dg-cell>
                <clr-dg-cell>{{ getStatusStr(t.status) }}</clr-dg-cell>
                <clr-dg-cell>{{
                    t.start_time | harborDatetime : 'short'
                }}</clr-dg-cell>
                <clr-dg-cell>{{
                    t.end_time | harborDatetime : 'short'
                }}</clr-dg-cell>
                <clr-dg-cell>
                    <a
                        rel="noopener noreferrer"
                        target="_blank"
                        [href]="viewLog(t.id)"
                        *ngIf="t.status !== 'Initialized'">
                        <clr-icon shape="list"></clr-icon>
                    </a>
                </clr-dg-cell>
            </clr-dg-row>
            <clr-dg-footer>
                <clr-dg-pagination
                    #pagination
                    [(clrDgPage)]="currentPage"
                    [clrDgTotalItems]="totalCount"
                    [clrDgPageSize]="pageSize">
                    <clr-dg-page-size
                        [clrPageSizeOptions]="clrPageSizeOptions"
                        >{{
                            'PAGINATION.PAGE_SIZE' | translate
                        }}</clr-dg-page-size
                    >
                    <span *ngIf="totalCount"
                        >{{ pagination.firstItem + 1 }} -
                        {{ pagination.lastItem + 1 }}
                        {{ 'REPLICATION.OF' | translate }} </span
                    >{{ totalCount }} {{ 'REPLICATION.ITEMS' | translate }}
                </clr-dg-pagination>
            </clr-dg-footer>
        </clr-datagrid>
    </div>
</div>
