{% extends "layout.html" %}
{% block content %}
<style>
  .auth-wrap { min-height: calc(100vh - 120px); display: grid; place-items: center; }
  .auth-card { width: 100%; max-width: 420px; padding: 24px; }
  .auth-title { font-weight: 800; font-size: 22px; margin-bottom: 6px; color: var(--brand-600); }
  .auth-sub { color: var(--muted); margin-bottom: 16px; }
  .form-row { margin-bottom: 12px; display: grid; gap: 6px; }
</style>

<div class="auth-wrap">
  <div class="panel auth-card">
    <div class="auth-title">Welcome back</div>
    <div class="auth-sub">Sign in to continue</div>

    {% if error %}
      <div class="alert warn" style="margin-bottom:12px;">{{ error }}</div>
    {% endif %}

    <form method="post" action="/login">
      <div class="form-row">
        <label class="label" for="username">Username</label>
        <input id="username" name="username" type="text" class="input" autofocus required>
      </div>
      <div class="form-row">
        <label class="label" for="password">Password</label>
        <input id="password" name="password" type="password" class="input" required>
      </div>
      <div class="form-row" style="margin-top:8px;">
        <button type="submit" class="btn primary" style="width:100%;">Sign in</button>
      </div>
    </form>

    <div class="form-row" style="margin-top:8px;">
      <small class="label">Tip: I hope you enjoy all of your free time! P.S. Trevor</small>
    </div>
  </div>
</div>
{% endblock %}