{{define "content"}}
<div class="mx-auto max-w-md">
  <h1 class="text-2xl font-bold">Log in</h1>
  <p class="mt-1 text-sm text-stone-600">Welcome back to Where Woof.</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="/login" 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="email">Email</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="password">Password</label>
      <input id="password" name="password" type="password" class="mt-1 w-full rounded border border-stone-300 px-3 py-2" required>
    </div>
    <button type="submit" class="w-full rounded bg-stone-900 px-4 py-2 font-semibold text-white hover:bg-stone-700">Log in</button>
  </form>

  <p class="mt-4 text-center text-sm text-stone-600">New to Where Woof? <a href="/register" class="text-amber-600 hover:underline">Create an account</a></p>
</div>
{{end}}