<div class="row">
    <h4 class="mt-1">
        <span>{{'P2P_PROVIDER.POLICIES' | translate}}</span>
        <clr-tooltip>
            <clr-icon class="color-57" clrTooltipTrigger shape="info-circle" size="24"></clr-icon>
            <clr-tooltip-content clrPosition="top-right" clrSize="lg" *clrIfOpen>
                {{'P2P_PROVIDER.PREHEAT_EXPLAIN' | translate}}
            </clr-tooltip-content>
        </clr-tooltip>
    </h4>
    <clr-datagrid (clrDgRefresh)="getPolicies($event)" (clrDgSingleSelectedChange)="refreshJobs($event)" [clrDgLoading]="loading" [(clrDgSingleSelected)]="selectedRow">
        <clr-dg-action-bar>
            <div class="clr-row">
                <div class="clr-col-7">
                    <button (click)="newPolicy()" [disabled]="!hasCreatPermission || !hasAddModalInit" [clrLoading]="addBtnState"
                            id="new-policy" type="button" class="btn  btn-secondary">
                        <clr-icon shape="plus" size="16"></clr-icon>
                        {{'P2P_PROVIDER.NEW_POLICY' | translate}}
                    </button>
                    <clr-dropdown [clrCloseMenuOnItemClick]="false" class="btn  btn-link" clrDropdownTrigger>
                        <span id="action-policy">{{'MEMBER.ACTION' | translate}}
                            <clr-icon class="clr-icon" shape="caret down"></clr-icon></span>
                        <clr-dropdown-menu *clrIfOpen>
                            <button clrDropdownItem
                                    class="btn  btn-secondary"
                                    [disabled]="!(selectedRow && selectedRow.enabled) || !hasUpdatePermission || executing"
                                    (click)="executePolicy()">
                                <span>
                                     <clr-icon class="margin-top-0" size="16" shape="play"></clr-icon>
                                     <span id="execute-policy"
                                           class="margin-left-5px">{{'P2P_PROVIDER.EXECUTE' | translate}}</span>
                                </span>
                            </button>
                            <button clrDropdownItem
                                    class="btn  btn-secondary"
                                    [disabled]="!selectedRow  || !hasUpdatePermission"
                                    (click)="editPolicy()">
                                <span>
                                    <clr-icon class="margin-top-0" size="16" shape="pencil"></clr-icon>
                                    <span id="edit-policy" class="margin-left-5px">{{'BUTTON.EDIT' | translate}}</span>
                                </span>
                            </button>
                            <button class="btn  btn-secondary" clrDropdownItem (click)="switchStatus()"
                                    [disabled]="!selectedRow || !hasUpdatePermission">
                                  <span id="toggle-policy">
                                       <span *ngIf="selectedRow && !selectedRow.enabled">
                                           <clr-icon class="margin-top-2" size="16" shape="success-standard"></clr-icon>
                                           <span class="margin-left-5px">{{'WEBHOOK.ENABLED_BUTTON' | translate}}</span>
                                       </span>
                                       <span *ngIf="!(selectedRow && !selectedRow.enabled)">
                                           <clr-icon class="margin-top-2" size="16" shape="ban"></clr-icon>
                                          <span class="margin-left-5px">{{'WEBHOOK.DISABLED_BUTTON' | translate}}</span>
                                       </span>
                                  </span>
                            </button>
                            <div class="dropdown-divider"></div>
                            <button clrDropdownItem (click)="deletePolicy()"
                                    class="btn  btn-secondary"
                                    [disabled]="!selectedRow || !hasDeletePermission">
                                <span>
                                    <clr-icon class="margin-top-0" size="16" shape="times"></clr-icon>
                                    <span id="delete-policy"
                                          class="margin-left-5px">{{'BUTTON.DELETE' | translate}}</span>
                                </span>
                            </button>
                        </clr-dropdown-menu>
                    </clr-dropdown>
                </div>
                <div class="clr-col-5">
                    <div class="action-head-pos">
                            <span class="refresh-btn">
                                 <clr-icon shape="refresh" (click)="refresh()" [hidden]="loading"></clr-icon>
                            </span>
                    </div>
                </div>
            </div>
        </clr-dg-action-bar>
        <clr-dg-column [clrDgField]="'name'">{{'P2P_PROVIDER.NAME' | translate}}</clr-dg-column>
        <clr-dg-column>{{'P2P_PROVIDER.ENABLED' | translate}}</clr-dg-column>
        <clr-dg-column>{{'P2P_PROVIDER.PROVIDER' | translate}}</clr-dg-column>
        <clr-dg-column>{{'P2P_PROVIDER.FILTERS' | translate}}</clr-dg-column>
        <clr-dg-column>{{'P2P_PROVIDER.TRIGGER' | translate}}</clr-dg-column>
        <clr-dg-column [clrDgSortBy]="'creation_time'">{{'P2P_PROVIDER.CREATED' | translate}}</clr-dg-column>
        <clr-dg-column>{{'P2P_PROVIDER.DESCRIPTION' | translate}}</clr-dg-column>
        <clr-dg-placeholder>
            {{'P2P_PROVIDER.NO_POLICY' | translate}}
        </clr-dg-placeholder>
        <clr-dg-row *ngFor="let p of policyList" [clrDgItem]="p">
            <clr-dg-cell>{{p.name}}</clr-dg-cell>
            <clr-dg-cell>
                <div *ngIf="p.enabled" class="icon-wrap">
                    <clr-icon shape="check-circle" size="20" class="is-success enabled-icon"></clr-icon>
                    <span class="margin-left-5px">{{'WEBHOOK.ENABLED' | translate}}</span>
                </div>
                <div *ngIf="!p.enabled" class="icon-wrap">
                    <clr-icon shape="exclamation-triangle" size="20" class="is-warning"></clr-icon>
                    <span class="margin-left-5px">{{'WEBHOOK.DISABLED' | translate}}</span>
                </div>
            </clr-dg-cell>
            <clr-dg-cell>{{p.provider_name}}</clr-dg-cell>
            <clr-dg-cell>
                <div>
                    <span *ngIf="getValue(p.filters, 'repository')">
                        <span class="filter-title">{{'P2P_PROVIDER.REPOS' | translate}}</span>
                        <span class="opacity08">: {{getValue(p.filters, 'repository')}}</span>
                    </span>
                    <span *ngIf="getValue(p.filters, 'tag')"
                          class="margin-left-10px">
                        <span class="filter-title">{{'P2P_PROVIDER.TAGS' | translate}}</span>
                        <span class="opacity08">: {{getValue(p.filters, 'tag')}}</span>
                    </span>
                    <span *ngIf="getValue(p.filters, 'label')"
                          class="margin-left-10px">
                        <span class="filter-title">{{'P2P_PROVIDER.LABELS' | translate}}</span>
                        <span class="opacity08">: {{getValue(p.filters, 'label')}}</span>
                    </span>
                </div>
                <div class="margin-top-5px" *ngIf="getValue(p.filters, 'signature')">
                    <span class="filter-title">{{'P2P_PROVIDER.ONLY_SIGNED' | translate}}</span>
                </div>
                <div class="margin-top-5px" *ngIf="getValue(p.filters, 'vulnerability')">
                    <span>{{'P2P_PROVIDER.START_TEXT' | translate}}&nbsp;</span>
                    <span class="opacity08">{{severity_map[getValue(p.filters, 'vulnerability')]}}</span>
                    <span>&nbsp;{{'P2P_PROVIDER.EDN_TEXT' | translate}}</span>
                </div>
            </clr-dg-cell>
            <clr-dg-cell  class="no-wrapper">
                {{getTriggerTypeI18n(p.trigger) | translate}}
                <clr-signpost *ngIf="isScheduled(p.trigger)">
                    <clr-signpost-content *clrIfOpen>
                       {{getScheduledCron(p.trigger)}}
                    </clr-signpost-content>
                </clr-signpost>
                <clr-signpost *ngIf="isEventBased(p.trigger)">
                    <clr-signpost-content *clrIfOpen>
                        <div>{{'P2P_PROVIDER.EVENT_BASED_EXPLAIN_LINE1' | translate}}</div>
                        <div>{{'P2P_PROVIDER.EVENT_BASED_EXPLAIN_LINE2' | translate}}</div>
                        <div>{{'P2P_PROVIDER.EVENT_BASED_EXPLAIN_LINE3' | translate}}</div>
                        <div>{{'P2P_PROVIDER.EVENT_BASED_EXPLAIN_LINE4' | translate}}</div>
                    </clr-signpost-content>
                </clr-signpost>
            </clr-dg-cell>
            <clr-dg-cell>{{p.creation_time | harborDatetime: 'short'}}</clr-dg-cell>
            <clr-dg-cell>{{p.description}}</clr-dg-cell>
        </clr-dg-row>
        <clr-dg-footer>
            <clr-dg-pagination #pagination [clrDgPageSize]="policyPageSize" [(clrDgPage)]="policyPage" [clrDgTotalItems]="totalPolicy">
                <clr-dg-page-size [clrPageSizeOptions]="[10,25,50]">{{"PAGINATION.PAGE_SIZE" | translate}}</clr-dg-page-size>
                <span *ngIf="totalPolicy">{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} {{'DESTINATION.OF' | translate}}</span>
                {{totalPolicy}} {{'DESTINATION.ITEMS' | translate}}
            </clr-dg-pagination>
        </clr-dg-footer>
    </clr-datagrid>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 " *ngIf="selectedRow">
    <h4 class="mt-2">{{'P2P_PROVIDER.EXECUTIONS' | translate}}</h4>
    <clr-datagrid [(clrDgSingleSelected)]="selectedExecutionRow" [clrDgLoading]="jobsLoading"
                  (clrDgRefresh)="clrLoadJobs(null,true, $event)">
        <clr-dg-action-bar>
            <div class="clr-row">
                <div class="clr-col-7">
                    <button type="button" class="btn  btn-secondary" [disabled]="!hasUpdatePermission || !selectedExecutionRow || jobsLoading || stopLoading || !canStop()"
                            (click)="openStopExecutionsDialog()">{{'REPLICATION.STOPJOB' | translate}}</button>
                </div>
                <div class="clr-col-5 flex-end">
                    <div class="select filter-tag clr-select-wrapper" [hidden]="!isOpenFilterTag">
                        <select id="selectKey" (change)="selectFilterKey($event)">
                            <option value="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_EXECUTIONS_PLACEHOLDER" | translate}}'></hbr-filter>
                    <span class="refresh-btn">
                                 <clr-icon shape="refresh" (click)="refreshJobs()" [hidden]="loading"></clr-icon>
                            </span>
                </div>
            </div>
        </clr-dg-action-bar>
        <clr-dg-column>{{'REPLICATION.ID' | translate}}</clr-dg-column>
        <clr-dg-column>{{'REPLICATION.STATUS' | translate}}</clr-dg-column>
        <clr-dg-column>{{'P2P_PROVIDER.TRIGGER' | 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.SUCCESS_RATE' | translate}}</clr-dg-column>
        <clr-dg-column>{{'P2P_PROVIDER.PROVIDER_TYPE' | translate}}</clr-dg-column>
        <clr-dg-placeholder>{{'P2P_PROVIDER.JOB_PLACEHOLDER' | translate }}</clr-dg-placeholder>
        <clr-dg-row *ngFor="let execution of executionList" [clrDgItem]="execution">
            <clr-dg-cell>
                <a href="javascript:void(0)" (click)="goToLink(execution.id)">{{execution.id}}</a>
            </clr-dg-cell>
            <clr-dg-cell>
                {{execution.status}}
                <clr-tooltip>
                    <clr-icon *ngIf="execution.status_message" clrTooltipTrigger shape="info-circle" size="20"></clr-icon>
                    <clr-tooltip-content [clrPosition]="'left'" clrSize="md" *clrIfOpen>
                        <span>{{execution.status_message}}</span>
                    </clr-tooltip-content>
                </clr-tooltip>
            </clr-dg-cell>
            <clr-dg-cell>{{getTriggerTypeI18nForExecution(execution.trigger) | translate}}</clr-dg-cell>
            <clr-dg-cell>{{execution.start_time | harborDatetime: 'short'}}</clr-dg-cell>
            <clr-dg-cell>{{getDuration(execution)}}</clr-dg-cell>
            <clr-dg-cell>{{getSuccessRate(execution.metrics) | percent}}</clr-dg-cell>
            <clr-dg-cell>{{execution.vendor_type}}</clr-dg-cell>
        </clr-dg-row>
        <clr-dg-footer>

            <clr-dg-pagination #pagination [(clrDgPage)]="currentExecutionPage" [clrDgPageSize]="pageSize"
                               [clrDgTotalItems]="totalExecutionCount">
                <clr-dg-page-size [clrPageSizeOptions]="[15,25,50]">{{"PAGINATION.PAGE_SIZE" | translate}}</clr-dg-page-size>
                <span *ngIf="totalExecutionCount">{{pagination.firstItem + 1}}
                    - {{pagination.lastItem + 1}} {{'REPLICATION.OF' | translate}}</span>
                {{totalExecutionCount}} {{'REPLICATION.ITEMS' | translate}}
            </clr-dg-pagination>
        </clr-dg-footer>
    </clr-datagrid>
</div>
<add-p2p-policy (hasInit)="addModalInit()" [providers]="providers" (notify)="success($event)"></add-p2p-policy>
<confirmation-dialog (confirmAction)="confirmSwitch($event)" #confirmationDialogComponent></confirmation-dialog>


