{#
  _coada.html — sectiunea "Trimiterile tale" inclusa pe Acasa, sub zona de upload.
  Filtre + tabel (_submissions.html); detaliul se deschide in modalul global (#modal-detaliu).
#}
<section id="trimiteri-section" aria-labelledby="trimiteri-heading"
         style="margin-top:22px; padding-top:18px; border-top:2px solid var(--line);"
         {% if oob %}hx-swap-oob="outerHTML"{% endif %}>
  <div class="card">
    {# US-002 (5.16): titlul de sectiune vizibil ("Trimiterile tale") a fost eliminat —
       lista incepe direct sub filtre. Heading pastrat sr-only pentru a11y (section
       aria-labelledby). Badge-ul de atentie + export CSV stau intr-un rand discret. #}
    <h2 id="trimiteri-heading" class="sr-only">Trimiterile tale</h2>

    {# US-005 (PRD 5.19): bulk "Trimite toate (N)" — N = randuri tinute (queued AND held=1).
       Ascuns cand N=0. Confirmare tipata prin modal (count + mediu RAR), NU hx-confirm. #}
    {% if held_manual_count|default(0) %}
    <div style="display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 10px;
                padding:8px 10px; border-left:3px solid var(--warn);
                background:color-mix(in srgb, var(--warn) 10%, var(--card)); border-radius:6px;">
      <span style="font-size:var(--fs-sm);">
        <strong>{{ held_manual_count }}</strong>
        {{ 'prezentare tinuta' if held_manual_count == 1 else 'prezentari tinute' }} manual.
      </span>
      <button type="button"
              onclick="var m=document.getElementById('modal-trimite-toate'); if(m){m.hidden=false;}"
              style="margin-left:auto; padding:4px 12px; font-size:13px; border-radius:6px;
                     border:1px solid var(--accent); background:var(--accent); color:#fff;
                     font-weight:600; cursor:pointer;">
        Trimite toate ({{ held_manual_count }})
      </button>
    </div>
    {% set cf_id = 'modal-trimite-toate' %}
    {% set cf_titlu = 'Trimiti toate prezentarile tinute?' %}
    {% set cf_count = held_manual_count %}
    {% set cf_env = env_bulk | default('prod') %}
    {% set cf_url = '/trimite-toate' %}
    {% set cf_vals = '{}' %}
    {% set cf_target = '#submissions-wrap' %}
    {% set cf_swap = 'innerHTML' %}
    {% set cf_confirm_label = 'Trimite toate (' ~ held_manual_count ~ ')' %}
    {% set cf_deschis = false %}
    {% include '_modal_confirma_trimitere.html' %}
    {% endif %}

    {% if blocate_total %}
    <div style="display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:0 0 10px;">
      <span class="tab-badge" title="{{ blocate_total }} necesita atentie"
            style="display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; border-radius:99px; background:var(--err); color:#fff; font-size:11px; font-weight:700;">{{ blocate_total }}</span>
      <span class="muted" style="font-size:var(--fs-sm);">de rezolvat</span>
      <span style="margin-left:auto; display:flex; gap:8px; flex-wrap:wrap;">
        <a class="cardlink" href="/v1/audit/export?status=sent" download>export CSV: trimise</a>
        <a class="cardlink" href="/v1/audit/export?status=all" download>toate</a>
      </span>
    </div>
    {% else %}
    <div style="display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; margin:0 0 10px;">
      <a class="cardlink" href="/v1/audit/export?status=sent" download>export CSV: trimise</a>
      <a class="cardlink" href="/v1/audit/export?status=all" download>toate</a>
    </div>
    {% endif %}

    <!-- Bara de filtre: [quick-pills data STANGA] [cautare vehicul MIJLOC] [pills stare DREAPTA].
         Pill-urile de stare scriu campul hidden status si re-trimit form-ul (filtreazaStare).
         Quick-pills de data apeleaza setDataRange -> seteaza data_de/data_pana + re-submit. -->
    <form id="filtre-trimiteri"
          hx-get="/_fragments/submissions"
          hx-target="#submissions-wrap"
          hx-swap="innerHTML"
          hx-trigger="submit, change, keyup delay:400ms from:input[name='vehicul']"
          style="display:flex; gap:8px 12px; flex-wrap:wrap; align-items:center; margin-bottom:12px;">
      <input type="hidden" id="f-status" name="status" value="{{ status_filtru | default('', true) }}">
      {# Pagina curenta — actualizata prin OOB swap din _submissions.html; inclusa la reincarcari. #}
      <input type="hidden" id="f-page" name="page" value="1">

      {# === STANGA: Quick-pills de data (preset interval) + buton Custom ===
         Azi / 7 zile / 30 zile → seteaza interval preset si submitr automat.
         Custom → dezvaluie #custom-date-fields pentru introducere manuala (fara submit automat). #}
      <div style="flex:0 0 auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap;">
        <div class="pills-categorii" id="quick-date-pills">
          <button type="button" class="pill-cat pill-data" data-range="azi"
                  aria-pressed="false"
                  onclick="setDataRange(this,'azi')">Azi</button>
          <button type="button" class="pill-cat pill-data" data-range="7zile"
                  aria-pressed="false"
                  onclick="setDataRange(this,'7zile')">7 zile</button>
          <button type="button" class="pill-cat pill-data" data-range="30zile"
                  aria-pressed="false"
                  onclick="setDataRange(this,'30zile')">30 zile</button>
          <button type="button" class="pill-cat pill-data" data-range="custom"
                  aria-pressed="false"
                  onclick="setDataRange(this,'custom')">Custom</button>
        </div>
        {# Campuri de data pentru modul Custom: ascunse pana la click pe „Custom".
           type="date" (nu hidden) permite interactiunea utilizatorului.
           Campul change pe form re-incarca automat lista via hx-trigger="change". #}
        <div id="custom-date-fields"
             style="display:none; gap:4px; align-items:center; flex-wrap:wrap; font-size:13px;">
          <label for="f-data-de" class="muted" style="font-size:12px; white-space:nowrap;">De:</label>
          <input type="date" id="f-data-de" name="data_de" value=""
                 style="font-size:13px; max-width:140px;">
          <label for="f-data-pana" class="muted" style="font-size:12px; white-space:nowrap;">Pana:</label>
          <input type="date" id="f-data-pana" name="data_pana" value=""
                 style="font-size:13px; max-width:140px;">
        </div>
      </div>

      {# === MIJLOC: cautare vehicul (nr/VIN) + buton Filtreaza === #}
      <div style="display:flex; align-items:center; gap:8px; flex:1 1 auto; min-width:160px; flex-wrap:wrap;">
        <input id="f-vehicul" type="text" name="vehicul" placeholder="Vehicul (nr/VIN)"
               style="flex:1 1 auto; min-width:120px;">
        <button type="submit" style="flex:0 0 auto;">Filtreaza</button>
      </div>

      {# === DREAPTA: pill-uri de stare cu contoare; re-randate via OOB la reincarcarea tabelului === #}
      <span id="pills-categorii" class="pills-categorii" style="margin-left:auto; flex:0 0 auto;">
        {% include '_pills.html' %}
      </span>
    </form>

    <!-- Tabelul se reincarca la: incarcarea paginii, actiunile tale (trimiteriChanged)
         si auto-refresh periodic din poller (date noi externe). -->
    <div id="submissions-wrap"
         hx-get="/_fragments/submissions"
         hx-trigger="load, trimiteriChanged from:body, reincarcaTrimiteri"
         hx-include="#filtre-trimiteri" hx-swap="innerHTML">
      <div class="empty">se incarca…</div>
    </div>
  </div>

</section>