{% extends "base.html" %}

{% block content %}
<div style="max-width: 480px; margin: 4rem auto;">
  <article>
    <header class="text-center">
      <h1 style="margin-bottom: 0.5rem;">🦉 Login</h1>
      <p class="text-muted">Welcome back to Crumbforest</p>
    </header>

    <form method="post" action="/{{ lang }}/login">
      <label for="email">
        Email Address
        <input
          type="email"
          id="email"
          name="email"
          placeholder="admin@crumb.local"
          value="{{ form.email if form else '' }}"
          required
          autofocus
        >
      </label>

      <label for="password">
        Password
        <input
          type="password"
          id="password"
          name="password"
          placeholder="Enter your password"
          required
        >
      </label>

      <button type="submit" style="width: 100%;">
        Login
      </button>
    </form>

    <footer>
      <details>
        <summary>Demo Accounts</summary>
        <div style="padding: 1rem 0;">
          <table role="grid">
            <tbody>
              <tr>
                <th scope="row">Admin</th>
                <td><code>admin@crumb.local</code></td>
                <td><code>admin123</code></td>
              </tr>
              <tr>
                <th scope="row">Demo User</th>
                <td><code>demo@crumb.local</code></td>
                <td><code>demo123</code></td>
              </tr>
            </tbody>
          </table>
        </div>
      </details>
    </footer>
  </article>

  <!-- Quick Links -->
  <div class="text-center" style="margin-top: 2rem;">
    <small class="text-muted">
      <a href="/{{ lang }}/">← Back to Home</a>
      ·
      <a href="/docs" target="_blank">API Docs</a>
    </small>
  </div>
</div>
{% endblock %}
