<div id="acasa-section">

  {# === Banner ne-blocant: cont incomplet (US-002) ===
     Apare cand accounts.name / email / CUI sunt necompletate (conturi legacy sau create din CLI).
     NU blocheaza importul sau uploadul — doar orienteaza operatorul sa completeze datele.
     Dispare automat dupa ce contul devine complet (re-render la urmatoarea navigare/reload).
  #}
  {% if cont_incomplet %}
  <div class="card banner" style="border-color:var(--warn); background:color-mix(in srgb, var(--warn) 12%, var(--card)); margin-bottom:14px; padding:10px 14px; font-size:13px;">
    <strong>Completeaza datele firmei (email / CUI).</strong>
    Contul tau nu are inca email de contact si CUI configurate.
    <a href="/?tab=cont" style="margin-left:6px;">Completeaza acum &rarr;</a>
  </div>
  {% endif %}

  {# === Container colapsabil: stepper + upload intr-un singur element <details> (US-006).
     Serverul seteaza atributul `open` din are_trimiteri:
       are_trimiteri=False (first-run)  → open  (importul e vizibil imediat, fara JS)
       are_trimiteri=True  (returning)  → colapsat (nu ocupa ecranul, dar e accesibil la click)
     Degradare fara JS: corecta pe ambele ramuri.
     In timpul fluxului (mapcoloane/preview), HTMX face swap pe #import-section (descendentul
     intern) → <details> ramane neatins → containerul ramane deschis intre pasi. === #}
  <details id="import-details"{% if not are_trimiteri %} open{% endif %}>
    <summary>+ Importa fisier (XLSX / CSV)</summary>
    {% include '_upload.html' %}
  </details>

  {# === Subordonat: primii pasi pe un singur rand compact === #}
  {% set toti_esentiali = are_creds and are_trimiteri %}
  {% if not toti_esentiali %}
  <div class="card" style="margin-top:14px; padding:12px 16px;">
    <div style="display:flex; gap:20px; flex-wrap:wrap; align-items:center; font-size:13px;">
      <span class="muted" style="font-weight:600;">Primii pasi:</span>

      {# Pas 1: Cont RAR (esential) #}
      <span style="display:inline-flex; align-items:center; gap:6px;">
        {% if are_creds %}
        <span class="s-sent" aria-hidden="true" style="font-weight:bold;">&#10003;</span>
        {% else %}
        <span class="muted" aria-hidden="true">&#9675;</span>
        {% endif %}
        <a href="/?tab=cont">Cont RAR</a>
      </span>

      {# Pas 2: Cheie API (optional) #}
      <span style="display:inline-flex; align-items:center; gap:6px;">
        {% if are_cheie_folosita %}
        <span class="s-sent" aria-hidden="true" style="font-weight:bold;">&#10003;</span>
        {% else %}
        <span class="muted" aria-hidden="true">&#9675;</span>
        {% endif %}
        <a href="/?tab=cont">Cheie API</a>
        <span class="muted">(optional)</span>
      </span>

      {# Pas 3: Import (esential) — marcat ca pas curent #}
      <span style="display:inline-flex; align-items:center; gap:6px;">
        {% if are_trimiteri %}
        <span class="s-sent" aria-hidden="true" style="font-weight:bold;">&#10003;</span>
        {% else %}
        <span class="s-queued" aria-hidden="true" style="font-weight:bold;">&#9679;</span>
        {% endif %}
        <strong>Import</strong> <span class="muted">(incarca fisierul sus)</span>
      </span>
    </div>
  </div>
  {% endif %}

  {# Sectiunea Trimiteri, permanenta sub upload.
     La first-run (zero trimiteri), randam un placeholder <section> gol/ascuns — necesar
     ca OOB swap-ul de la confirma sa gaseasca tinta valida in DOM si sa injecteze
     _coada.html fara reload complet. Fara placeholder, HTMX ignora silentios OOB-ul. #}
  {% if are_trimiteri %}
  {% include '_coada.html' %}
  {% else %}
  <section id="trimiteri-section" hidden></section>
  {% endif %}

</div>
