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

<div id="import-section">
  <div class="card">
    <h2 style="font-size:15px; margin:0 0 12px;">
      Mapare coloane —
      <span class="muted" style="font-weight:400;">{{ filename or ("import #" ~ import_id) }}</span>
    </h2>

    {% if message %}
    <div class="flash" style="{% if error %}border-color:var(--err); background:#241a1a;{% endif %} margin-bottom:12px;"
         {% if error %}role="alert"{% endif %}>
      {{ message }}
    </div>
    {% endif %}

    <p class="muted" style="margin:0 0 12px; font-size:13px;">
      Asociaza fiecare coloana din fisier cu campul canonic corespunzator.
      Maparea se retine automat pentru fisiere cu acelasi antet.
    </p>

    <form hx-post="/_import/{{ import_id }}/mapare-coloane"
          hx-target="#import-section"
          hx-swap="outerHTML">
      <input type="hidden" name="csrf_token" value="{{ csrf_token or '' }}">

      <div style="margin-bottom:8px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;">
        <label for="format-data" style="font-size:13px; color:var(--muted);">
          Format data
        </label>
        <input type="text" id="format-data" name="format_data"
               value="{{ format_data or 'DD.MM.YYYY' }}"
               placeholder="ex: DD.MM.YYYY"
               style="max-width:160px;"
               aria-describedby="format-data-hint">
        <span id="format-data-hint" class="muted" style="font-size:12px;">
          sau YYYY-MM-DD, MM/DD/YYYY etc.
        </span>
      </div>

      {% for col in columns %}
      {%- set sugg = fuzzy_suggestions.get(col, []) -%}
      {%- set best = sugg[0].camp_canonic if sugg else '' -%}
      <input type="hidden" name="colname" value="{{ col }}">
      <div class="maprow">
        <div class="mapcol grow">
          <div><strong>{{ col }}</strong></div>
          {% if sugg %}
          <div class="muted" style="font-size:12px; margin-top:2px;">
            sugestie: <span class="sugg">{{ sugg[0].camp_canonic }}
            ({{ sugg[0].score | round | int }}%)</span>
          </div>
          {% endif %}
          {%- set ns = namespace(samples=[]) -%}
          {%- for row in sample_rows -%}
            {%- if row.get(col) is not none and row.get(col) != '' -%}
              {%- set ns.samples = ns.samples + [row[col] | string] -%}
            {%- endif -%}
          {%- endfor -%}
          {% if ns.samples %}
          <div class="muted" style="font-size:11px; margin-top:2px;">
            ex: {{ ns.samples[:2] | join(", ") }}
          </div>
          {% endif %}
        </div>
        <div class="mapcol" style="min-width:200px;">
          <label for="canon-{{ loop.index }}"
                 style="display:block; font-size:12px; color:var(--muted); margin-bottom:2px;">
            Camp canonic
          </label>
          <select id="canon-{{ loop.index }}" name="canon">
            <option value="">— ignorat —</option>
            {% for field_key, field_label in canonical_fields %}
            <option value="{{ field_key }}"
                    {% if field_key == best %}selected{% endif %}>
              {{ field_key }} — {{ field_label }}
            </option>
            {% endfor %}
          </select>
        </div>
      </div>
      {% endfor %}

      <div style="margin-top:16px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;">
        <button type="submit"
                style="min-height:44px; padding:10px 24px; font-size:14px;">
          Salveaza si continua la preview
        </button>
        <span class="muted" style="font-size:12px;">
          maparea se retine pentru fisiere cu acelasi antet
        </span>
      </div>
    </form>

    <div style="margin-top:12px;">
      <a href="/" class="muted" style="font-size:13px;">Incarca alt fisier</a>
    </div>
  </div>
</div>