{% extends "base.html" %}
{% block title %}Autentificare — ROA AUTOPASS{% endblock %}
{% block content %}
{# /login — card de autentificare branduit, o singura coloana (simplificat din layout-ul
   2-coloane US-010 PRD 5.16). Formular: CSRF, POST /login, link signup. #}
<div class="login-2col" style="max-width:860px; margin:32px auto;">
  {# Antet minimal deja randat in base.html (fara RAR dot, fara burger, fara account_name) #}
  <div class="login-shell">
    {# === Formular autentificare === #}
    <div class="login-form-col">
      <h3 style="font-size:var(--fs-xl); margin:0 0 4px;">Autentificare</h3>
      <p style="font-size:var(--fs-sm); color:var(--muted); margin:0 0 22px;">
        Intra in contul service-ului tau.
      </p>

      {% if error %}
      <div class="banner" style="margin-bottom:14px; padding:8px 12px;">{{ error }}</div>
      {% endif %}

      <form method="post" action="/login">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
        <div class="camp-slim">
          <label for="lf-email">Email</label>
          <input id="lf-email" type="email" name="email" required autocomplete="email">
        </div>
        <div class="camp-slim" style="margin-bottom:14px;">
          <label for="lf-parola">Parola</label>
          <input id="lf-parola" type="password" name="parola" required autocomplete="current-password">
        </div>
        <button type="submit" class="btn-primary-full">Intra in cont</button>
      </form>

      <p class="login-foot">
        Cont nou? <a href="/signup" style="color:var(--accent);">Inregistreaza service-ul</a>
      </p>
    </div>
  </div>
</div>

<style>
  /* /login: card de autentificare profesional, o singura coloana. */
  .login-shell {
    display:grid; grid-template-columns:1fr;
    border:1px solid var(--line); border-radius:16px; overflow:hidden;
    background:var(--card); max-width:460px; margin:0 auto;
  }
  .login-form-col { padding:40px 38px; display:flex; flex-direction:column; justify-content:center; }
  .btn-primary-full { width:100%; min-height:46px; font-family:var(--font-ui); font-size:var(--fs-md);
                      font-weight:600; background:var(--accent); color:#fff; border:none;
                      border-radius:8px; cursor:pointer; margin-top:4px; }
  .btn-primary-full:hover { filter:brightness(1.08); }
  .login-foot { text-align:center; font-size:var(--fs-sm); color:var(--muted); margin-top:18px; }
  @media (max-width:640px) {
    .login-form-col { padding:28px 22px; }
  }
</style>
{% endblock %}