{% extends "base.html" %}
{% block title %}Login — Fabled Scryer{% endblock %}
{% block content %}
<div style="max-width:400px;margin:4rem auto;">
    <div class="card">
        <h1 style="font-family: var(--font-serif); font-weight: 700; font-size: 2.75rem; color: var(--gold); text-align: center; margin: 0; line-height: 1.1; letter-spacing: 0.02em;">Roundtable</h1>
        <p style="color: var(--text-dim); font-family: var(--font-serif); font-style: italic; font-size: 1.15rem; text-align: center; margin: 0 0 1.5rem;">Under Watch, Under Care.</p>
        {% if error %}
        <div style="color:var(--red);font-size:0.88rem;margin-bottom:1rem;
                    background:var(--red-dim);padding:0.6rem 0.75rem;border-radius:4px;">
          {{ error }}
        </div>
        {% endif %}
        {% if oidc_enabled %}
        <a href="/login/oidc" class="btn" style="width:100%;text-align:center;margin-bottom:1.25rem;display:block;">
          Sign in with SSO
        </a>
        <div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:1.25rem;">
          <div style="flex:1;height:1px;background:var(--border-mid);"></div>
          <span style="font-size:0.78rem;color:var(--text-dim);">or</span>
          <div style="flex:1;height:1px;background:var(--border-mid);"></div>
        </div>
        {% endif %}
        <form method="post" action="/login">
            <div class="form-group">
                <input type="text" name="username" placeholder="Username" autofocus required>
            </div>
            <div class="form-group">
                <input type="password" name="password" placeholder="Password" required>
            </div>
            <button type="submit" class="btn {% if oidc_enabled %}btn-ghost{% endif %}" style="width:100%;">
              Sign In
            </button>
        </form>
    </div>
</div>
{% endblock %}