<?php

/**
 * Auth — Forgot Password View
 *
 * Renders the "Forgot Password" form where users submit their email
 * address to request a password reset link.
 *
 * Location: app/views/auth/forgot_password.php
 * Controller render call: $this->render('auth/forgot_password', [...])
 * Wrapped by: app/views/layouts/public.php
 *
 * Variables available in scope (extracted by BaseController::render()):
 *   $flash  — array<string, string> — flash messages from previous request
 *   $title  — string                — page title
 *
 * Crew users are excluded from this flow (SPRINT2_PLANNING §5 AUTH-003).
 * The form hint informs users of this constraint.
 *
 * Output escaping:
 *   All dynamic output uses escape_html() — no raw echo (DBP v1.1 §9.2).
 *
 * CSRF:
 *   The hidden _csrf field is output via csrf_field() helper.
 *   POST /forgot-password is protected by CsrfMiddleware.
 *
 * @ref SPRINT2_PLANNING.md §5, DBP v1.1 §9.2, AUTH-003
 */

/** @var array<string, string> $flash */
$flash = $flash ?? [];

?>

<div class="w-full max-w-md mx-auto" id="forgot-password-wrapper">

    <!-- Logo above card panel -->
    <div class="flex justify-center mb-6">
        <a href="/" class="hover:opacity-85 transition-opacity" aria-label="INVEETAIRE Home">
            <img src="<?= asset('/assets/branding/logo/Primary-Logo-Light-TransparentBG.png') ?>" alt="INVEETAIRE Logo" style="height: 76px; width: auto; object-fit: contain;">
        </a>
    </div>

    <!-- ── Card ─────────────────────────────────────────────────────────── -->
    <div class="bg-white rounded-2xl shadow-xl overflow-hidden border border-slate-100">

        <!-- ── Header ───────────────────────────────────────────────────── -->
        <div class="hero-card-gradient px-8 py-10 text-center rounded-t-2xl">
            <h1 class="text-2xl font-bold text-white tracking-tight">Reset your password</h1>
            <p class="mt-1 text-sm" style="color: var(--color-neutral-300);">Enter your account email to receive a reset link</p>
        </div>

        <!-- ── Flash Messages ────────────────────────────────────────────── -->
        <?php if (!empty($flash)): ?>
            <div class="px-8 pt-6" id="forgot-flash-container" role="alert" aria-live="polite">
                <?php foreach ($flash as $type => $message): ?>
                    <?php
                    if ($type === 'success') {
                        $alertClass = 'alert-success';
                    } elseif ($type === 'warning') {
                        $alertClass = 'alert-warning';
                    } else {
                        $alertClass = 'alert-danger';
                    }
                    ?>
                    <div class="alert <?= escape_html($alertClass) ?> mb-2" id="flash-<?= escape_html($type) ?>">
                        <span><?= escape_html($message) ?></span>
                    </div>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>

        <!-- ── Forgot Password Form ──────────────────────────────────────── -->
        <form
            method="POST"
            action="<?= url('/forgot-password') ?>"
            id="forgot-password-form"
            novalidate
            class="px-8 py-8 space-y-5"
        >
            <?= csrf_field() ?>

            <!-- Email address -->
            <div class="form-group">
                <label for="email" class="form-label">
                    Email Address
                </label>
                <div class="relative">
                    <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                        <i class="fa-solid fa-envelope text-slate-400 text-sm"></i>
                    </div>
                    <input
                        type="email"
                        id="email"
                        name="email"
                        autocomplete="email"
                        required
                        class="form-input pl-10"
                        placeholder="you@example.com"
                        aria-required="true"
                        aria-describedby="email-hint"
                    >
                </div>
                <p id="email-hint" class="mt-1 text-xs text-slate-500">
                    For couple and admin accounts only &nbsp;·&nbsp; Crew passwords are managed by your couple account.
                </p>
            </div>

            <!-- Submit -->
            <div class="pt-2">
                <button
                    type="submit"
                    id="forgot-password-submit-btn"
                    class="btn btn-primary btn-md w-full"
                >
                    <i class="fa-solid fa-paper-plane mr-1"></i> Send reset link
                </button>
            </div>

        </form>

        <!-- ── Footer Links ─────────────────────────────────────────────── -->
        <div class="border-t border-slate-100 px-8 py-5 text-center bg-slate-50">
            <a
                href="<?= url('/couple') ?>"
                id="back-to-login-link"
                class="link-elegant text-sm font-semibold"
            >
                <i class="fa-solid fa-arrow-left text-[10px] mr-1"></i> Back to sign in
            </a>
        </div>

    </div>

    <!-- ── Attribution ──────────────────────────────────────────────────── -->
    <p class="mt-6 text-center text-xs text-gray-400">
        Secured by Inveetaire &mdash; Premium Wedding Experience Platform
    </p>

</div>
