{{template "main.html" .}}

{{define "title"}}Sign up - ReadySite Hosting{{end}}

{{define "content"}}
<div class="min-h-[80vh] flex items-center justify-center px-6">
    <div class="w-full max-w-sm">
        <div class="text-center mb-8">
            <h1 class="text-2xl font-bold text-white mb-2">Create your account</h1>
            <p class="text-[#888] text-sm">Enter your email to get started. No password needed.</p>
        </div>

        <div id="auth-card" class="rounded-xl border border-white/10 bg-white/[0.02] p-6">
            <div id="auth-error"></div>
            <form hx-post="/signup" hx-target="#auth-error" hx-swap="innerHTML">
                <div class="mb-4">
                    <label class="block text-sm text-[#888] mb-1" for="email">Email</label>
                    <input type="email" id="email" name="email" required autofocus
                        class="input input-bordered w-full bg-[#1a1a1a] 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-6">
            Already have an account? <a href="/signin" class="text-violet-400 hover:text-violet-300">Sign in</a>
        </p>
    </div>
</div>
{{end}}