{{template "base.html" .}}

{{define "title"}}Register{{end}}

{{define "content"}}
<div class="container mx-auto px-4 py-8 max-w-md">
    <h1 class="text-3xl font-bold text-center mb-8">Register</h1>
    
    <form hx-post="/api/auth/register" hx-target="#result" hx-swap="innerHTML" class="bg-white p-6 rounded-lg shadow-md">
        <div class="mb-4">
            <label class="block text-gray-700 mb-2">Email</label>
            <input type="email" name="email" class="w-full px-3 py-2 border rounded" required>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 mb-2">Username</label>
            <input type="text" name="username" class="w-full px-3 py-2 border rounded" required>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 mb-2">Password</label>
            <input type="password" name="password" class="w-full px-3 py-2 border rounded" required>
        </div>
        <button type="submit" class="w-full bg-green-500 text-white py-2 rounded hover:bg-green-600">
            Register
        </button>
    </form>
    
    <div id="result" class="mt-4 text-center"></div>
    
    <p class="text-center mt-4">
        <a href="/login" class="text-blue-500 hover:underline">Already have an account? Login</a>
    </p>
</div>
{{end}}