{% extends "base.html" %}

{% block breadcrumbs %}
<nav aria-label="breadcrumb">
  <ol class="breadcrumb mb-0">
    <li class="breadcrumb-item"><a href="/">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">{{ title }}</li>
  </ol>
</nav>
{% endblock %}

{% block main %}
<div class="auth-shell">
  <div class="auth-form-col">
    <div class="auth-form-wrap">
      <div class="section-label mb-2">authenticate</div>
      <h1 class="fw-bolder text-white" style="letter-spacing: -0.01em; font-size: 1.9rem;">{{ title }}</h1>
      <p class="text-muted small mb-4">Access is single-operator. Use the password from your <code>.env</code>.</p>

      {% if error %}
      <div class="alert alert-danger py-2 small">{{ error }}</div>
      {% endif %}

      <form method="POST" action="{{ url_for('login') }}">
        <input type="hidden" name="next" value="{{ next }}" />
        <div class="form-floating mb-3">
          <input type="password" class="form-control" name="password" id="id_password" placeholder="Password" required autofocus />
          <label for="id_password">Password</label>
        </div>
        <div class="d-flex justify-content-end mt-4">
          <button type="submit" class="btn btn-primary">Login →</button>
        </div>
      </form>
    </div>
  </div>
  <div class="auth-visual-col">
    <div style="position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding: 2rem;">
      <div class="terminal-block" style="max-width: 380px; width: 100%;">
        <span class="t-line"><span class="t-comment"># status · monitor</span></span>
        <span class="t-line"><span class="t-prompt">operator$</span><span class="t-out">whoami</span></span>
        <span class="t-line"><span class="t-val">anonymous</span></span>
        <span class="t-line"><span class="t-prompt">operator$</span><span class="t-out">login --mode=interactive</span></span>
        <span class="t-line"><span class="t-key">awaiting</span>=<span class="t-val">credentials</span> <span class="t-cursor"></span></span>
      </div>
    </div>
  </div>
</div>
{% endblock %}