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

{# _form_editare.html — partial partajat slim: campurile vehicul/data/odo + obs + chips prestatii.
   US-007 (PRD 5.15): redesign slim cu VIN unic, Observatii textarea, chips prestatii (E4),
   si reveal dinamic odometru initial cand chips contin R-ODO/I-ODO (D10c, E6 server-driven).

   Inclus cu {% include "_form_editare.html" %} INSIDE un <form> element al
   template-ului parinte. Acel parinte pune form-ul, CSRF-ul si orice campuri
   suplimentare.

   Variabile necesare din context (setate de parinte inainte de include):
     form_nr          — valoare curenta nr_inmatriculare
     form_vin         — valoare curenta vin
     form_data        — valoare curenta data_prestatie (YYYY-MM-DD sau brut)
     form_odo_final   — valoare curenta odometru_final
     form_odo_initial — valoare curenta odometru_initial
     obs_val          — valoare curenta obs (Observatii), text liber (default '')
     prestatii_chips  — list of {cod_prestatie, cod_op_service, denumire} (default [])
     nomenclator_rar  — list of {cod_prestatie, nume_prestatie} pentru picker (default [])
     has_r_odo        — True daca chips contin R-ODO/I-ODO (server-computed, default False)
     form_chips_url   — URL pentru HTMX chip endpoint (default '/form-chips')
     err_map          — dict {field_name: mesaj_eroare} (poate fi {})
     fix_map          — dict {field_name: hint_fix} (poate fi {})
     vin_context      — string VIN pentru aria-label (poate fi '')
     btn_label        — eticheta butonului primar (ex. 'Salveaza si retrimite')
#}
{% from "_macros.html" import camp, icon %}

{# === 1. VIN — camp unic (fara "Confirma VIN"; contractul RAR cere un singur VIN) === #}
{{ camp('vin', 'VIN (serie sasiu)', form_vin, slim=True, mono=True,
        err_map=err_map, fix_map=fix_map, vin_context=vin_context) }}

{# === 2. Data prestatie + Nr. inmatriculare — grila 2 coloane === #}
<div style="display:grid; grid-template-columns:1fr 1fr; gap:0 12px;">
  {{ camp('data_prestatie', 'Data prestatiei', form_data, tip='date', slim=True,
          err_map=err_map, fix_map=fix_map, vin_context=vin_context) }}
  {{ camp('nr_inmatriculare', 'Numar inmatriculare', form_nr, slim=True, mono=True,
          err_map=err_map, fix_map=fix_map, vin_context=vin_context) }}
</div>

{# === 3. Observatii (obs) — textarea liber, US-005 === #}
<div class="camp-slim">
  <label for="c-obs">Observatii (operatiile efectuate)</label>
  <textarea id="c-obs" name="obs" rows="2"
            aria-label="Observatii (operatiile efectuate){% if vin_context %} (VIN: {{ vin_context }}){% endif %}"
            placeholder="ex: Revizie; schimbare placute frana">{{ obs_val or '' }}</textarea>
</div>

{# === 4. Prestatii chips (E4 server-driven, US-007) === #}
{% set form_chips_url = form_chips_url or '/form-chips' %}
{% set chips_section_id = 'chips-section' %}
{% include "_chips_prestatii.html" %}

{# === 5. Odometru final — intotdeauna vizibil === #}
{{ camp('odometru_final', 'Odometru final (km)', form_odo_final, slim=True, mono=True,
        err_map=err_map, fix_map=fix_map, vin_context=vin_context) }}

{# === 6. Odometru initial — reveal dinamic server cand chips contin R-ODO/I-ODO (D10c) ===
   has_r_odo=True (server-computed din lista de chips): sectiune vizibila cu marcaj warn.
   has_r_odo=False: hint discret, campul optional si vizual neutru. #}
{% if has_r_odo %}
<div class="odo-initial-warn"
     style="border-left:2px solid var(--warn);padding-left:10px;margin-left:-2px;">
  <div class="camp-slim">
    <label for="c-odometru_initial" style="color:var(--warn);">
      Odometru initial (km) · necesar pentru R-ODO
    </label>
    <input id="c-odometru_initial" type="text" name="odometru_initial"
           value="{{ form_odo_initial or '' }}"
           class="camp-mono"
           required
           aria-required="true"
           style="border-color:color-mix(in srgb,var(--warn) 50%,var(--line));{% if err_map.get('odometru_initial') %}border-color:var(--err);{% endif %}"
           aria-label="Odometru initial (VIN: {{ vin_context or '' }}) — necesar pentru R-ODO"
           {% if err_map.get('odometru_initial') %}aria-invalid="true"{% endif %}>
    {% if err_map.get('odometru_initial') %}
    <div class="s-error" style="font-size:12px;margin-top:2px;">{{ err_map.get('odometru_initial') }}</div>
    {% endif %}
  </div>
</div>
{% else %}
{# Hint discret cand nu e necesar #}
<div class="camp-slim">
  <label for="c-odometru_initial" style="color:var(--muted);">Odometru initial (km)</label>
  <input id="c-odometru_initial" type="text" name="odometru_initial"
         value="{{ form_odo_initial or '' }}"
         class="camp-mono"
         style="{% if err_map.get('odometru_initial') %}border-color:var(--err);{% endif %}"
         aria-label="Odometru initial (optional){% if vin_context %} (VIN: {{ vin_context }}){% endif %}"
         {% if err_map.get('odometru_initial') %}aria-invalid="true"{% endif %}>
  {% if err_map.get('odometru_initial') %}
  <div class="s-error" style="font-size:12px;margin-top:2px;">{{ err_map.get('odometru_initial') }}</div>
  {% endif %}
  <span style="font-size:10px;color:var(--muted);font-style:italic;">
    Odometru initial se cere doar pentru coduri R-ODO / I-ODO.
  </span>
</div>
{% endif %}

{# === 7. Buton primar parametrizat ===
   with_cancel=True (modal editare preview): Salveaza + Anuleaza pe ACELASI rand,
   sistemul .act (desktop = text alaturat; mobil = doua iconite Lucide 44px alaturate).
   Implicit (ex. _trimitere_detaliu): un singur buton text, neschimbat. #}
{% if with_cancel %}
<div class="act-group" style="margin-top:14px;">
  <button type="submit" class="act act-primary" aria-label="{{ btn_label or 'Salveaza' }}">
    <span class="act-tx">{{ btn_label or 'Salveaza' }}</span>{{ icon('save') }}</button>
  <button type="button" class="act" aria-label="{{ cancel_label or 'Anuleaza' }}" data-modal-close>
    <span class="act-tx">{{ cancel_label or 'Anuleaza' }}</span>{{ icon('x') }}</button>
</div>
{% else %}
<div style="margin-top:14px;">
  <button type="submit">{{ btn_label or 'Salveaza' }}</button>
</div>
{% endif %}