{#-
  login.html — sign-in page. Inherits the auth contract from layout_auth.
  Note how little this file decides: no security wiring, no shell, no theme.
  It provides the form and the cross-links; the layout owns everything else.
-#}
{% extends "layout_auth.html" %}

{% block title %}Sign in{% endblock %}

{% block eyebrow %}<span class="fbb-eyebrow">Account access</span>{% endblock %}
{% block heading %}Welcome back{% endblock %}
{% block subheading %}
  <p class="fbb-muted">Sign in to continue to your workspace.</p>
{% endblock %}

{% block auth_body %}
  <form class="fbb-stack" method="post" action="{{ url_for('login') }}" data-fbb-loading data-fbb-veil>
    {#- CSRF: matches core/security.py csrf_ok() (form field OR header). -#}
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

    <div class="fbb-field">
      <label class="fbb-label" for="email">Email</label>
      <input class="fbb-input" id="email" name="email" type="email"
             autocomplete="email" required autofocus placeholder="you@example.com">
    </div>

    <div class="fbb-field">
      <div class="fbb-cluster fbb-cluster-between">
        <label class="fbb-label" for="password">Password</label>
        <a class="fbb-help" href="{{ url_for('forgot') }}">Forgot?</a>
      </div>
      <div class="fbb-input-group">
        <input class="fbb-input" id="password" name="password" type="password"
               autocomplete="current-password" required placeholder="••••••••">
        <button class="fbb-input-affix" type="button" data-fbb-reveal="#password" aria-label="Show password">
          <svg class="fbb-icon"><use href="{{ sprite }}#eye"></use></svg>
        </button>
      </div>
    </div>

    <button class="fbb-btn fbb-btn-primary fbb-btn-block" type="submit">
      Sign in
      <svg class="fbb-icon"><use href="{{ sprite }}#arrow-right"></use></svg>
    </button>
  </form>
{% endblock %}

{% block auth_foot %}
  Don't have an account? <a href="{{ url_for('register') }}">Create one</a>
{% endblock %}