{% extends "base.html" %}

{% block title %}Login - Lumière{% endblock %}

{% block content %}
<div style="max-width: 320px; margin: 60px auto; padding: 0 20px;">
  <div style="text-align: center; margin-bottom: 40px;">
    <h1 style="margin: 0; font-size: 32px; color: var(--text);">Lumière</h1>
    <p style="color: var(--muted); margin: 8px 0 0 0;">Film Diary</p>
  </div>

  <form method="post" style="display: flex; flex-direction: column; gap: 16px;">
    {% if error %}
    <div style="
      background: rgba(223, 110, 98, 0.1);
      border: 1px solid rgba(223, 110, 98, 0.4);
      color: #ffc7c0;
      padding: 12px;
      border-radius: 6px;
      font-size: 14px;
    ">{{ error }}</div>
    {% endif %}

    <div style="display: flex; flex-direction: column; gap: 6px;">
      <label for="password" style="font-weight: 500; font-size: 14px; color: var(--text);">Password</label>
      <input
        type="password"
        id="password"
        name="password"
        required
        autofocus
        style="
          padding: 11px 12px;
          border: 1px solid var(--line);
          border-radius: 6px;
          font-size: 16px;
          background: #11100e;
          color: var(--text);
        "
      />
    </div>

    <button
      type="submit"
      style="
        padding: 11px 12px;
        background: var(--accent);
        color: #0e0a04;
        border: none;
        border-radius: 6px;
        font-size: 16px;
        font-weight: 800;
        cursor: pointer;
      "
    >
      Sign In
    </button>
  </form>

  <div style="margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--line); text-align: center;">
    <p style="margin: 0 0 16px 0; color: var(--muted); font-size: 14px;">Want to learn more?</p>
    <div style="display: flex; flex-direction: column; gap: 12px;">
      <a href="/about" style="display: inline-block; padding: 11px 24px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 6px; text-decoration: none; font-weight: 500; font-size: 14px;">About the Rating System</a>
      <a href="/tyler" style="display: inline-block; padding: 11px 24px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 6px; text-decoration: none; font-weight: 500; font-size: 14px;">View Tyler's Profile</a>
    </div>
  </div>

  <footer style="text-align: center; padding: 40px 20px; color: var(--muted); font-size: 12px; margin-top: 60px; border-top: 1px solid var(--line);">
    <p style="margin: 0;">Made with <a href="https://git.tylerhoang.xyz/lumi.git/" style="color: var(--accent); text-decoration: none;">Lumière</a></p>
  </footer>
</div>
{% endblock %}