{{if not auth.IsAuthenticated}}
<dialog id="signup-modal" class="modal">
    <div class="modal-box bg-[#1a1a1a] border border-white/10 max-w-sm mx-4">
        <h3 class="text-lg font-bold text-white mb-1">Create your account</h3>
        <p class="text-sm text-[#888] mb-6">Enter your email to get started. No password needed.</p>

        <div id="signup-modal-body">
            <div id="signup-modal-error"></div>
            <form hx-post="/signup" hx-target="#signup-modal-error" hx-swap="innerHTML">
                <div class="mb-4">
                    <label class="block text-sm text-[#888] mb-1" for="modal-email">Email</label>
                    <input type="email" id="modal-email" name="email" required
                        class="input input-bordered w-full bg-[#111] border-white/10 text-white"
                        placeholder="you@example.com">
                </div>
                <button type="submit" class="btn w-full bg-white text-black hover:bg-[#e5e5e5] border-0">
                    Continue with Email
                </button>
            </form>
        </div>

        <p class="text-center text-sm text-[#666] mt-4">
            Already have an account? <a href="/signin" class="text-violet-400 hover:text-violet-300">Sign in</a>
        </p>
    </div>
    <form method="dialog" class="modal-backdrop">
        <button>close</button>
    </form>
</dialog>
{{end}}