<main class="hk-auth-page">
    <section class="hk-auth-shell" aria-labelledby="login-title">
        <div class="hk-auth-card">
            <header class="hk-auth-header">
                <app-brand size="large"></app-brand>
                <h1 id="login-title" class="hk-auth-title">{{ "login.signIn" | transloco }}</h1>
                <p class="hk-auth-subtitle">{{ "login.subtitle" | transloco }}</p>
            </header>

            <form (submit)="onSubmit($event)" class="hk-auth-form" novalidate>
                @if (errorMessage(); as errorMessageKey) {
                <div class="hk-auth-alert hk-auth-alert-error" role="alert" aria-live="assertive">
                    <i class="pi pi-exclamation-circle mt-0.5" aria-hidden="true"></i>
                    <span class="text-sm font-medium">{{ errorMessageKey | transloco }}</span>
                </div>
                } @if (infoMessage(); as infoMessageKey) {
                <div class="hk-auth-alert hk-auth-alert-success" role="status" aria-live="polite">
                    <i class="pi pi-envelope mt-0.5" aria-hidden="true"></i>
                    <span class="text-sm font-medium">{{ infoMessageKey | transloco }}</span>
                </div>
                } @if (!isMfaRequired()) {
                <div class="hk-auth-field">
                    <label for="email" class="hk-auth-field-label">{{ "login.emailLabel" | transloco }}</label>
                    <input
                        pInputText
                        id="email"
                        type="email"
                        inputmode="email"
                        autocapitalize="none"
                        spellcheck="false"
                        [formControl]="loginForm.email().control()"
                        autocomplete="username webauthn"
                        class="w-full"
                        [class.ng-invalid]="loginForm.email().touched() && loginForm.email().invalid()"
                        [class.ng-dirty]="loginForm.email().dirty()"
                        [attr.aria-invalid]="loginForm.email().touched() && loginForm.email().invalid() ? true : null"
                        [attr.aria-describedby]="loginForm.email().touched() && loginForm.email().invalid() ? 'login-email-error' : null"
                        [placeholder]="'login.emailPlaceholder' | transloco"
                    />
                    @if (loginForm.email().touched() && loginForm.email().invalid()) {
                    <small id="login-email-error" class="hk-auth-field-error" role="status">{{ "login.emailInvalid" | transloco }}</small>
                    }
                </div>

                <div class="hk-auth-field">
                    <div class="flex items-center justify-between gap-3">
                        <label for="password" class="hk-auth-field-label">{{ "login.passwordLabel" | transloco }}</label>
                        <a routerLink="/forgot-password" class="hk-auth-link">{{ "login.forgotPassword" | transloco }}</a>
                    </div>
                    <p-password
                        id="password"
                        [formControl]="loginForm.password().control()"
                        autocomplete="current-password"
                        [toggleMask]="true"
                        [feedback]="false"
                        class="w-full"
                        inputclass="w-full"
                        [class.ng-invalid]="loginForm.password().touched() && loginForm.password().invalid()"
                        [class.ng-dirty]="loginForm.password().dirty()"
                    ></p-password>
                    @if (loginForm.password().touched() && loginForm.password().invalid()) {
                    <small class="hk-auth-field-error" role="status">{{ "login.passwordRequired" | transloco }}</small>
                    }
                </div>

                <div class="flex items-center gap-2">
                    <p-checkbox [formControl]="loginForm.rememberMe().control()" [binary]="true" inputId="rememberMe" [attr.aria-describedby]="'rememberMeHelp'"></p-checkbox>
                    <label for="rememberMe" class="text-sm text-[var(--p-text-color)] cursor-pointer select-none">{{ "login.rememberMe" | transloco }}</label>
                    <button
                        id="rememberMeHelp"
                        type="button"
                        class="inline-flex h-6 w-6 items-center justify-center rounded-full text-muted-color transition-colors hover:bg-surface-100 hover:text-[var(--p-text-color)] focus:outline-none focus:ring-2 focus:ring-primary-500 dark:hover:bg-surface-800"
                        [attr.aria-label]="'login.sessionHelp' | transloco"
                        [pTooltip]="'login.sessionHelp' | transloco"
                        tooltipPosition="top"
                    >
                        <i class="pi pi-question-circle text-sm" aria-hidden="true"></i>
                    </button>
                </div>

                <p-button [label]="'login.signIn' | transloco" type="submit" [loading]="isLoading()" class="w-full" [disabled]="isLoading() || loginForm.email().invalid() || loginForm.password().invalid()"> </p-button>

                @if (isPasskeySupported()) {
                <div class="hk-auth-divider">{{ "login.or" | transloco }}</div>

                <div class="hk-auth-actions-center">
                    <p-button
                        [label]="'login.signInWithPasskey' | transloco"
                        type="button"
                        icon="pi pi-key"
                        severity="secondary"
                        [outlined]="true"
                        [loading]="isPasskeyLoading()"
                        [disabled]="isLoading() || isPasskeyLoading()"
                        (onClick)="onPasskeyLogin()"
                    />
                </div>
                } } @else {
                <div class="hk-auth-field">
                    <h2 class="text-base font-semibold text-[var(--p-text-color)] m-0">{{ "login.mfaTitle" | transloco }}</h2>
                    <p class="hk-auth-subtitle">{{ "login.mfaSubtitle" | transloco }}</p>
                </div>

                @if (mfaHasTotp()) {
                <div class="hk-auth-field">
                    <label for="mfaCode" class="hk-auth-field-label">{{ "login.totpCodeLabel" | transloco }}</label>
                    <p-inputotp inputId="mfaCode" [formControl]="loginForm.mfaCode().control()" [length]="6" [integerOnly]="true" [invalid]="loginForm.mfaCode().touched() && loginForm.mfaCode().invalid()" />
                </div>

                <p-button [label]="'login.verifyTotp' | transloco" type="submit" [loading]="isLoading()" class="w-full" [disabled]="isLoading() || loginForm.mfaCode().invalid()"> </p-button>
                } @if (mfaHasFallback()) { @if (mfaShowsFallbackDivider()) {
                <div class="hk-auth-divider">{{ "login.or" | transloco }}</div>
                } @if (mfaHasRecoveryCode()) {

                <div class="hk-auth-field">
                    <label for="recoveryCode" class="hk-auth-field-label">{{ "login.recoveryCodeLabel" | transloco }}</label>
                    <input
                        pInputText
                        id="recoveryCode"
                        type="text"
                        autocapitalize="characters"
                        spellcheck="false"
                        [formControl]="loginForm.recoveryCode().control()"
                        class="w-full"
                        [placeholder]="'login.recoveryCodePlaceholder' | transloco"
                        [class.ng-invalid]="loginForm.recoveryCode().touched() && loginForm.recoveryCode().invalid()"
                        [class.ng-dirty]="loginForm.recoveryCode().dirty()"
                    />
                </div>

                <p-button [label]="'login.verifyRecoveryCode' | transloco" type="button" [loading]="isLoading()" class="w-full" [disabled]="isLoading() || loginForm.recoveryCode().invalid()" (onClick)="verifyRecoveryCodeMfa()"> </p-button>
                } @if (mfaHasActionFallback()) {

                <div class="hk-auth-actions-center hk-auth-actions-stack">
                    @if (mfaHasVisiblePasskey()) {
                    <p-button
                        [label]="'login.signInWithPasskey' | transloco"
                        type="button"
                        icon="pi pi-key"
                        severity="secondary"
                        [outlined]="true"
                        [loading]="isPasskeyLoading()"
                        [disabled]="isLoading() || isPasskeyLoading()"
                        (onClick)="onPasskeyLogin()"
                    />
                    } @if (mfaHasEmailLink()) {

                    <p-button
                        [label]="'login.sendEmailLink' | transloco"
                        type="button"
                        icon="pi pi-envelope"
                        severity="secondary"
                        [outlined]="true"
                        [loading]="isLoading()"
                        [disabled]="isLoading() || isPasskeyLoading()"
                        (onClick)="requestEmailLinkMfa()"
                    />
                    }
                </div>
                } } }
            </form>
        </div>

        <footer class="hk-auth-footer">
            @if (showSignupLink()) {
            <p class="hk-auth-footer-text">
                <span>{{ "login.cloudSignupPrompt" | transloco }}</span>
                <a [href]="primarySignupUrl()" class="hk-auth-link"> {{ "login.cloudSignupAction" | transloco : { jurisdiction: ("signup.jurisdictions." + currentJurisdiction().toLowerCase()) | transloco } }} </a>
            </p>
            <p class="hk-auth-footer-text">
                <span>{{ "login.cloudSignupAlternatePrompt" | transloco }}</span>
                <a [href]="alternateSignupUrl()" class="hk-auth-link"> {{ "login.cloudSignupAlternateAction" | transloco : { jurisdiction: ("signup.jurisdictions." + alternateJurisdiction().toLowerCase()) | transloco } }} </a>
            </p>
            }
            <p class="hk-auth-footer-text">
                <span aria-hidden="true">&copy;</span>
                <span>{{ currentYear }} </span>
                <span>{{ "login.footerRights" | transloco }}</span>
            </p>
        </footer>
    </section>
</main>
