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

            @if (successMessage()) {
            <div class="flex flex-col gap-4 text-center" role="status" aria-live="polite">
                <div class="hk-auth-alert hk-auth-alert-success justify-center">
                    <i class="pi pi-check-circle text-xl mt-0.5" aria-hidden="true"></i>
                    <div>
                        <p class="text-sm font-semibold">{{ "password.forgot.successTitle" | transloco }}</p>
                        <p class="text-xs mt-1">{{ "password.forgot.successDescription" | transloco: { email: form.email().value() } }}</p>
                    </div>
                </div>
                <a routerLink="/login" class="hk-auth-link self-center">{{ "password.forgot.returnToSignIn" | transloco }}</a>
            </div>
            } @else {
            <form (submit)="onSubmit($event)" class="hk-auth-form" novalidate>
                @if (errorMessage()) {
                <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">{{ errorMessage()! | transloco }}</span>
                </div>
                }

                <div class="hk-auth-field">
                    <label for="email" class="hk-auth-field-label">{{ "common.emailAddress" | transloco }}</label>
                    <input
                        pInputText
                        id="email"
                        type="email"
                        inputmode="email"
                        autocapitalize="none"
                        spellcheck="false"
                        [formControl]="form.email().control()"
                        class="w-full"
                        autocomplete="email"
                        [attr.aria-invalid]="form.email().touched() && form.email().invalid() ? true : null"
                        [attr.aria-describedby]="form.email().touched() && form.email().invalid() ? 'forgot-email-error' : null"
                        [placeholder]="'common.emailPlaceholder' | transloco"
                    />
                    @if (form.email().touched() && form.email().invalid()) {
                    <small id="forgot-email-error" class="hk-auth-field-error" role="status">{{ "login.emailInvalid" | transloco }}</small>
                    }
                </div>

                <p-button [label]="'password.forgot.sendResetLink' | transloco" type="submit" [loading]="isLoading()" class="w-full" [disabled]="isLoading() || form().invalid()"> </p-button>

                <div class="text-center mt-1">
                    <a routerLink="/login" class="hk-auth-link-muted">{{ "password.forgot.backToSignIn" | transloco }}</a>
                </div>
            </form>
            }
        </div>
    </section>
</main>
