rar-autopass/app/web/templates/_coada.html

{#
  _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>
    {% 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>