{#
  _stepper.html — Antet wizard import (PUR vizual, fara logica de rutare).

  Parametru: `pas` (integer 1-4) — pasul curent.
  Utilizare in template-uri care mostenesc contextul Jinja2:
    {% set pas = 1 %}{% include '_stepper.html' %}
  sau cu `with`:
    {% with pas=2 %}{% include '_stepper.html' %}{% endwith %}

  Cei 4 pasi ficsi:
    1. Incarca fisier
    2. Potriveste coloanele
    3. Verifica
    4. Confirma trimiterea

  Stari vizuale:
    - index < pas  → "facut" (bulina plina, text bifat)
    - index == pas → "activ" (evidentiat, aria-current="step")
    - index > pas  → "viitor" (estompat)
#}
{%- set _pasi_import = [
  (1, "Incarca fisier",        "Trage un fisier xlsx/csv aici sau foloseste butonul de alegere."),
  (2, "Potriveste coloanele",  "Spune-ne ce coloana din fisier corespunde cu ce camp RAR."),
  (3, "Verifica",              "Verifica randurile inainte sa le trimiti la RAR."),
  (4, "Confirma trimiterea",   "Confirma numarul de prezentari — actiunea e ireversibila."),
] -%}
<nav class="stepper-import" aria-label="Pasii importului" style="
  display:flex;
  gap:0;
  align-items:stretch;
  margin-bottom:20px;
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  background:var(--card);
">
  {% for nr, titlu, ajutor in _pasi_import %}
  {%- if nr < pas %}
    {%- set cls = "facut" -%}
    {%- set aria = "" -%}
  {%- elif nr == pas %}
    {%- set cls = "activ" -%}
    {%- set aria = ' aria-current="step"' -%}
  {%- else %}
    {%- set cls = "viitor" -%}
    {%- set aria = "" -%}
  {%- endif %}
  <div class="stepper-pas stepper-pas--{{ cls }}"{{ aria | safe }}
       style="
         flex:1;
         padding:10px 14px;
         border-right:{% if not loop.last %}1px solid var(--line){% else %}none{% endif %};
         {% if cls == 'activ' %}
           background:rgba(91,141,239,.10);
         {% elif cls == 'facut' %}
           opacity:1;
         {% else %}
           opacity:.4;
         {% endif %}
       ">
    <div style="display:flex; align-items:center; gap:6px; margin-bottom:2px;">
      <span class="stepper-nr" style="
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width:20px;
        height:20px;
        border-radius:50%;
        font-size:11px;
        font-weight:700;
        flex-shrink:0;
        {% if cls == 'activ' %}
          background:var(--accent);
          color:#fff;
        {% elif cls == 'facut' %}
          background:var(--ok);
          color:#fff;
        {% else %}
          background:var(--line);
          color:var(--muted);
        {% endif %}
      ">
        {% if cls == 'facut' %}&#10003;{% else %}{{ nr }}{% endif %}
      </span>
      <span style="
        font-size:13px;
        font-weight:{% if cls == 'activ' %}600{% else %}400{% endif %};
        color:{% if cls == 'activ' %}var(--ink){% elif cls == 'facut' %}var(--ink){% else %}var(--muted){% endif %};
      ">{{ titlu }}</span>
    </div>
    {% if cls == 'activ' %}
    <p class="muted" style="margin:0; font-size:12px; padding-left:26px;">{{ ajutor }}</p>
    {% endif %}
  </div>
  {% endfor %}
</nav>