<div class="replication-tasks mt-1">
    <section class="overview-section">
        <div class="title-wrapper">
            <div>
                <div>
                    <a (click)="onBack()" class="onBack"
                        ><{{ 'P2P_PROVIDER.P2P_PROVIDER' | translate }}</a
                    >
                </div>
                <div class="title-block">
                    <div>
                        <h2 class="custom-h2 h2-style">
                            {{ 'P2P_PROVIDER.EXECUTIONS' | 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 && isInProgress()">
                            <span class="spinner spinner-inline"></span>
                            <span>{{
                                'REPLICATION.IN_PROGRESS' | translate
                            }}</span>
                        </div>
                        <div
                            class="status-success"
                            *ngIf="execution && isSuccess()">
                            <clr-icon
                                size="18"
                                shape="success-standard"
                                class="color-green"></clr-icon>
                            <span>{{ 'REPLICATION.SUCCESS' | translate }}</span>
                        </div>
                        <div
                            class="status-failed"
                            *ngIf="execution && isFailed()">
                            <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]="
                                !hasUpdatePermission ||
                                stopOnGoing ||
                                !canStop()
                            ">
                            {{ 'REPLICATION.STOPJOB' | translate }}
                        </button>
                        <span
                            class="spinner spinner-inline"
                            [hidden]="inProgress === false"></span>
                    </div>
                </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>
        <clr-datagrid
            (clrDgRefresh)="clrLoadTasks(true, $event)"
            [clrDgLoading]="loading">
            <clr-dg-action-bar>
                <div class="row flex-end">
                    <div
                        class="select filter-tag clr-select-wrapper"
                        [hidden]="!isOpenFilterTag">
                        <select
                            id="selectKey"
                            (change)="selectFilterKey($event)">
                            <option value="id">
                                {{
                                    'REPLICATION.TASK_ID'
                                        | translate
                                        | lowercase
                                }}
                            </option>
                            <option value="execution_id">
                                {{ 'P2P_PROVIDER.ID' | translate | lowercase }}
                            </option>
                            <option value="status">
                                {{
                                    'REPLICATION.STATUS' | translate | lowercase
                                }}
                            </option>
                        </select>
                    </div>
                    <hbr-filter
                        (filterEvt)="doFilter($event)"
                        [currentValue]="searchString"
                        id="filter-executions"
                        [withDivider]="true"
                        (openFlag)="openFilter($event)"
                        filterPlaceholder="{{
                            'REPLICATION.FILTER_PLACEHOLDER' | translate
                        }}"></hbr-filter>
                    <span class="refresh-btn">
                        <clr-icon
                            shape="refresh"
                            (click)="refreshTasks()"
                            [hidden]="loading"></clr-icon>
                    </span>
                </div>
            </clr-dg-action-bar>
            <clr-dg-column>{{
                'REPLICATION.TASK_ID' | translate
            }}</clr-dg-column>
            <clr-dg-column>{{ 'P2P_PROVIDER.ID' | translate }}</clr-dg-column>
            <clr-dg-column>{{
                'REPLICATION.STATUS' | translate
            }}</clr-dg-column>
            <clr-dg-column>{{
                'P2P_PROVIDER.ARTIFACT' | translate
            }}</clr-dg-column>
            <clr-dg-column>{{
                'P2P_PROVIDER.DIGEST' | translate
            }}</clr-dg-column>
            <clr-dg-column>{{ 'P2P_PROVIDER.TYPE' | translate }}</clr-dg-column>
            <clr-dg-column>{{
                'REPLICATION.CREATION_TIME' | translate
            }}</clr-dg-column>
            <clr-dg-column>{{
                'REPLICATION.DURATION' | 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" [clrDgItem]="t">
                <clr-dg-cell>{{ t.id }}</clr-dg-cell>
                <clr-dg-cell>{{ t.execution_id }}</clr-dg-cell>
                <clr-dg-cell
                    >{{ t.status }}
                    <clr-tooltip>
                        <clr-icon
                            *ngIf="t.status_message"
                            clrTooltipTrigger
                            shape="info-circle"
                            size="20"></clr-icon>
                        <clr-tooltip-content
                            [clrPosition]="'left'"
                            clrSize="md"
                            *clrIfOpen>
                            <span>{{ t.status_message }}</span>
                        </clr-tooltip-content>
                    </clr-tooltip>
                </clr-dg-cell>
                <clr-dg-cell>
                    <span>{{ t.extra_attrs?.artifact }}</span>
                </clr-dg-cell>
                <clr-dg-cell>
                    <span>{{ t.extra_attrs?.digest }}</span>
                </clr-dg-cell>
                <clr-dg-cell>
                    <span>{{ t.extra_attrs?.kind }}</span>
                </clr-dg-cell>

                <clr-dg-cell>{{
                    t.start_time | harborDatetime: 'short'
                }}</clr-dg-cell>
                <clr-dg-cell>{{ getDuration(t) }}</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"
                    [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 }}
                        {{ 'REPLICATION.OF' | translate }}</span
                    >
                    {{ totalCount }} {{ 'REPLICATION.ITEMS' | translate }}
                </clr-dg-pagination>
            </clr-dg-footer>
        </clr-datagrid>
    </div>
</div>
