<clr-main-container>
    <global-message [isAppLevel]="true"></global-message>
    <navigator (showDialogModalAction)="openModal($event)"></navigator>
    <search-result></search-result>
    <div
        class="login-wrapper"
        [ngStyle]="{
            'background-image': customLoginBgImg
                ? 'url(/images/' + customLoginBgImg + ')'
                : ''
        }">
        <form #signInForm="ngForm" class="login">
            <span
                *ngIf="isOidcLoginMode && steps === 2"
                (click)="steps = 1"
                class="back-icon">
                <clr-icon shape="angle left"></clr-icon>
                <div class="margin-left-3">{{ 'SEARCH.BACK' | translate }}</div>
            </span>
            <label class="title">
                {{ customAppTitle ? customAppTitle : (appTitle | translate) }}
            </label>
            <div class="login-group">
                <ng-container *ngIf="isOidcLoginMode && steps === 1">
                    <a href="/c/oidc/login">
                        <button
                            type="button"
                            id="log_oidc"
                            class="btn btn-primary btn-block">
                            <span>{{ 'BUTTON.LOG_IN_OIDC' | translate }}</span>
                        </button>
                    </a>
                    <div class="divider-container mt-1 mb-1">
                        <hr class="divider" size="1" noshade />
                        <h4 class="m-0">
                            <span>{{ 'SIGN_IN.OR' | translate }}</span>
                        </h4>
                        <hr class="divider" size="1" noshade />
                    </div>
                    <a href="javascript:void(0)" (click)="steps = 2">
                        <button
                            type="button"
                            id="login-db"
                            class="btn btn-primary btn-block mt-0">
                            <span>{{
                                'SIGN_IN.VIA_LOCAL_DB' | translate
                            }}</span>
                        </button>
                    </a>
                </ng-container>
                <ng-container
                    *ngIf="
                        (!isOidcLoginMode && steps === 1) ||
                        (isOidcLoginMode && steps === 2)
                    ">
                    <clr-input-container class="mt-3">
                        <input
                            clrInput
                            class="username"
                            type="text"
                            required
                            [(ngModel)]="signInCredential.principal"
                            name="login_username"
                            id="login_username"
                            placeholder="{{
                                'PLACEHOLDER.SIGN_IN_NAME' | translate
                            }}"
                            #userNameInput="ngModel" />
                        <clr-control-error>{{
                            'TOOLTIP.SIGN_IN_USERNAME' | translate
                        }}</clr-control-error>
                    </clr-input-container>
                    <div class="clr-form-control">
                        <div
                            class="clr-control-container"
                            [class.clr-error]="
                                passwordInput.invalid &&
                                (passwordInput.dirty || passwordInput.touched)
                            ">
                            <div class="clr-input-wrapper">
                                <input
                                    class="clr-input pwd-input"
                                    [type]="showPwd ? 'text' : 'password'"
                                    required
                                    [(ngModel)]="signInCredential.password"
                                    name="login_password"
                                    id="login_password"
                                    placeholder="{{
                                        'PLACEHOLDER.SIGN_IN_PWD' | translate
                                    }}"
                                    #passwordInput="ngModel" />
                                <clr-icon
                                    *ngIf="!showPwd"
                                    shape="eye"
                                    class="pw-eye"
                                    (click)="showPwd = !showPwd"></clr-icon>
                                <clr-icon
                                    *ngIf="showPwd"
                                    shape="eye-hide"
                                    class="pw-eye"
                                    (click)="showPwd = !showPwd"></clr-icon>
                                <clr-icon
                                    class="clr-validate-icon"
                                    shape="exclamation-circle"></clr-icon>
                            </div>
                            <clr-control-error
                                *ngIf="
                                    passwordInput.invalid &&
                                    (passwordInput.dirty ||
                                        passwordInput.touched)
                                ">
                                {{ 'TOOLTIP.SIGN_IN_PWD' | translate }}
                            </clr-control-error>
                        </div>
                    </div>
                    <div class="display-flex">
                        <clr-checkbox-wrapper>
                            <input
                                clrCheckbox
                                type="checkbox"
                                id="rememberme"
                                #rememberMeBox
                                (click)="clickRememberMe($event)"
                                [checked]="rememberMe" />
                            <label class="reset-label" for="rememberme">{{
                                'SIGN_IN.REMEMBER' | translate
                            }}</label>
                        </clr-checkbox-wrapper>
                    </div>
                    <div *ngIf="isError" class="error active">
                        <span *ngIf="isCoreServiceAvailable">{{
                            'SIGN_IN.INVALID_MSG' | translate
                        }}</span>
                        <span *ngIf="!isCoreServiceAvailable">{{
                            'SIGN_IN.CORE_SERVICE_NOT_AVAILABLE' | translate
                        }}</span>
                    </div>
                    <button
                        [disabled]="isOnGoing || !isValid"
                        type="submit"
                        class="btn btn-primary mt-2"
                        (click)="signIn()"
                        id="log_in">
                        {{ 'BUTTON.LOG_IN' | translate }}
                    </button>
                    <a
                        href="javascript:void(0)"
                        class="signup"
                        (click)="signUp()"
                        *ngIf="selfSignUp"
                        >{{ 'BUTTON.SIGN_UP_LINK' | translate }}</a
                    >
                </ng-container>
                <div
                    class="more-info"
                    [ngClass]="{
                        'pt-1':
                            (!isOidcLoginMode && steps === 1) ||
                            (isOidcLoginMode && steps === 2)
                    }">
                    <a
                        rel="noopener noreferrer"
                        href="https://github.com/goharbor/harbor"
                        target="_blank"
                        >{{ 'BUTTON.MORE_INFO' | translate }}</a
                    >
                </div>
            </div>
        </form>
    </div>
</clr-main-container>
<sign-up #signupDialog (userCreation)="handleUserCreation($event)"></sign-up>
<about-dialog></about-dialog>
