{% extends "base.html" %}

{% block title %}Login - Tessera{% endblock %}

{% block content %}
<section>
  <h2>Login</h2>

  <div style="max-width: 400px; margin: 2rem auto;">
    {% if error %}
    <div class="error" style="margin-bottom: 1rem;">
      Invalid email or password. Please try again.
    </div>
    {% endif %}

    <form method="POST" action="/login">
      <label for="email">Email</label>
      <input type="email" id="email" name="email" required placeholder="your@email.com" autofocus>

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

      <button type="submit" style="width: 100%; margin-top: 1rem;">Login</button>
    </form>

    <div style="margin-top: 2rem; padding: 1rem; background: var(--light-gray); border-left: var(--border-thick);">
      <p style="margin-bottom: 0.5rem;"><strong>Demo Accounts:</strong></p>
      <ul style="list-style: none; padding: 0; margin: 0; font-size: 0.9rem;">
        <li style="padding: 0.25rem 0;"><code>admin@test.com</code> / <code>admin</code> (Admin)</li>
        <li style="padding: 0.25rem 0;"><code>team_admin@test.com</code> / <code>team_admin</code> (Team Admin)</li>
        <li style="padding: 0.25rem 0;"><code>user@test.com</code> / <code>user</code> (User)</li>
      </ul>
    </div>
  </div>
</section>
{% endblock %}