<clr-modal
    [(clrModalOpen)]="isOpen"
    [clrModalStaticBackdrop]="staticBackdrop"
    [clrModalClosable]="closable">
    <h3 *ngIf="isEdit" class="modal-title">
        {{ 'P2P_PROVIDER.EDIT_POLICY' | translate }}
    </h3>
    <h3 *ngIf="!isEdit" class="modal-title">
        {{ 'P2P_PROVIDER.ADD_POLICY' | translate }}
    </h3>
    <div class="modal-body">
        <div class="align-center">
            <inline-alert class="modal-title"></inline-alert>
            <form #policyForm="ngForm" class="clr-form clr-form-horizontal">
                <section class="form-block">
                    <!-- provider -->
                    <clr-select-container>
                        <label class="clr-control-label required width-6rem">{{
                            'P2P_PROVIDER.PROVIDER' | translate
                        }}</label>
                        <select
                            class="width-380"
                            [disabled]="loading"
                            [class.clr-error]="
                                provider.errors &&
                                provider.errors.required &&
                                (provider.dirty || provider.touched)
                            "
                            #provider="ngModel"
                            clrSelect
                            name="provider"
                            id="provider"
                            [(ngModel)]="policy.provider_id"
                            required>
                            <option class="display-none" value=""></option>
                            <option
                                [selected]="policy.provider_id === provider.id"
                                *ngFor="let provider of providers"
                                value="{{ provider.id }}">
                                {{ provider.provider }}
                            </option>
                        </select>
                        <clr-control-error
                            *ngIf="
                                provider.errors &&
                                provider.errors.required &&
                                (provider.dirty || provider.touched)
                            ">
                            {{ 'P2P_PROVIDER.PROVIDER_REQUIRED' | translate }}
                        </clr-control-error>
                    </clr-select-container>
                    <div
                        class="clr-form-control mt-0"
                        *ngIf="!(providers && providers.length)">
                        <label class="clr-control-label width-6rem"></label>
                        <div class="clr-control-container width-380">
                            <div class="space-between">
                                <span
                                    class="alert-label"
                                    *ngIf="isSystemAdmin()"
                                    >{{
                                        'P2P_PROVIDER.NO_PROVIDER' | translate
                                    }}</span
                                >
                                <span
                                    class="alert-label"
                                    *ngIf="!isSystemAdmin()"
                                    >{{
                                        'P2P_PROVIDER.NEED_HELP' | translate
                                    }}</span
                                >
                                <a
                                    *ngIf="isSystemAdmin()"
                                    class="go-link"
                                    routerLink="/harbor/distribution/instances"
                                    >{{
                                        'P2P_PROVIDER.PROVIDER' | translate
                                    }}</a
                                >
                            </div>
                        </div>
                    </div>

                    <!-- name -->
                    <div class="clr-form-control">
                        <label
                            for="name"
                            class="clr-control-label required width-6rem"
                            >{{ 'P2P_PROVIDER.NAME' | translate }}</label
                        >
                        <div
                            class="clr-control-container"
                            [class.clr-error]="
                                ((name.dirty || name.touched) &&
                                    name.invalid) ||
                                isNameExisting
                            ">
                            <div class="clr-input-wrapper">
                                <input
                                    pattern="^[A-Za-z0-9]+(?:[._-][A-Za-z0-9]+)*$"
                                    [disabled]="loading"
                                    autocomplete="off"
                                    class="clr-input width-380"
                                    type="text"
                                    id="name"
                                    [(ngModel)]="policy.name"
                                    size="30"
                                    name="name"
                                    #name="ngModel"
                                    required
                                    (input)="inputName()" />
                                <clr-icon
                                    class="clr-validate-icon"
                                    shape="exclamation-circle"></clr-icon>
                                <span
                                    class="spinner spinner-inline"
                                    [hidden]="!checkNameOnGoing"></span>
                            </div>
                            <clr-control-error
                                *ngIf="
                                    ((name.dirty || name.touched) &&
                                        name.invalid) ||
                                    isNameExisting
                                ">
                                <span
                                    *ngIf="
                                        !(
                                            (name.dirty || name.touched) &&
                                            name.invalid
                                        ) && isNameExisting
                                    "
                                    >{{
                                        'SCANNER.NAME_EXISTS' | translate
                                    }}</span
                                >
                                <span
                                    *ngIf="
                                        (name.dirty || name.touched) &&
                                        name.invalid
                                    "
                                    >{{
                                        'P2P_PROVIDER.NAME_TOOLTIP' | translate
                                    }}</span
                                >
                            </clr-control-error>
                        </div>
                    </div>
                    <!-- description -->
                    <div class="clr-form-control">
                        <label
                            for="description"
                            class="clr-control-label width-6rem"
                            >{{ 'P2P_PROVIDER.DESCRIPTION' | translate }}</label
                        >
                        <div class="clr-control-container">
                            <textarea
                                autocomplete="off"
                                class="clr-textarea width-380"
                                type="text"
                                id="description"
                                #description="ngModel"
                                [disabled]="loading"
                                [(ngModel)]="policy.description"
                                name="description"></textarea>
                        </div>
                    </div>
                    <!-- filters-repo -->
                    <div class="clr-form-control">
                        <label
                            for="repo"
                            class="clr-control-label width-6rem"
                            >{{ 'P2P_PROVIDER.FILTERS' | translate }}</label
                        >
                        <div
                            class="clr-control-container"
                            [class.clr-error]="
                                repo.errors &&
                                repo.errors.required &&
                                (repo.dirty || repo.touched)
                            ">
                            <div class="clr-input-wrapper">
                                <label class="sub-label required">{{
                                    'P2P_PROVIDER.REPOS' | translate
                                }}</label>
                                <input
                                    placeholder="**"
                                    [disabled]="loading"
                                    autocomplete="off"
                                    class="clr-input width-290"
                                    type="text"
                                    id="repo"
                                    [(ngModel)]="repos"
                                    size="30"
                                    name="repo"
                                    #repo="ngModel"
                                    required />
                                <clr-icon
                                    class="clr-validate-icon"
                                    shape="exclamation-circle"></clr-icon>
                            </div>
                            <clr-control-helper
                                class="margin-left-90px opacity-08"
                                >{{
                                    'TAG_RETENTION.REP_SEPARATOR' | translate
                                }}</clr-control-helper
                            >
                            <clr-control-error
                                class="margin-left-90px"
                                *ngIf="
                                    repo.errors &&
                                    repo.errors.required &&
                                    (repo.dirty || repo.touched)
                                ">
                                {{ 'P2P_PROVIDER.REPO_REQUIRED' | translate }}
                            </clr-control-error>
                        </div>
                    </div>
                    <!-- filters-tag -->
                    <div class="clr-form-control margin-top-06">
                        <label for="repo" class="width-6rem"></label>
                        <div
                            class="clr-control-container"
                            [class.clr-error]="
                                tag.errors &&
                                tag.errors.required &&
                                (tag.dirty || tag.touched)
                            ">
                            <div class="clr-input-wrapper">
                                <label class="sub-label required">{{
                                    'P2P_PROVIDER.TAGS' | translate
                                }}</label>
                                <input
                                    placeholder="**"
                                    [disabled]="loading"
                                    autocomplete="off"
                                    class="clr-input width-290"
                                    type="text"
                                    id="tag"
                                    [(ngModel)]="tags"
                                    size="30"
                                    name="tag"
                                    #tag="ngModel"
                                    required />
                                <clr-icon
                                    class="clr-validate-icon"
                                    shape="exclamation-circle"></clr-icon>
                            </div>
                            <clr-control-helper
                                class="margin-left-90px opacity-08"
                                >{{
                                    'P2P_PROVIDER.TAG_SEPARATOR' | translate
                                }}</clr-control-helper
                            >
                            <clr-control-error
                                class="margin-left-90px"
                                *ngIf="
                                    tag.errors &&
                                    tag.errors.required &&
                                    (tag.dirty || tag.touched)
                                ">
                                {{ 'P2P_PROVIDER.TAG_REQUIRED' | translate }}
                            </clr-control-error>
                        </div>
                    </div>
                    <div class="clr-form-control margin-top-06">
                        <label
                            for="repo"
                            class="clr-control-label width-6rem"></label>
                        <div class="clr-control-container">
                            <div class="clr-input-wrapper">
                                <label class="sub-label">{{
                                    'P2P_PROVIDER.LABELS' | translate
                                }}</label>
                                <input
                                    [disabled]="loading"
                                    autocomplete="off"
                                    class="clr-input width-290"
                                    type="text"
                                    id="labels"
                                    [(ngModel)]="labels"
                                    size="30"
                                    name="label" />
                                <clr-icon
                                    class="clr-validate-icon"
                                    shape="exclamation-circle"></clr-icon>
                            </div>
                        </div>
                    </div>
                    <div
                        class="clr-form-control margin-top-06"
                        *ngIf="enableContentTrust">
                        <label class="clr-control-label width-6rem">
                            <span>{{
                                'P2P_PROVIDER.CRITERIA' | translate
                            }}</span>
                            <clr-tooltip>
                                <clr-icon
                                    class="cri-tooltip"
                                    clrTooltipTrigger
                                    shape="info-circle"
                                    size="24"></clr-icon>
                                <clr-tooltip-content
                                    clrPosition="top-left"
                                    clrSize="lg"
                                    *clrIfOpen>
                                    {{
                                        'P2P_PROVIDER.CRITERIA_EXPLAIN'
                                            | translate
                                    }}
                                </clr-tooltip-content>
                            </clr-tooltip>
                        </label>
                        <div class="clr-control-container opacity-054">
                            <div class="clr-checkbox-wrapper">
                                <input
                                    class="clr-checkbox"
                                    disabled
                                    type="checkbox"
                                    id="onlySignedImages"
                                    [(ngModel)]="onlySignedImages"
                                    name="onlySignedImages" />
                                <label
                                    class="font-size-12"
                                    for="onlySignedImages"
                                    >{{
                                        'P2P_PROVIDER.ONLY_SIGNED' | translate
                                    }}</label
                                >
                            </div>
                        </div>
                    </div>
                    <div
                        class="clr-form-control margin-top-06 mt-1"
                        *ngIf="preventVul">
                        <label for="repo" class="clr-control-label width-6rem">
                            <ng-container *ngIf="!enableContentTrust">
                                <span>{{
                                    'P2P_PROVIDER.CRITERIA' | translate
                                }}</span>
                                <clr-tooltip>
                                    <clr-icon
                                        class="tooltip"
                                        clrTooltipTrigger
                                        shape="info-circle"
                                        size="24"></clr-icon>
                                    <clr-tooltip-content
                                        clrPosition="top-left"
                                        clrSize="lg"
                                        *clrIfOpen>
                                        {{
                                            'P2P_PROVIDER.CRITERIA_EXPLAIN'
                                                | translate
                                        }}
                                    </clr-tooltip-content>
                                </clr-tooltip>
                            </ng-container>
                        </label>
                        <div class="clr-control-container flex">
                            <label class="sub-text opacity-054"
                                >{{
                                    'P2P_PROVIDER.START_TEXT' | translate
                                }}&nbsp;</label
                            >
                            <div class="clr-select-wrapper">
                                <select
                                    disabled
                                    id="severity"
                                    name="severity"
                                    class="clr-select"
                                    #ngSeverity="ngModel"
                                    [(ngModel)]="severity">
                                    <option>--</option>
                                    <option
                                        [selected]="severity === s.severity"
                                        *ngFor="let s of severityOptions"
                                        value="{{ s.severity }}">
                                        {{ s.severityLevel | translate }}
                                    </option>
                                </select>
                            </div>
                            <label class="sub-text opacity-054"
                                >&nbsp;{{
                                    'P2P_PROVIDER.EDN_TEXT' | translate
                                }}</label
                            >
                        </div>
                    </div>
                    <div class="flex baseline">
                        <clr-select-container>
                            <label class="clr-control-label width-6rem">{{
                                'P2P_PROVIDER.TRIGGER' | translate
                            }}</label>
                            <select
                                class="width-380"
                                [disabled]="loading"
                                clrSelect
                                name="triggerType"
                                id="trigger-type"
                                #ngTriggerType="ngModel"
                                [(ngModel)]="triggerType">
                                <option class="display-none" value=""></option>
                                <option
                                    [selected]="triggerType === item"
                                    *ngFor="let item of triggers"
                                    value="{{ item }}">
                                    {{ getTriggerTypeI18n(item) | translate }}
                                </option>
                            </select>
                        </clr-select-container>
                        <clr-tooltip *ngIf="showExplainForEventBased()">
                            <clr-icon
                                clrTooltipTrigger
                                shape="info-circle"
                                size="24"></clr-icon>
                            <clr-tooltip-content
                                clrPosition="top-right"
                                clrSize="lg"
                                *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-tooltip-content>
                        </clr-tooltip>
                    </div>
                    <div
                        class="clr-form-control margin-top-06"
                        *ngIf="showCron()">
                        <label
                            for="repo"
                            class="clr-control-label width-6rem"></label>
                        <div class="clr-control-container">
                            <cron-selection
                                #cronScheduleComponent
                                [isInlineModel]="true"
                                [originCron]="getCron()"
                                (inputvalue)="setCron($event)"></cron-selection>
                        </div>
                    </div>
                    <!-- dragonfly provider customization -->
                    <div *ngIf="isDragonflyProvider(policy.provider_id)">
                        <!-- scope -->
                        <div class="clr-form-control">
                            <clr-select-container>
                                <label class="clr-control-label width-6rem">
                                    {{
                                        'P2P_PROVIDER.DRAGONFLY.SCOPE'
                                            | translate
                                    }}
                                </label>
                                <select
                                    class="width-380"
                                    [disabled]="loading"
                                    clrSelect
                                    name="scope"
                                    id="scope"
                                    [(ngModel)]="scope"
                                    #ngScope="ngModel">
                                    <option
                                        class="display-none"
                                        value=""></option>
                                    <option
                                        [selected]="policy.scope === item"
                                        *ngFor="let item of scopes"
                                        value="{{ item }}">
                                        {{ getScopeI18n(item) | translate }}
                                    </option>
                                </select>
                            </clr-select-container>
                        </div>
                        <!-- cluster_ids -->
                        <div class="clr-form-control">
                            <label
                                for="clusterIDs"
                                class="clr-control-label width-6rem"
                                >{{
                                    'P2P_PROVIDER.DRAGONFLY.CLUSTER_IDS'
                                        | translate
                                }}</label
                            >
                            <div class="clr-control-container">
                                <div class="clr-input-wrapper">
                                    <input
                                        [disabled]="loading"
                                        autocomplete="off"
                                        class="clr-input width-380"
                                        type="text"
                                        id="clusterIDs"
                                        [(ngModel)]="clusterIDs"
                                        size="30"
                                        name="clusterIDs"
                                        #ngClusterIDs="ngModel" />
                                </div>
                                <clr-control-helper class="opacity-08">{{
                                    'P2P_PROVIDER.DRAGONFLY.CLUSTER_IDS_SEPARATOR'
                                        | translate
                                }}</clr-control-helper>
                            </div>
                        </div>
                    </div>
                </section>
            </form>
            <div class="mt-1 bottom-btn" *ngIf="!isEdit">
                <button
                    type="button"
                    class="btn btn-outline"
                    id="add-policy-cancel"
                    (click)="onCancel()">
                    {{ 'BUTTON.CANCEL' | translate }}
                </button>
                <button
                    type="button"
                    id="new-policy"
                    class="btn btn-primary"
                    [clrLoading]="buttonStatus"
                    [disabled]="
                        isNameExisting ||
                        checkNameOnGoing ||
                        loading ||
                        !valid()
                    "
                    (click)="addOrSave(true)">
                    {{ 'BUTTON.ADD' | translate }}
                </button>
            </div>
            <div class="mt-1 bottom-btn" *ngIf="isEdit">
                <button
                    type="button"
                    class="btn btn-outline"
                    id="edit-policy-cancel"
                    (click)="onCancel()">
                    {{ 'BUTTON.CANCEL' | translate }}
                </button>
                <button
                    type="button"
                    class="btn btn-primary"
                    id="edit-policy-save"
                    [clrLoading]="buttonStatus"
                    [disabled]="
                        isNameExisting ||
                        checkNameOnGoing ||
                        loading ||
                        !valid() ||
                        !hasChange()
                    "
                    (click)="addOrSave(false)">
                    {{ 'BUTTON.SAVE' | translate }}
                </button>
            </div>
        </div>
    </div>
</clr-modal>
