{{define "content"}}
<div class="mx-auto max-w-md">
  <h1 class="text-2xl font-bold">Create your account</h1>
  <p class="mt-1 text-sm text-stone-600">Register to claim your Where Woof tag.</p>

  {{if .Error}}<p class="mt-4 rounded bg-red-50 px-4 py-2 text-sm text-red-700 border border-red-200">{{.Error}}</p>{{end}}

  <form method="post" action="/register" class="mt-6 space-y-4 rounded-xl border border-stone-200 bg-white p-6 shadow-sm">
    <div>
      <label class="block text-sm font-medium" for="name">Name</label>
      <input id="name" name="name" type="text" class="mt-1 w-full rounded border border-stone-300 px-3 py-2" required>
    </div>
    <div>
      <label class="block text-sm font-medium" for="email">Email (your username)</label>
      <input id="email" name="email" type="email" class="mt-1 w-full rounded border border-stone-300 px-3 py-2" required>
    </div>
    <div>
      <label class="block text-sm font-medium" for="confirm_email">Confirm email</label>
      <input id="confirm_email" name="confirm_email" type="email" class="mt-1 w-full rounded border border-stone-300 px-3 py-2" required>
    </div>
    <div>
      <label class="block text-sm font-medium" for="password">Password</label>
      <input id="password" name="password" type="password" class="mt-1 w-full rounded border border-stone-300 px-3 py-2" minlength="8" required>
    </div>
    <button type="submit" class="w-full rounded bg-stone-900 px-4 py-2 font-semibold text-white hover:bg-stone-700">Create account</button>
  </form>

  <p class="mt-4 text-center text-sm text-stone-600">Already have an account? <a href="/login" class="text-amber-600 hover:underline">Log in</a></p>
</div>
{{end}}