<form #systemConfigFrom="ngForm" class="clr-form clr-form-horizontal">
    <section>
        <clr-select-container>
            <label for="proCreation"
                >{{ 'CONFIG.PRO_CREATION_RESTRICTION' | translate }}
                <clr-tooltip>
                    <clr-icon
                        clrTooltipTrigger
                        shape="info-circle"
                        size="24"></clr-icon>
                    <clr-tooltip-content
                        clrPosition="top-right"
                        clrSize="lg"
                        *clrIfOpen>
                        <span>{{
                            'CONFIG.TOOLTIP.PRO_CREATION_RESTRICTION'
                                | translate
                        }}</span>
                    </clr-tooltip-content>
                </clr-tooltip>
            </label>
            <select
                clrSelect
                id="proCreation"
                name="proCreation"
                class="pro-creation"
                [(ngModel)]="currentConfig.project_creation_restriction.value"
                [disabled]="
                    disabled(currentConfig.project_creation_restriction)
                ">
                <option value="everyone">
                    {{ 'CONFIG.PRO_CREATION_EVERYONE' | translate }}
                </option>
                <option value="adminonly">
                    {{ 'CONFIG.PRO_CREATION_ADMIN' | translate }}
                </option>
            </select>
        </clr-select-container>
        <clr-input-container>
            <label for="tokenExpiration" class="required"
                >{{ 'CONFIG.TOKEN_EXPIRATION' | translate }}
                <clr-tooltip>
                    <clr-icon
                        clrTooltipTrigger
                        shape="info-circle"
                        size="24"></clr-icon>
                    <clr-tooltip-content
                        clrPosition="top-right"
                        clrSize="lg"
                        *clrIfOpen>
                        <span>{{
                            'CONFIG.TOOLTIP.TOKEN_EXPIRATION' | translate
                        }}</span>
                    </clr-tooltip-content>
                </clr-tooltip>
            </label>
            <input
                clrInput
                name="tokenExpiration"
                type="number"
                #tokenExpirationInput="ngModel"
                [(ngModel)]="currentConfig.token_expiration.value"
                required
                pattern="^[1-9]{1}[0-9]*$"
                id="tokenExpiration"
                max="9999999999"
                [disabled]="!editable" />
            <clr-control-error>{{
                'TOOLTIP.NUMBER_REQUIRED' | translate
            }}</clr-control-error>
        </clr-input-container>
        <clr-input-container>
            <label for="sessionTimeout" class="required"
                >{{ 'CONFIG.SESSION_TIMEOUT' | translate }}
                <clr-tooltip>
                    <clr-icon
                        clrTooltipTrigger
                        shape="info-circle"
                        size="24"></clr-icon>
                    <clr-tooltip-content
                        clrPosition="top-right"
                        clrSize="lg"
                        *clrIfOpen>
                        <span>{{
                            'CONFIG.SESSION_TIMEOUT_INFO' | translate
                        }}</span>
                    </clr-tooltip-content>
                </clr-tooltip>
            </label>
            <input
                clrInput
                name="sessionTimeout"
                type="number"
                #ngSessionTimeout="ngModel"
                [(ngModel)]="currentConfig.session_timeout.value"
                required
                pattern="^[1-9]{1}[0-9]*$"
                id="sessionTimeout"
                max="9999999999"
                [disabled]="!editable" />
            <clr-control-error>{{
                'TOOLTIP.NUMBER_REQUIRED' | translate
            }}</clr-control-error>
        </clr-input-container>
        <clr-input-container>
            <label for="robotNamePrefix" class="required"
                >{{ 'ROBOT_ACCOUNT.NAME_PREFIX' | translate }}
                <clr-tooltip>
                    <clr-icon
                        clrTooltipTrigger
                        shape="info-circle"
                        size="24"></clr-icon>
                    <clr-tooltip-content
                        clrPosition="top-right"
                        clrSize="lg"
                        *clrIfOpen>
                        <span>{{
                            'CONFIG.TOOLTIP.ROBOT_NAME_PREFIX' | translate
                        }}</span>
                    </clr-tooltip-content>
                </clr-tooltip>
            </label>
            <input
                clrInput
                name="robotNamePrefix"
                type="text"
                [(ngModel)]="currentConfig.robot_name_prefix.value"
                required
                autocomplete="off"
                id="robotNamePrefix"
                size="20"
                [disabled]="!robotNamePrefixEditable()" />
            <clr-control-error>{{
                'ROBOT_ACCOUNT.NAME_PREFIX_REQUIRED' | translate
            }}</clr-control-error>
        </clr-input-container>
        <clr-input-container>
            <label for="robotTokenExpiration" class="required"
                >{{ 'ROBOT_ACCOUNT.TOKEN_EXPIRATION' | translate }}
                <clr-tooltip>
                    <clr-icon
                        clrTooltipTrigger
                        shape="info-circle"
                        size="24"></clr-icon>
                    <clr-tooltip-content
                        clrPosition="top-right"
                        clrSize="lg"
                        *clrIfOpen>
                        <span>{{
                            'CONFIG.TOOLTIP.ROBOT_TOKEN_EXPIRATION' | translate
                        }}</span>
                    </clr-tooltip-content>
                </clr-tooltip>
            </label>
            <input
                clrInput
                name="robotTokenExpiration"
                type="number"
                #robotTokenExpirationInput="ngModel"
                [(ngModel)]="currentConfig.robot_token_duration.value"
                required
                pattern="^[1-9]{1}[0-9]*$"
                id="robotTokenExpiration"
                max="9999999999"
                [disabled]="!robotExpirationEditable" />
            <clr-control-error>{{
                'ROBOT_ACCOUNT.NUMBER_REQUIRED' | translate
            }}</clr-control-error>
        </clr-input-container>
        <div *ngIf="canDownloadCert" class="clr-form-control">
            <label class="clr-control-label"
                >{{ 'CONFIG.ROOT_CERT' | translate }}
                <clr-tooltip>
                    <clr-icon
                        clrTooltipTrigger
                        shape="info-circle"
                        size="24"></clr-icon>
                    <clr-tooltip-content
                        clrPosition="top-right"
                        clrSize="lg"
                        *clrIfOpen>
                        <span>{{
                            'CONFIG.TOOLTIP.ROOT_CERT_DOWNLOAD' | translate
                        }}</span>
                    </clr-tooltip-content>
                </clr-tooltip>
            </label>
            <div class="clr-control-container cert-down">
                <a
                    rel="noopener noreferrer"
                    [href]="downloadLink"
                    target="_blank"
                    >{{ 'CONFIG.ROOT_CERT_LINK' | translate }}</a
                >
            </div>
        </div>
        <clr-checkbox-container class="center">
            <label id="repo_read_only_lbl" for="repoReadOnly"
                >{{ 'CONFIG.REPO_READ_ONLY' | translate }}
                <clr-tooltip>
                    <clr-icon
                        clrTooltipTrigger
                        shape="info-circle"
                        size="24"></clr-icon>
                    <clr-tooltip-content
                        clrPosition="top-right"
                        clrSize="lg"
                        *clrIfOpen>
                        <span>{{
                            'CONFIG.TOOLTIP.REPO_TOOLTIP' | translate
                        }}</span>
                    </clr-tooltip-content>
                </clr-tooltip>
            </label>
            <clr-checkbox-wrapper>
                <input
                    type="checkbox"
                    [disabled]="!currentConfig.read_only.editable"
                    clrCheckbox
                    name="repoReadOnly"
                    id="repoReadOnly"
                    [ngModel]="currentConfig.read_only.value"
                    (ngModelChange)="setRepoReadOnlyValue($event)" />
            </clr-checkbox-wrapper>
        </clr-checkbox-container>
        <clr-checkbox-container class="center">
            <label for="webhookNotificationEnabled"
                >{{ 'CONFIG.WEBHOOK_NOTIFICATION_ENABLED' | translate }}
                <clr-tooltip>
                    <clr-icon
                        clrTooltipTrigger
                        shape="info-circle"
                        size="24"></clr-icon>
                    <clr-tooltip-content
                        clrPosition="top-right"
                        clrSize="lg"
                        *clrIfOpen>
                        <span>{{
                            'CONFIG.TOOLTIP.WEBHOOK_TOOLTIP' | translate
                        }}</span>
                    </clr-tooltip-content>
                </clr-tooltip>
            </label>
            <clr-checkbox-wrapper>
                <input
                    type="checkbox"
                    clrCheckbox
                    name="webhookNotificationEnabled"
                    id="webhookNotificationEnabled"
                    [ngModel]="currentConfig.notification_enable.value"
                    (ngModelChange)="setWebhookNotificationEnabledValue($event)"
                    [disabled]="!currentConfig.notification_enable.editable" />
            </clr-checkbox-wrapper>
        </clr-checkbox-container>
        <clr-checkbox-container class="center">
            <label for="scannerSkipUpdatePullTime"
                >{{ 'CONFIG.SKIP_SCANNER_PULL_TIME' | translate }}
                <clr-tooltip>
                    <clr-icon
                        clrTooltipTrigger
                        shape="info-circle"
                        size="24"></clr-icon>
                    <clr-tooltip-content
                        clrPosition="top-right"
                        clrSize="lg"
                        *clrIfOpen>
                        <span>{{
                            'CONFIG.TOOLTIP.SKIP_SCANNER_PULL_TIME_TOOLTIP'
                                | translate
                        }}</span>
                    </clr-tooltip-content>
                </clr-tooltip>
            </label>
            <clr-checkbox-wrapper>
                <input
                    type="checkbox"
                    clrCheckbox
                    name="scannerSkipUpdatePullTime"
                    id="scannerSkipUpdatePullTime"
                    [(ngModel)]="
                        currentConfig.scanner_skip_update_pulltime.value
                    "
                    [disabled]="
                        !currentConfig.scanner_skip_update_pulltime.editable
                    " />
            </clr-checkbox-wrapper>
        </clr-checkbox-container>
        <clr-input-container>
            <label for="auditLogForwardEndpoint">
                {{ 'CLEARANCES.FORWARD_ENDPOINT' | translate }}
                <clr-tooltip>
                    <clr-icon
                        clrTooltipTrigger
                        shape="info-circle"
                        size="24"></clr-icon>
                    <clr-tooltip-content
                        clrPosition="top-right"
                        clrSize="lg"
                        *clrIfOpen>
                        <span>{{
                            'CLEARANCES.FORWARD_ENDPOINT_TOOLTIP' | translate
                        }}</span>
                    </clr-tooltip-content>
                </clr-tooltip>
            </label>
            <input
                clrInput
                name="auditLogForwardEndpoint"
                type="text"
                [(ngModel)]="currentConfig.audit_log_forward_endpoint.value"
                id="auditLogForwardEndpoint"
                size="20"
                (input)="checkAuditLogForwardEndpoint($event)"
                [disabled]="
                    !currentConfig?.audit_log_forward_endpoint?.editable
                " />
        </clr-input-container>
        <clr-checkbox-container class="center">
            <label for="skipAuditLogDatabase"
                >{{ 'CLEARANCES.SKIP_DATABASE' | translate }}
                <clr-tooltip>
                    <clr-icon
                        clrTooltipTrigger
                        shape="info-circle"
                        size="24"></clr-icon>
                    <clr-tooltip-content
                        clrPosition="top-right"
                        clrSize="lg"
                        *clrIfOpen>
                        <span>{{
                            'CLEARANCES.SKIP_DATABASE_TOOLTIP' | translate
                        }}</span>
                    </clr-tooltip-content>
                </clr-tooltip>
            </label>
            <clr-checkbox-wrapper>
                <input
                    type="checkbox"
                    clrCheckbox
                    name="skipAuditLogDatabase"
                    id="skipAuditLogDatabase"
                    [(ngModel)]="currentConfig.skip_audit_log_database.value"
                    [disabled]="
                        !currentConfig.skip_audit_log_database?.editable ||
                        !currentConfig.audit_log_forward_endpoint?.value
                    " />
            </clr-checkbox-wrapper>
        </clr-checkbox-container>
        <div class="clr-form-control">
            <label class="clr-control-label">{{
                'BANNER_MESSAGE.BANNER_MESSAGE' | translate
            }}</label>
            <div class="clr-control-container flex-baseline">
                <div class="clr-textarea-wrapper">
                    <textarea
                        id="banner-message"
                        placeholder="{{
                            'BANNER_MESSAGE.ENTER_MESSAGE' | translate
                        }}"
                        autocomplete="off"
                        class="clr-textarea"
                        maxlength="800"
                        [(ngModel)]="messageText"
                        [ngModelOptions]="{ standalone: true }"
                        [disabled]="
                            !currentConfig.banner_message.editable
                        "></textarea>
                </div>
                <div class="message-type">
                    <div
                        class="clr-select-wrapper"
                        [ngClass]="{
                            'clr-form-control-disable':
                                !currentConfig.banner_message.editable ||
                                !messageText
                        }">
                        <label class="message-label">{{
                            'BANNER_MESSAGE.MESSAGE_TYPE' | translate
                        }}</label>
                        <select
                            id="banner-message-type"
                            class="clr-select message-select"
                            [(ngModel)]="messageType"
                            [ngModelOptions]="{ standalone: true }"
                            [disabled]="
                                !currentConfig.banner_message.editable ||
                                !messageText
                            ">
                            <option
                                *ngFor="let t of bannerMessageTypes"
                                value="{{ t }}">
                                {{ translateMessageType(t) | translate }}
                            </option>
                        </select>
                    </div>
                </div>
                <div
                    class="clr-checkbox-wrapper ml-1"
                    [ngClass]="{
                        'clr-form-control-disable':
                            !currentConfig.banner_message.editable ||
                            !messageText
                    }">
                    <input
                        class="clr-checkbox-inline"
                        type="checkbox"
                        [(ngModel)]="messageClosable"
                        [ngModelOptions]="{ standalone: true }"
                        [disabled]="
                            !currentConfig.banner_message.editable ||
                            !messageText
                        "
                        id="banner-message-closable" />
                    <label
                        class="clr-control-label"
                        for="banner-message-closable"
                        >{{ 'BANNER_MESSAGE.CLOSABLE' | translate }}</label
                    >
                </div>
            </div>
        </div>

        <div class="clr-form-control">
            <label class="clr-control-label"></label>
            <div class="clr-control-container flex-baseline">
                <div class="clr-textarea-wrapper duration">
                    <label>{{ 'REPLICATION.DURATION' | translate }}</label>
                </div>
                <div
                    class="clr-input-wrapper flex message-type"
                    [ngClass]="{
                        'clr-form-control-disable':
                            !currentConfig.banner_message.editable ||
                            !messageText
                    }">
                    <label>{{ 'BANNER_MESSAGE.FROM' | translate }}</label>
                    <clr-date-container>
                        <input
                            class="date"
                            type="date"
                            id="from"
                            autocomplete="off"
                            min="{{ currentDate | date : 'yyyy-MM-dd' }}"
                            max="{{ messageToDate | date : 'yyyy-MM-dd' }}"
                            clrDate
                            readonly
                            [(ngModel)]="messageFromDate"
                            [ngModelOptions]="{ standalone: true }"
                            [disabled]="
                                !currentConfig.banner_message.editable ||
                                !messageText
                            " />
                    </clr-date-container>
                </div>
                <div
                    class="clr-checkbox-wrapper flex ml-1"
                    [ngClass]="{
                        'clr-form-control-disable':
                            !currentConfig.banner_message.editable ||
                            !messageText
                    }">
                    <label>{{ 'BANNER_MESSAGE.TO' | translate }}</label>
                    <clr-date-container>
                        <input
                            class="date"
                            clrDate
                            readonly
                            type="date"
                            id="to"
                            min="{{ minDateForEndDay() | date : 'yyyy-MM-dd' }}"
                            autocomplete="off"
                            [(ngModel)]="messageToDate"
                            [disabled]="
                                !currentConfig.banner_message.editable ||
                                !messageText
                            "
                            [ngModelOptions]="{ standalone: true }" />
                    </clr-date-container>
                </div>
            </div>
        </div>
    </section>
</form>
<div>
    <button
        type="button"
        id="config_system_save"
        class="btn btn-primary"
        (click)="save()"
        [disabled]="!isValid() || !hasChanges() || inProgress">
        {{ 'BUTTON.SAVE' | translate }}
    </button>
    <button
        type="button"
        id="config_system_cancel"
        class="btn btn-outline"
        (click)="cancel()"
        [disabled]="!isValid() || !hasChanges() || inProgress">
        {{ 'BUTTON.CANCEL' | translate }}
    </button>
</div>
