<div>
    <form [formGroup]="newScannerForm" class="clr-form clr-form-horizontal">
        <div class="clr-form-control">
            <label class="required clr-control-label">{{
                'SCANNER.NAME' | translate
            }}</label>
            <div class="clr-control-container" [class.clr-error]="!isNameValid">
                <div class="clr-input-wrapper">
                    <input
                        autocomplete="off"
                        #name
                        formControlName="name"
                        class="clr-input width-280"
                        type="text"
                        id="scanner-name" />
                    <clr-icon
                        class="clr-validate-icon"
                        shape="exclamation-circle"></clr-icon>
                    <span
                        class="spinner spinner-inline"
                        [hidden]="!checkOnGoing"></span>
                </div>
                <clr-control-error *ngIf="!isNameValid">
                    <span id="name-error">{{ nameTooltip | translate }}</span>
                </clr-control-error>
            </div>
        </div>
        <div class="clr-form-control">
            <label class="clr-control-label">{{
                'SCANNER.DESCRIPTION' | translate
            }}</label>
            <div class="clr-control-container">
                <textarea
                    autocomplete="off"
                    formControlName="description"
                    class="clr-textarea width-280"
                    type="text"
                    id="description">
                </textarea>
            </div>
        </div>
        <div class="clr-form-control">
            <label class="required clr-control-label">{{
                'SCANNER.ENDPOINT' | translate
            }}</label>
            <div
                class="clr-control-container"
                [class.clr-error]="!isEndpointValid || showEndpointError">
                <div class="clr-input-wrapper">
                    <input
                        (focus)="showEndpointError = false"
                        (blur)="checkEndpointUrl()"
                        #endpointUrl
                        placeholder="http(s)://192.168.1.1"
                        autocomplete="off"
                        formControlName="url"
                        class="clr-input width-280"
                        type="text"
                        id="scanner-endpoint" />
                    <clr-icon
                        class="clr-validate-icon"
                        shape="exclamation-circle"></clr-icon>
                    <span
                        class="spinner spinner-inline"
                        [hidden]="!checkEndpointOnGoing"></span>
                </div>
                <clr-control-error
                    *ngIf="!isEndpointValid || showEndpointError">
                    <span id="endpoint-error">{{
                        endpointTooltip | translate
                    }}</span>
                </clr-control-error>
            </div>
        </div>
        <div class="clr-form-control">
            <label class="clr-control-label">{{
                'SCANNER.AUTH' | translate
            }}</label>
            <div class="clr-control-container">
                <div class="clr-select-wrapper">
                    <select
                        formControlName="auth"
                        class="clr-select width-280"
                        id="scanner-authorization">
                        <option value="None">
                            {{ 'SCANNER.NONE' | translate }}
                        </option>
                        <option value="Basic">
                            {{ 'SCANNER.BASIC' | translate }}
                        </option>
                        <option value="Bearer">
                            {{ 'SCANNER.BEARER' | translate }}
                        </option>
                        <option value="APIKey">
                            {{ 'SCANNER.API_KEY' | translate }}
                        </option>
                    </select>
                </div>
            </div>
        </div>
        <ng-container formGroupName="accessCredential">
            <div class="clr-form-control" *ngIf="auth === 'Basic'">
                <label class="required clr-control-label">{{
                    'SCANNER.USERNAME' | translate
                }}</label>
                <div
                    class="clr-control-container"
                    [class.clr-error]="!isUserNameValid">
                    <div class="clr-input-wrapper">
                        <input
                            formControlName="username"
                            autocomplete="off"
                            class="clr-input width-280"
                            type="text"
                            id="scanner-username" />
                        <clr-icon
                            class="clr-validate-icon"
                            shape="exclamation-circle"></clr-icon>
                    </div>
                    <clr-control-error *ngIf="!isUserNameValid">
                        {{ 'SCANNER.USERNAME_REQUIRED' | translate }}
                    </clr-control-error>
                </div>
            </div>
            <div class="clr-form-control" *ngIf="auth === 'Basic'">
                <label class="required clr-control-label">{{
                    'SCANNER.PASSWORD' | translate
                }}</label>
                <div
                    class="clr-control-container"
                    [class.clr-error]="!isPasswordValid">
                    <div class="clr-input-wrapper">
                        <input
                            formControlName="password"
                            autocomplete="off"
                            class="clr-input width-280"
                            type="password"
                            id="scanner-password" />
                        <clr-icon
                            class="clr-validate-icon"
                            shape="exclamation-circle"></clr-icon>
                    </div>
                    <clr-control-error *ngIf="!isPasswordValid">
                        <span id="pwd-error">{{
                            'SCANNER.PASSWORD_REQUIRED' | translate
                        }}</span>
                    </clr-control-error>
                </div>
            </div>
            <div class="clr-form-control" *ngIf="auth === 'Bearer'">
                <label class="required clr-control-label">{{
                    'SCANNER.TOKEN' | translate
                }}</label>
                <div
                    class="clr-control-container"
                    [class.clr-error]="!isTokenValid">
                    <div class="clr-input-wrapper">
                        <input
                            formControlName="token"
                            autocomplete="off"
                            class="clr-input width-280"
                            type="text"
                            id="scanner-token" />
                        <clr-icon
                            class="clr-validate-icon"
                            shape="exclamation-circle"></clr-icon>
                    </div>
                    <clr-control-error *ngIf="!isTokenValid">
                        {{ 'SCANNER.TOKEN_REQUIRED' | translate }}
                    </clr-control-error>
                </div>
            </div>
            <div class="clr-form-control" *ngIf="auth === 'APIKey'">
                <label class="required clr-control-label">{{
                    'SCANNER.API_KEY' | translate
                }}</label>
                <div
                    class="clr-control-container"
                    [class.clr-error]="!isApiKeyValid">
                    <div class="clr-input-wrapper">
                        <input
                            formControlName="apiKey"
                            autocomplete="off"
                            class="clr-input width-280"
                            type="text"
                            id="scanner-apiKey" />
                        <clr-icon
                            class="clr-validate-icon"
                            shape="exclamation-circle"></clr-icon>
                    </div>
                    <clr-control-error *ngIf="!isApiKeyValid">
                        {{ 'SCANNER.API_KEY_REQUIRED' | translate }}
                    </clr-control-error>
                </div>
            </div>
        </ng-container>
        <div class="clr-form-control">
            <label class="clr-control-label">{{
                'SCANNER.OPTIONS' | translate
            }}</label>
            <div class="clr-control-container padding-top-3">
                <clr-checkbox-wrapper>
                    <input
                        name="scanner-skipCertVerify"
                        clrCheckbox
                        formControlName="skipCertVerify"
                        type="checkbox"
                        id="scanner-skipCertVerify" />
                    <label for="scanner-skipCertVerify"
                        >{{ 'SCANNER.SKIP' | translate }}
                        <clr-tooltip>
                            <clr-icon
                                class="color-57"
                                clrTooltipTrigger
                                shape="info-circle"
                                size="24"></clr-icon>
                            <clr-tooltip-content
                                clrPosition="top-left"
                                clrSize="md"
                                *clrIfOpen>
                                {{ 'SCANNER.SKIP_CERT_VERIFY' | translate }}
                            </clr-tooltip-content>
                        </clr-tooltip>
                    </label>
                </clr-checkbox-wrapper>
                <clr-checkbox-wrapper>
                    <input
                        name="scanner-use-inner"
                        clrCheckbox
                        formControlName="useInner"
                        type="checkbox"
                        id="scanner-use-inner" />
                    <label for="scanner-use-inner"
                        >{{ 'SCANNER.USE_INNER' | translate }}
                        <clr-tooltip>
                            <clr-icon
                                class="color-57"
                                clrTooltipTrigger
                                shape="info-circle"
                                size="24"></clr-icon>
                            <clr-tooltip-content
                                clrPosition="top-left"
                                clrSize="md"
                                *clrIfOpen>
                                {{ 'SCANNER.USE_INNER_TIP' | translate }}
                            </clr-tooltip-content>
                        </clr-tooltip>
                    </label>
                </clr-checkbox-wrapper>
            </div>
        </div>
    </form>
</div>
