<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="text"
                #tokenExpirationInput="ngModel"
                [(ngModel)]="tokenExpirationValue"
                required
                pattern="^[1-9]{1}[0-9]*$"
                id="tokenExpiration"
                size="20"
                [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="text"
                #robotTokenExpirationInput="ngModel"
                [(ngModel)]="robotTokenExpirationValue"
                required
                pattern="^[1-9]{1}[0-9]*$"
                id="robotTokenExpiration"
                size="20"
                [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>
            <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-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>
    </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>
