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

{% from "_eroare.html" import card_erori %}
<div class="card" id="detaliu-card-{{ id }}" style="border-color:var(--accent);">
  <div style="display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 12px;">
    <h2 style="font-size:15px; margin:0;">Detaliu trimitere #{{ id }}</h2>
    <span class="pill {{ stare_css }}">{{ stare_text }}</span>
    <button type="button" style="margin-left:auto; background:var(--card); color:var(--muted); border-color:var(--line);"
            onclick="document.getElementById('trimitere-detaliu').innerHTML='';">
      Inchide
    </button>
  </div>

  {% if stare_subtext %}
  <p class="muted" style="margin:0 0 12px; font-size:13px;">{{ stare_subtext }}</p>
  {% endif %}

  <div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px 24px;">
    <div><div class="muted" style="font-size:12px;">Numar inmatriculare</div><div>{{ prez.vehicul_nr }}</div></div>
    <div><div class="muted" style="font-size:12px;">VIN (serie sasiu)</div><div style="word-break:break-all;">{{ prez.vin }}</div></div>
    <div><div class="muted" style="font-size:12px;">Operatie</div><div>{{ prez.operatie }}</div></div>
    <div><div class="muted" style="font-size:12px;">Cod RAR</div><div>{{ prez.cod }}</div></div>
    <div><div class="muted" style="font-size:12px;">Data prestatie</div><div>{{ prez.data_prestatie }}</div></div>
    <div><div class="muted" style="font-size:12px;">Odometru final</div><div>{{ prez.odometru }}</div></div>
    <div><div class="muted" style="font-size:12px;">Nr. prezentare RAR</div><div>{{ id_prezentare or '—' }}</div></div>
    <div><div class="muted" style="font-size:12px;">Cod HTTP RAR</div><div>{{ rar_status_code or '—' }}</div></div>
    <div><div class="muted" style="font-size:12px;">Reincercari</div><div>{{ retry_count }}</div></div>
    <div><div class="muted" style="font-size:12px;">Creat</div><div>{{ created_at }}</div></div>
    <div><div class="muted" style="font-size:12px;">Actualizat</div><div>{{ updated_at }}</div></div>
    <div><div class="muted" style="font-size:12px;">Urmatoarea incercare</div><div>{{ next_attempt_at }}</div></div>
  </div>

  {% if erori_3n %}
  <div style="margin-top:12px; padding-top:10px; border-top:1px solid var(--line);">
    {{ card_erori(erori_3n) }}
  </div>
  {% elif motiv %}
  <div style="margin-top:12px; padding-top:10px; border-top:1px solid var(--line);">
    <div class="muted" style="font-size:12px;">Motiv</div>
    <div>{{ motiv }}</div>
  </div>
  {% endif %}

  {% if rar_error %}
  <details style="margin-top:10px;">
    <summary class="muted" style="font-size:12px; cursor:pointer;">Mesaj tehnic RAR (integral)</summary>
    <pre style="white-space:pre-wrap; word-break:break-all; font-size:12px; margin:6px 0 0; color:var(--muted);">{{ rar_error }}</pre>
  </details>
  {% endif %}

  {# === Lifecycle (US-011): sterge / re-pune in coada — doar randuri blocate === #}
  {% if gestionabil %}
  <div style="margin-top:14px; padding-top:12px; border-top:1px solid var(--line); display:flex; gap:10px; flex-wrap:wrap;">
    <form hx-post="/trimitere/{{ id }}/repune"
          hx-target="#trimitere-detaliu" hx-swap="innerHTML" style="margin:0;">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <button type="submit">Re-pune in coada</button>
    </form>
    <form hx-post="/trimitere/{{ id }}/sterge"
          hx-target="#trimitere-detaliu" hx-swap="innerHTML"
          hx-confirm="Stergi definitiv aceasta trimitere din coada?" style="margin:0;">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <button type="submit" style="background:var(--card); color:var(--err); border-color:var(--err);">
        Sterge
      </button>
    </form>
  </div>
  {% endif %}

  {# === Corectie inline (US-010): doar randuri ne-trimise blocate === #}
  {% if editabil %}
  {% set err_map = {} %}
  {% for e in corectie_errors %}{% if e.field %}{% set _ = err_map.update({e.field: e.message}) %}{% endif %}{% endfor %}
  <div style="margin-top:14px; padding-top:12px; border-top:1px solid var(--line);">
    <h3 style="font-size:14px; margin:0 0 8px;">Corecteaza si re-trimite</h3>

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

    <form hx-post="/trimitere/{{ id }}/corecteaza"
          hx-target="#trimitere-detaliu" hx-swap="innerHTML">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:10px 16px;">

        {% macro camp(nume, eticheta, valoare, tip='text') %}
        <div>
          <label for="c-{{ nume }}" class="muted" style="font-size:12px; display:block;">{{ eticheta }}</label>
          <input id="c-{{ nume }}" type="{{ tip }}" name="{{ nume }}" value="{{ valoare }}"
                 style="width:100%; {% if err_map.get(nume) %}border-color:var(--err);{% endif %}"
                 {% if err_map.get(nume) %}aria-invalid="true"{% endif %}>
          {% if err_map.get(nume) %}
          <div class="s-error" style="font-size:12px; margin-top:2px;">{{ err_map.get(nume) }}</div>
          {% endif %}
        </div>
        {% endmacro %}

        {{ camp('nr_inmatriculare', 'Numar inmatriculare', form_nr) }}
        {{ camp('vin', 'VIN (serie sasiu)', form_vin) }}
        {{ camp('data_prestatie', 'Data prestatie (YYYY-MM-DD)', form_data) }}
        {{ camp('odometru_final', 'Odometru final', form_odo_final) }}
        {{ camp('odometru_initial', 'Odometru initial (daca e cerut)', form_odo_initial) }}
      </div>
      <div style="margin-top:10px;">
        <button type="submit">Salveaza si re-pune in coada</button>
      </div>
    </form>
  </div>
  {% endif %}
</div>

<script>
(function() {
  /* Vizibilitate (design review): scroll la panou + evidentiaza randul selectat. */
  var panou = document.getElementById('trimitere-detaliu');
  if (panou) panou.scrollIntoView({behavior: 'smooth', block: 'nearest'});
  document.querySelectorAll('tr[id^="trimitere-row-"]').forEach(function(tr) {
    tr.style.outline = '';
  });
  var rand = document.getElementById('trimitere-row-{{ id }}');
  if (rand) rand.style.outline = '2px solid var(--accent)';
})();
</script>