{{define "login"}}
  {{template "base" .}}
{{end}}

{{define "login_content"}}
<div class="max-w-md mx-auto p-6">
  <h1 class="text-2xl font-bold text-white mb-4">Sign in</h1>
  {{if .error}}
  <div class="bg-red-900/50 border border-red-700 text-red-200 rounded p-3 mb-4">{{.error}}</div>
  {{end}}
  <form method="POST" action="{{url "/editor/login"}}" class="space-y-4">
    <input type="hidden" name="csrf_token" value="{{.csrf_token}}" />
    {{if .return_to}}
    <input type="hidden" name="return_to" value="{{.return_to}}" />
    {{end}}
    <div>
      <label class="block text-sm text-gray-300 mb-1" for="username">Username or Email</label>
      <input id="username" name="username" type="text" required class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white" />
    </div>
    <div>
      <label class="block text-sm text-gray-300 mb-1" for="password">Password</label>
      <input id="password" name="password" type="password" required class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white" />
    </div>
    <div class="flex items-center justify-between">
      <button type="submit" class="btn-primary"><i class="fas fa-sign-in-alt mr-2"></i>Login</button>
      <a href="#" class="text-sm text-blue-400 hover:underline">Forgot password?</a>
    </div>
  </form>
</div>
{{end}}

{{define "login_scripts"}}
<script>
// optional: add client-side logic here
</script>
{{end}}