{% extends "base.html" %}

{% block title %}Sign in · Agent Drop{% endblock %}

{% block head_extra %}
<style>
  .login-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--color-paper);
  }

  .login-title {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 30px;
    color: var(--color-ink);
    margin-bottom: 20px;
    letter-spacing: -0.01em;
  }

  .login-card {
    width: 100%;
    max-width: 340px;
    background: var(--color-paper);
    border: 1px solid var(--color-paper-edge);
    border-radius: 10px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .login-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .login-label {
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--color-ink-soft);
    letter-spacing: 0.02em;
  }

  .login-input {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--color-ink);
    background: var(--color-paper);
    border: 1px solid var(--color-paper-edge);
    border-radius: 6px;
    padding: 12px 14px;
    outline: none;
    transition: border-color 120ms ease;
  }

  .login-input:focus {
    border-color: var(--color-ink);
  }

  .login-button {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 14px;
    color: var(--color-paper);
    background: var(--color-ink);
    border: 0;
    border-radius: 6px;
    padding: 12px 14px;
    cursor: pointer;
    margin-top: 4px;
  }

  .login-button:hover {
    background: oklch(0.12 0.015 60);
  }

  .login-button:focus-visible {
    outline: 2px solid var(--color-ink);
    outline-offset: 2px;
  }

  .login-input:focus-visible {
    outline: 2px solid var(--color-ink);
    outline-offset: 1px;
  }

  .login-error {
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--color-ink-soft);
    margin-top: -2px;
  }
</style>
{% endblock %}

{% block body_class %}login-page{% endblock %}

{% block content %}
<main class="login-page">
  <h1 class="login-title">Agent Drop</h1>

  <form class="login-card" method="post" action="/login" autocomplete="off">
    <input type="hidden" name="_csrf" value="{{ csrf_token(request) }}" />
    <div class="login-field">
      <label class="login-label" for="password">Password</label>
      <input
        class="login-input"
        id="password"
        name="password"
        type="password"
        autocomplete="current-password"
        autofocus
        required
      />
    </div>

    {% if error == "bad_password" %}
    <p class="login-error">Incorrect password.</p>
    {% endif %}

    <input type="hidden" name="next" value="{{ next }}" />

    <button class="login-button" type="submit">Sign in</button>
  </form>
</main>
{% endblock %}