{% 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>
{% endblock %}