{# _editare_preview_modal.html — fragment de editare rand preview in modalul global.
   US-006 (PRD 5.12): swap-uit in #detaliu-modal-body de butonul Editeaza din preview.
   US-007 (PRD 5.12): butonul 'Confirma valorile' apare DOAR pe randurile needs_review
     (T2): trimite CSRF POST la /confirma-review, inchide modalul via HX-Trigger-After-Settle.

   Necesita din context:
     import_id      — id batch import
     row_index      — index rand (0-based)
     csrf_token     — token CSRF
     vin            — VIN pentru titlu
     stare_css      — clasa CSS pill (ex. "s-ok")
     stare_eticheta — text pill (ex. "Gata de trimis")
     message        — mesaj de eroare general (None daca nu e)
     is_needs_review — True daca randul e in starea needs_review (afiseaza butonul Confirma)
     + variabilele pentru _form_editare.html:
       form_nr, form_vin, form_data, form_odo_final, form_odo_initial
       err_map, fix_map, vin_context, btn_label
#}
<div class="card" style="border:none; padding:0; margin:0;">

  {# Header cu heading accesibil (aria-labelledby al dialogului) #}
  <div style="display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 12px;">
    <h2 id="detaliu-modal-titlu" style="font-size:15px; margin:0;">
      Editare rand {{ row_index + 1 }}
      {% if vin %}<span class="muted" style="font-weight:400; font-size:13px;">· {{ vin }}</span>{% endif %}
    </h2>
    <span class="pill {{ stare_css }}" style="font-size:11px;">{{ stare_eticheta }}</span>
  </div>

  {% if message %}
  <div class="flash" style="border-color:var(--err); background:color-mix(in srgb, var(--err) 12%, var(--card)); margin-bottom:12px;"
       role="alert">{{ message }}</div>
  {% endif %}

  <form hx-post="/_import/{{ import_id }}/rand/{{ row_index }}/editeaza"
        hx-target="#detaliu-modal-body"
        hx-swap="innerHTML"
        hx-disabled-elt="find button"
        hx-on::response-error="this.querySelector && this.querySelector('.rand-eroare-banner') && (this.querySelector('.rand-eroare-banner').style.display='block');">
    <input type="hidden" name="csrf_token" value="{{ csrf_token or '' }}">

    <div class="rand-eroare-banner" role="alert"
         style="display:none; margin-bottom:10px; padding:8px 12px; border:1px solid var(--err);
                background:color-mix(in srgb, var(--err) 12%, var(--card)); border-radius:6px; font-size:13px;">
      Salvarea nu a reusit (retea / sesiune). Valorile introduse sunt pastrate — reincearca.
    </div>

    {% include "_form_editare.html" %}

    <div style="margin-top:10px; display:flex; gap:8px; align-items:center; flex-wrap:wrap;">
      <button type="button"
              style="min-height:44px; padding:8px 18px;
                     background:var(--card); color:var(--muted); border-color:var(--line);"
              data-modal-close>Anuleaza</button>
    </div>
  </form>

  {% if is_needs_review %}
  {# T2 (US-007): Butonul 'Confirma valorile' apare DOAR pe randurile needs_review.
     POST separat (form propriu) la /confirma-review cu CSRF. Raspunsul inchide
     modalul via HX-Trigger-After-Settle: inchideModal + swap OOB randul si countorii. #}
  <form hx-post="/_import/{{ import_id }}/rand/{{ row_index }}/confirma-review"
        hx-target="#detaliu-modal-body"
        hx-swap="innerHTML"
        hx-disabled-elt="find button"
        style="margin-top:12px; border-top:1px solid var(--line); padding-top:12px;">
    <input type="hidden" name="csrf_token" value="{{ csrf_token or '' }}">
    <p class="muted" style="font-size:13px; margin:0 0 8px;">
      Valorile sunt corecte si doriesti sa includi acest rand la trimitere la RAR?
    </p>
    <button type="submit"
            style="min-height:44px; padding:8px 18px;
                   background:var(--ok, #2a7); color:#fff; border-color:transparent;">
      Confirma valorile
    </button>
  </form>
  {% endif %}
</div>