<form #projectPolicyForm="ngForm" class="clr-form clr-form-horizontal">
    <section class="form-block">
        <clr-checkbox-container id="clr-wrapper-public">
            <label>{{ 'PROJECT_CONFIG.REGISTRY' | translate }}</label>
            <clr-checkbox-wrapper>
                <input
                    type="checkbox"
                    id="clr-checkbox-wrapper-public"
                    clrCheckbox
                    [(ngModel)]="projectPolicy.Public"
                    name="public"
                    [disabled]="!hasChangeConfigRole" />
                <label>{{ 'PROJECT_CONFIG.PUBLIC_TOGGLE' | translate }}</label>
            </clr-checkbox-wrapper>
            <clr-control-helper class="config-subtext">
                {{ 'PROJECT_CONFIG.PUBLIC_POLICY' | translate }}
            </clr-control-helper>
        </clr-checkbox-container>
        <clr-checkbox-container *ngIf="isSystemAdmin" clrInline>
            <label class="label-color-input">
                {{ 'PROJECT.PROXY_CACHE' | translate }}
            </label>
            <clr-checkbox-wrapper id="is-project-proxy-cache-enabled">
                <input
                    type="checkbox"
                    clrCheckbox
                    disabled="!allowUpdateProxyCacheConfiguration"
                    [(ngModel)]="projectPolicy.ProxyCacheEnabled"
                    name="project-proxy-cache-enabled" />
            </clr-checkbox-wrapper>
            <clr-control-helper class="config-subtext">
                {{ 'PROJECT.PROXY_CACHE_TOOLTIP' | translate }}
            </clr-control-helper>
        </clr-checkbox-container>
        <div
            *ngIf="isSystemAdmin && projectPolicy.ProxyCacheEnabled"
            class="clr-form-control mt-0">
            <label class="clr-control-label"></label>
            <div class="clr-select-wrapper row-inline">
                <label class="clr-control-label">
                    {{ 'PROJECT.ENDPOINT' | translate }}
                </label>
                <select
                    class="width-164 ml-1"
                    id="registry"
                    name="registry"
                    disabled="!allowUpdateProxyCacheConfiguration"
                    [(ngModel)]="projectPolicy.RegistryId">
                    <option class="display-none" value=""></option>
                    <option *ngFor="let r of registries" [value]="r.id">
                        {{ r.name }}-{{ r.url }}
                    </option>
                </select>
            </div>
            <div class="row-inline ml-2" clrInline>
                <label class="clr-control-label">
                    {{ 'PROJECT.BANDWIDTH' | translate }}
                </label>
                <div
                    class="clr-control-container ml-1"
                    [class.clr-error]="bandwidthError">
                    <input
                        type="number"
                        id="bandwidth"
                        [(ngModel)]="projectPolicy.ProxySpeedKb"
                        name="bandwidth"
                        disabled="!allowUpdateProxyCacheConfiguration"
                        class="clr-input width-164 mr-10 clr-input-underline"
                        autocomplete="off"
                        (ngModelChange)="validateBandwidth()" />
                    <clr-icon
                        *ngIf="bandwidthError"
                        class="clr-validate-icon"
                        shape="exclamation-circle"></clr-icon>
                    <div class="clr-select-wrapper mr-10 margin-left-05">
                        <select
                            id="bandwidth_unit"
                            name="bandwidth_unit"
                            disabled="!allowUpdateProxyCacheConfiguration"
                            [(ngModel)]="speedUnit">
                            <option
                                *ngFor="let unit of speedUnits"
                                [value]="unit.UNIT">
                                {{ unit.UNIT }}
                            </option>
                        </select>
                    </div>
                    <clr-control-error
                        *ngIf="bandwidthError"
                        class="tooltip-content">
                        {{ 'PROJECT.SPEED_LIMIT_TIP' | translate }}
                    </clr-control-error>
                </div>
            </div>
            <div class="row-inline ml-2" clrInline>
                <label class="clr-control-label">
                    {{ 'PROJECT.CONNECTION_LIMIT' | translate }}
                </label>
                <div
                    class="clr-control-container ml-1"
                    [class.clr-error]="maxUpstreamConnError">
                    <input
                        type="number"
                        id="max_upstream_conn"
                        [(ngModel)]="projectPolicy.MaxUpstreamConn"
                        name="max_upstream_conn"
                        disabled="!allowUpdateProxyCacheConfiguration"
                        class="clr-input width-164 mr-10 clr-input-underline"
                        autocomplete="off" />
                    <clr-icon
                        *ngIf="maxUpstreamConnError"
                        class="clr-validate-icon"
                        shape="exclamation-circle"></clr-icon>
                    <clr-control-error
                        *ngIf="maxUpstreamConnError"
                        class="tooltip-content">
                        {{
                            'PROJECT.PROXY_CACHE_MAX_UPSTREAM_CONN_INPUT_TIP'
                                | translate
                        }}
                    </clr-control-error>
                </div>
            </div>
        </div>

        <clr-checkbox-container *ngIf="!isProxyCacheProject" clrInline>
            <label
                ><span>{{ 'PROJECT_CONFIG.SECURITY' | translate }}</span></label
            >
            <clr-checkbox-wrapper>
                <input
                    id="content-trust-cosign"
                    type="checkbox"
                    clrCheckbox
                    [(ngModel)]="projectPolicy.ContentTrustCosign"
                    name="content-trust-cosign"
                    [disabled]="!hasChangeConfigRole" />
                <label for="content-trust-cosign">{{
                    'ACCESSORY.CO_SIGN' | translate
                }}</label>
            </clr-checkbox-wrapper>
            <clr-checkbox-wrapper>
                <input
                    id="content-trust"
                    type="checkbox"
                    clrCheckbox
                    [(ngModel)]="projectPolicy.ContentTrust"
                    name="content-trust"
                    [disabled]="!hasChangeConfigRole" />
                <label for="content-trust">{{
                    'ACCESSORY.NOTARY' | translate
                }}</label>
            </clr-checkbox-wrapper>
            <clr-control-helper class="config-subtext">
                {{ 'PROJECT_CONFIG.CONTENT_TRUST_POLCIY' | translate }}
            </clr-control-helper>
        </clr-checkbox-container>
        <clr-checkbox-container
            id="prevent-vulenrability-image"
            class="margin-top-05">
            <label
                ><span *ngIf="!!isProxyCacheProject">{{
                    'PROJECT_CONFIG.SECURITY' | translate
                }}</span></label
            >
            <clr-checkbox-wrapper>
                <input
                    type="checkbox"
                    clrCheckbox
                    [(ngModel)]="projectPolicy.PreventVulImg"
                    name="prevent-vulenrability-image-input"
                    [disabled]="!hasChangeConfigRole" />
                <label>{{
                    'PROJECT_CONFIG.PREVENT_VULNERABLE_TOGGLE' | translate
                }}</label>
            </clr-checkbox-wrapper>
            <clr-control-helper class="config-subtext">
                <div class="chk-explain">
                    <label class="config-subtext">
                        <div id="severity-blk">
                            <div>
                                {{
                                    'PROJECT_CONFIG.PREVENT_VULNERABLE_1'
                                        | translate
                                }}
                            </div>
                            <div class="clr-select-wrapper">
                                <select
                                    id="severity"
                                    name="severity"
                                    class="clr-select"
                                    [(ngModel)]="
                                        projectPolicy.PreventVulImgSeverity
                                    "
                                    [disabled]="!projectPolicy.PreventVulImg">
                                    <option
                                        *ngFor="let s of severityOptions"
                                        [ngValue]="s.severity">
                                        {{ s.severityLevel | translate }}
                                    </option>
                                </select>
                            </div>
                            <div>
                                {{
                                    'PROJECT_CONFIG.PREVENT_VULNERABLE_2'
                                        | translate
                                }}
                            </div>
                        </div>
                    </label>
                </div>
            </clr-control-helper>
        </clr-checkbox-container>
        <clr-checkbox-container>
            <label>{{ 'PROJECT_CONFIG.SCAN' | translate }}</label>
            <clr-checkbox-wrapper id="scan-image-on-push-wrapper">
                <input
                    type="checkbox"
                    clrCheckbox
                    [(ngModel)]="projectPolicy.ScanImgOnPush"
                    [disabled]="!hasChangeConfigRole"
                    name="scan-image-on-push" />
                <label>{{
                    'PROJECT_CONFIG.AUTOSCAN_TOGGLE' | translate
                }}</label>
            </clr-checkbox-wrapper>
            <clr-control-helper class="config-subtext">
                {{ 'PROJECT_CONFIG.AUTOSCAN_POLICY' | translate }}
            </clr-control-helper>
        </clr-checkbox-container>
        <clr-checkbox-container>
            <label>{{ 'PROJECT_CONFIG.SBOM' | translate }}</label>
            <clr-checkbox-wrapper id="generate-sbom-on-push-wrapper">
                <input
                    type="checkbox"
                    clrCheckbox
                    [(ngModel)]="projectPolicy.GenerateSbomOnPush"
                    [disabled]="!hasChangeConfigRole"
                    name="generate-sbom-on-push" />
                <label>{{
                    'PROJECT_CONFIG.AUTOSBOM_TOGGLE' | translate
                }}</label>
            </clr-checkbox-wrapper>
            <clr-control-helper class="config-subtext">
                {{ 'PROJECT_CONFIG.AUTOSBOM_POLICY' | translate }}
            </clr-control-helper>
        </clr-checkbox-container>
        <div
            *ngIf="systemInfo"
            class="clr-form-control"
            [class.clr-form-control-disabled]="!hasChangeConfigRole">
            <label class="clr-control-label">{{
                'CVE_ALLOWLIST.CVE_ALLOWLIST' | translate
            }}</label>
            <div class="w-100 clr-control-container">
                <div class="config-subtext">
                    <div>
                        <span>{{
                            'CVE_ALLOWLIST.PRO_ALLOWLIST_EXPLAIN' | translate
                        }}</span>
                    </div>
                    <div>
                        <span>{{
                            'CVE_ALLOWLIST.PRO_OR_SYS' | translate
                        }}</span>
                    </div>
                    <div>
                        <span>{{
                            'CVE_ALLOWLIST.MERGE_INTO' | translate
                        }}</span>
                    </div>
                    <div *ngIf="hasExpired">
                        <span
                            *ngIf="isUseSystemAllowlist()"
                            class="label label-warning"
                            >{{ 'CVE_ALLOWLIST.WARNING_SYS' | translate }}</span
                        >
                        <span
                            *ngIf="!isUseSystemAllowlist()"
                            class="label label-warning"
                            >{{ 'CVE_ALLOWLIST.WARNING_PRO' | translate }}</span
                        >
                    </div>
                </div>
                <clr-radio-container clrInline>
                    <clr-radio-wrapper>
                        <input
                            id="use-system"
                            [attr.disabled]="
                                !hasChangeConfigRole ? 'disabled' : null
                            "
                            type="radio"
                            clrRadio
                            name="systemAllowlistOrProjectAllowlist"
                            required
                            value="true"
                            [(ngModel)]="systemAllowlistOrProjectAllowlist" />
                        <label>{{
                            'CVE_ALLOWLIST.SYS_ALLOWLIST' | translate
                        }}</label>
                    </clr-radio-wrapper>
                    <clr-radio-wrapper>
                        <input
                            id="use-project"
                            [attr.disabled]="
                                !hasChangeConfigRole ? 'disabled' : null
                            "
                            type="radio"
                            clrRadio
                            name="systemAllowlistOrProjectAllowlist"
                            required
                            value="false"
                            [(ngModel)]="systemAllowlistOrProjectAllowlist" />
                        <label>{{
                            'CVE_ALLOWLIST.PRO_ALLOWLIST' | translate
                        }}</label>
                    </clr-radio-wrapper>
                </clr-radio-container>
                <div class="clr-row width-90per">
                    <div class="clr-col position-relative col-flex-grow-0">
                        <div>
                            <button
                                id="show-add-modal"
                                [disabled]="
                                    isUseSystemAllowlist() ||
                                    !hasChangeConfigRole
                                "
                                (click)="showAddModal = !showAddModal"
                                class="btn btn-link">
                                {{ 'CVE_ALLOWLIST.ADD' | translate }}
                            </button>
                            <button
                                id="add-system"
                                [disabled]="
                                    isUseSystemAllowlist() ||
                                    !hasChangeConfigRole
                                "
                                (click)="addSystem()"
                                class="btn btn-link ml-1">
                                {{ 'CVE_ALLOWLIST.ADD_SYSTEM' | translate }}
                            </button>
                        </div>
                        <div
                            class="add-modal add-modal-dark"
                            *ngIf="showAddModal && !isUseSystemAllowlist()">
                            <clr-icon
                                (click)="showAddModal = false"
                                class="float-lg-right margin-top-4"
                                shape="window-close"></clr-icon>
                            <div>
                                <clr-textarea-container
                                    class="flex-direction-column">
                                    <label>{{
                                        'CVE_ALLOWLIST.ENTER' | translate
                                    }}</label>
                                    <textarea
                                        id="allowlist-textarea"
                                        class="w-100"
                                        clrTextarea
                                        [(ngModel)]="cveIds"
                                        name="cveIds"></textarea>
                                    <clr-control-helper>{{
                                        'CVE_ALLOWLIST.HELP' | translate
                                    }}</clr-control-helper>
                                </clr-textarea-container>
                            </div>
                            <div>
                                <button
                                    id="add-to-allowlist"
                                    [disabled]="isDisabled()"
                                    (click)="addToProjectAllowlist()"
                                    class="btn btn-link">
                                    {{ 'CVE_ALLOWLIST.ADD' | translate }}
                                </button>
                            </div>
                        </div>
                        <ul
                            class="allowlist-window"
                            *ngIf="isUseSystemAllowlist()">
                            <li
                                *ngIf="systemAllowlist?.items?.length < 1"
                                class="none">
                                {{ 'CVE_ALLOWLIST.NONE' | translate }}
                            </li>
                            <li *ngFor="let item of systemAllowlist?.items">
                                <a
                                    href="javascript:void(0)"
                                    (click)="goToDetail(item.cve_id)"
                                    >{{ item.cve_id }}</a
                                >
                            </li>
                        </ul>
                        <ul
                            class="allowlist-window"
                            *ngIf="!isUseSystemAllowlist()">
                            <li
                                class="none"
                                *ngIf="projectAllowlist?.items?.length < 1">
                                {{ 'CVE_ALLOWLIST.NONE' | translate }}
                            </li>
                            <li
                                *ngFor="
                                    let item of projectAllowlist?.items;
                                    let i = index
                                ">
                                <a
                                    href="javascript:void(0)"
                                    (click)="goToDetail(item.cve_id)"
                                    >{{ item.cve_id }}</a
                                >
                                <a
                                    class="float-lg-right"
                                    href="javascript:void(0)"
                                    (click)="deleteItem(i)">
                                    <clr-icon shape="times-circle"></clr-icon>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="clr-col padding-top-16 pl-2">
                        <div class="clr-row expire-data">
                            <label
                                class="bottom-line bottom-line-project-config clr-col-3"
                                >{{
                                    'CVE_ALLOWLIST.EXPIRES_AT' | translate
                                }}</label
                            >
                            <div class="underline">
                                <input
                                    #dateSystemInput
                                    readonly
                                    type="date"
                                    [(clrDate)]="systemExpiresDate" />
                                <input
                                    [disabled]="!hasChangeConfigRole"
                                    *ngIf="!isUseSystemAllowlist()"
                                    #dateInput
                                    placeholder="{{
                                        'CVE_ALLOWLIST.NEVER_EXPIRES'
                                            | translate
                                    }}"
                                    readonly
                                    type="date"
                                    [(clrDate)]="expiresDate"
                                    newFormLayout="true" />
                                <input
                                    clrInput
                                    [disabled]="!hasChangeConfigRole"
                                    *ngIf="isUseSystemAllowlist()"
                                    placeholder="{{
                                        'CVE_ALLOWLIST.NEVER_EXPIRES'
                                            | translate
                                    }}"
                                    readonly
                                    type="text"
                                    value="{{ systemExpiresDateString }}" />
                            </div>
                        </div>
                        <div class="clr-row">
                            <label for="neverExpires" class="clr-col-3"></label>
                            <clr-checkbox-wrapper>
                                <input
                                    [disabled]="
                                        isUseSystemAllowlist() ||
                                        !hasChangeConfigRole
                                    "
                                    [checked]="neverExpires"
                                    [(ngModel)]="neverExpires"
                                    type="checkbox"
                                    clrCheckbox
                                    name="neverExpires"
                                    id="neverExpires" />
                                <label>
                                    {{
                                        'CVE_ALLOWLIST.NEVER_EXPIRES'
                                            | translate
                                    }}
                                </label>
                            </clr-checkbox-wrapper>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <button
            type="button"
            class="btn btn-primary"
            (click)="save()"
            [disabled]="
                ((!isValid() || !hasChanges()) && !hasAllowlistChanged) ||
                !hasChangeConfigRole
            ">
            {{ 'BUTTON.SAVE' | translate }}
        </button>
        <button
            type="button"
            class="btn btn-outline"
            (click)="cancel()"
            [disabled]="
                ((!isValid() || !hasChanges()) && !hasAllowlistChanged) ||
                !hasChangeConfigRole
            ">
            {{ 'BUTTON.CANCEL' | translate }}
        </button>
        <confirmation-dialog
            #cfgConfirmationDialog
            (confirmAction)="confirmCancel($event)"></confirmation-dialog>
    </section>
</form>
