<main class="hk-auth-page">
    <section class="hk-auth-shell" aria-labelledby="reset-password-title">
        <div class="hk-auth-card">
            <header class="hk-auth-header">
                <app-brand size="large"></app-brand>
                <h1 id="reset-password-title" class="hk-auth-title">{{ "password.reset.title" | transloco }}</h1>
            </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>
                    <p class="text-sm font-semibold">{{ "password.reset.success" | transloco }}</p>
                </div>
                <p-button [label]="'password.reset.signInNow' | transloco" type="button" (onClick)="goToLogin()" class="w-full"></p-button>
            </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>
                } @if (!token) {
                <div class="hk-auth-alert hk-auth-alert-error" role="alert" aria-live="assertive">
                    <i class="pi pi-times-circle mt-0.5" aria-hidden="true"></i>
                    <span class="text-sm font-medium">{{ "password.reset.errors.tokenMissing" | transloco }}</span>
                </div>
                } @else {
                <div class="hk-auth-field">
                    <label for="password" class="hk-auth-field-label">{{ "password.reset.newPasswordLabel" | transloco }}</label>
                    <p-password
                        id="password"
                        [formControl]="form.password().control()"
                        [toggleMask]="true"
                        [feedback]="false"
                        class="w-full"
                        [attr.aria-invalid]="form.password().touched() && form.password().invalid() ? true : null"
                        [attr.aria-describedby]="'reset-password-help'"
                    ></p-password>
                    <p id="reset-password-help" class="hk-auth-field-help">{{ "password.reset.minimumLength" | transloco }}</p>
                    @if (form.password().touched() && form.password().invalid()) {
                    <small class="hk-auth-field-error" role="status">{{ "password.reset.minimumLength" | transloco }}</small>
                    }
                </div>

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