{% extends "base.html" %}
{%- import "macros.html" as macros -%}
{% block title %}Login - zero2prod{% endblock %}
{% block content %}
  <div class="flex-1 flex items-center justify-center">
    <div class="max-w-md w-full space-y-8">
      <div class="text-center">
        <h2 class="text-3xl font-bold text-gray-900">Login</h2>
        <p class="mt-2 text-sm text-gray-600">Sign in to access the admin dashboard.</p>
      </div>
      <div class="bg-white rounded-lg shadow-md p-8 border border-gray-200">
        <form hx-post="/login"
              hx-target="#login-messages"
              hx-swap="innerHTML"
              class="space-y-6">
          <div>
            <label for="username" class="block text-sm font-medium text-gray-700 mb-2">Username</label>
            <input type="text"
                   id="username"
                   name="username"
                   required
                   class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
          </div>
          <div>
            <label for="password" class="block text-sm font-medium text-gray-700 mb-2">Password</label>
            <input type="password"
                   id="password"
                   name="password"
                   required
                   class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
          </div>
          <button type="submit"
                  hx-indicator="this"
                  class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">
            <span class="continue-text">Continue</span>
            <span class="htmx-indicator">
              {% call macros::spinner(class="text-white", highlight_class="text-gray-500", size=20) %}
              </span>
            </button>
            <div id="login-messages" class="empty:hidden"></div>
          </form>
        </div>
        <div class="text-center">
          <a href="/"
             class="text-sm text-blue-600 hover:text-blue-500 transition-colors">← Back to homepage</a>
        </div>
      </div>
    </div>
  {% endblock %}