<form class="clr-form clr-form-horizontal">
    <section>
        <div class="clr-form-control d-f">
            <label class="clr-control-label">{{
                'CVE_ALLOWLIST.DEPLOYMENT_SECURITY' | translate
            }}</label>
            <div class="form-content w-100">
                <div class="font-size-13">
                    <div class="mt-05">
                        <span class="title font-size-13">{{
                            'CVE_ALLOWLIST.CVE_ALLOWLIST' | translate
                        }}</span>
                    </div>
                    <div class="mt-05">
                        <span>{{
                            'CVE_ALLOWLIST.SYS_ALLOWLIST_EXPLAIN' | translate
                        }}</span>
                    </div>
                    <div class="mt-05">
                        <span>{{ 'CVE_ALLOWLIST.ADD_SYS' | translate }}</span>
                    </div>
                    <div class="mt-05" *ngIf="hasExpired">
                        <span class="label label-warning">{{
                            'CVE_ALLOWLIST.WARNING_SYS' | translate
                        }}</span>
                    </div>
                </div>
                <div class="clr-row width-90per">
                    <div class="position-relative pl-05">
                        <div>
                            <button
                                id="show-add-modal-button"
                                (click)="showAddModal = !showAddModal"
                                class="btn btn-link">
                                {{ 'CVE_ALLOWLIST.ADD' | translate }}
                            </button>
                        </div>
                        <div
                            class="add-modal add-modal-dark"
                            *ngIf="showAddModal">
                            <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 font-italic"
                                        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-system"
                                    [disabled]="isDisabled()"
                                    (click)="addToSystemAllowlist()"
                                    class="btn btn-link">
                                    {{ 'CVE_ALLOWLIST.ADD' | translate }}
                                </button>
                            </div>
                        </div>
                        <ul class="allowlist-window">
                            <li
                                *ngIf="systemAllowlist?.items?.length < 1"
                                class="none">
                                {{ 'CVE_ALLOWLIST.NONE' | translate }}
                            </li>
                            <li
                                *ngFor="
                                    let item of systemAllowlist?.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-8 ml-1">
                        <div class="clr-row expire-data">
                            <label class="bottom-line clr-col-2">{{
                                'CVE_ALLOWLIST.EXPIRES_AT' | translate
                            }}</label>
                            <div>
                                <input
                                    #dateInput
                                    placeholder="{{
                                        'CVE_ALLOWLIST.NEVER_EXPIRES'
                                            | translate
                                    }}"
                                    readonly
                                    type="date"
                                    [(clrDate)]="expiresDate"
                                    newFormLayout="true" />
                            </div>
                        </div>
                        <div class="clr-row">
                            <label class="clr-col-2"></label>
                            <clr-checkbox-wrapper>
                                <input
                                    [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>
    </section>
</form>
<div>
    <button
        type="button"
        id="security_save"
        class="btn btn-primary"
        (click)="save()"
        [disabled]="!hasAllowlistChanged || inProgress">
        {{ 'BUTTON.SAVE' | translate }}
    </button>
    <button
        type="button"
        id="security_cancel"
        class="btn btn-outline"
        (click)="cancel()"
        [disabled]="!hasAllowlistChanged || inProgress">
        {{ 'BUTTON.CANCEL' | translate }}
    </button>
</div>
