{% extends "base.html" %}
{% block title %}Login — Fabled Scryer{% endblock %}
{% block content %}
<div style="max-width:400px;margin:4rem auto;">
    <div class="card">
        <h2 class="page-title">Sign In</h2>
        <p style="color: var(--text-dim); font-family: var(--font-serif); font-style: italic; font-size: 0.95rem; margin-top: 0.25rem;">Where the realm's watch convenes.</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">
                <label>Username</label>
                <input type="text" name="username" autofocus required>
            </div>
            <div class="form-group">
                <label>Password</label>
                <input type="password" name="password" required>
            </div>
            <button type="submit" class="btn {% if oidc_enabled %}btn-ghost{% endif %}" style="width:100%;">
              Sign In
            </button>
        </form>
    </div>
</div>
{% endblock %}