{# ═══════════════════════════════════════════════════
   ASOK Admin — Core Macros
   All icons are inline SVG (no font dependency).
   ═══════════════════════════════════════════════════ #}

{# ── Icons ──────────────────────────────────────────── #}
{% macro icon(name, size=16, cls='') %}
  {% if name == 'dashboard' %}
    <svg class="{{ cls }}" xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/></svg>
  {% elif name == 'table' %}
    <svg class="{{ cls }}" xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3h18v18H3z"/><path d="M3 9h18M3 15h18M9 3v18"/></svg>
  {% elif name == 'plus' %}
    <svg class="{{ cls }}" xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
  {% elif name == 'edit' %}
    <svg class="{{ cls }}" xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
  {% elif name == 'trash' %}
    <svg class="{{ cls }}" xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
  {% elif name == 'search' %}
    <svg class="{{ cls }}" xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
  {% elif name == 'log' %}
    <svg class="{{ cls }}" xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
  {% elif name == 'logout' %}
    <svg class="{{ cls }}" xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
  {% elif name == 'sun' %}
    <svg class="{{ cls }}" xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
  {% elif name == 'moon' %}
    <svg class="{{ cls }}" xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
  {% elif name == 'link' %}
    <svg class="{{ cls }}" xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
  {% elif name == 'globe' %}
    <svg class="{{ cls }}" xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
  {% elif name == 'chevron' %}
    <svg class="{{ cls }}" xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
  {% elif name == 'check' %}
    <svg class="{{ cls }}" xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
  {% elif name == 'x' %}
    <svg class="{{ cls }}" xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
  {% elif name == 'history' %}
    <svg class="{{ cls }}" xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M12 7v5l4 2"/></svg>
  {% elif name == 'upload' %}
    <svg class="{{ cls }}" xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 16 12 12 8 16"/><line x1="12" y1="12" x2="12" y2="21"/><path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"/></svg>
  {% elif name == 'download' %}
    <svg class="{{ cls }}" xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><polyline points="8 17 12 21 16 17"/><line x1="12" y1="12" x2="12" y2="21"/><path d="M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29"/></svg>
  {% elif name == 'shield' %}
    <svg class="{{ cls }}" xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
  {% elif name == 'user' %}
    <svg class="{{ cls }}" xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
  {% elif name == 'info' %}
    <svg class="{{ cls }}" xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
  {% elif name == 'warn' or name == 'alert' %}
    <svg class="{{ cls }}" xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
  {% elif name == 'restore' %}
    <svg class="{{ cls }}" xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M1 4v6h6"/><path d="M3.51 15a9 9 0 1 0 .49-3.51"/></svg>
  {% elif name == 'menu' %}
    <svg class="{{ cls }}" xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
  {% elif name == 'arrow-left' %}
    <svg class="{{ cls }}" xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
  {% elif name == 'arrow-right' %}
    <svg class="{{ cls }}" xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
  {% elif name == 'folder' %}
    <svg class="{{ cls }}" xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
  {% elif name == 'image' %}
    <svg class="{{ cls }}" xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
  {% elif name == 'arrow-up' %}
    <svg class="{{ cls }}" xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>
  {% elif name == 'arrow-down' %}
    <svg class="{{ cls }}" xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>
  {% elif name == 'file-plus' %}
    <svg class="{{ cls }}" xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="12" y1="18" x2="12" y2="12"/><line x1="9" y1="15" x2="15" y2="15"/></svg>
  {% elif name == 'file-text' %}
    <svg class="{{ cls }}" xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
  {% elif name == 'shield-off' %}
    <svg class="{{ cls }}" xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M19.69 14a6.9 6.9 0 0 0 .31-2V5l-8-3-3.16 1.18"/><path d="M4.73 4.73L4 5v7c0 6 8 10 8 10a20.3 20.3 0 0 0 5.62-4.38"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
  {% elif name == 'home' %}
    <svg class="{{ cls }}" xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
  {% elif name == 'log-in' %}
    <svg class="{{ cls }}" xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg>
  {% elif name == 'refresh-cw' %}
    <svg class="{{ cls }}" xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>
  {% elif name == 'alert-triangle' %}
    <svg class="{{ cls }}" xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
  {% elif name == 'x-circle' %}
    <svg class="{{ cls }}" xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
  {% elif name == 'filter' %}
    <svg class="{{ cls }}" xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>
  {% elif name == 'copy' %}
    <svg class="{{ cls }}" xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
  {% elif name == 'shield-check' %}
    <svg class="{{ cls }}" xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><polyline points="9 12 11 14 15 10"/></svg>
  {% else %}
    <svg class="{{ cls }}" xmlns="http://www.w3.org/2000/svg" width="{{ size }}" height="{{ size }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/></svg>
  {% endif %}
{% endmacro %}

{# ── Badge ──────────────────────────────────────────── #}
{% macro badge(text, type='info') %}
  <span class="badge badge-{{ type }}">{{ text }}</span>
{% endmacro %}

{# ── Button ─────────────────────────────────────────── #}
{% macro btn(label, variant='default', href=None, icon_name=None, extra_class='', type='button', **attrs) %}
  {% if href %}
    <a href="{{ href }}" class="btn btn-{{ variant }} {{ extra_class }}"{% for k, v in attrs.items() %} {{ k }}="{{ v }}"{% endfor %}>
      {% if icon_name %}{{ icon(icon_name) }}{% endif %}
      {% if label %}<span>{{ label }}</span>{% endif %}
    </a>
  {% else %}
    <button type="{{ type }}" class="btn btn-{{ variant }} {{ extra_class }}"{% for k, v in attrs.items() %} {{ k }}="{{ v }}"{% endfor %}>
      {% if icon_name %}{{ icon(icon_name) }}{% endif %}
      {% if label %}<span>{{ label }}</span>{% endif %}
    </button>
  {% endif %}
{% endmacro %}

{# ── Flash message ──────────────────────────────────── #}
{% macro flash(msg, type='info', ttl=6000) %}
  <div class="flash-msg {{ type }}" data-ttl="{{ ttl }}">
    {% if type == 'success' %}{{ icon('check', 16) }}
    {% elif type == 'error' %}{{ icon('x', 16) }}
    {% elif type == 'warning' %}{{ icon('warn', 16) }}
    {% else %}{{ icon('info', 16) }}{% endif %}
    <span>{{ msg }}</span>
  </div>
{% endmacro %}

{# ── Form field row (Airy & Clean) ──────────────────── #}
{% macro field_row(f, m, item) %}
  {% set is_cb = 'type="checkbox"' in str(f.input) %}
  <div class="form-group" id="fg-{{ m.name }}"{% if '<textarea' in str(f.input) or is_cb %} style="grid-column: 1 / -1"{% endif %}>
    {% if is_cb %}
      <label class="form-label" for="{{ m.name }}" style="cursor:pointer; width:fit-content; margin-bottom:0">
        {{ f.input }}
        <span style="font-weight:600; color:var(--fg)">{{ t(f._label) }}</span>
        {% if not m.readonly and f.rules and 'required' in f.rules %}
          <span class="required" style="color:var(--danger)">*</span>
        {% endif %}
        {% if m.readonly %}
          {{ badge(t('readonly'), 'warn') }}
        {% endif %}
      </label>
    {% else %}
      <label class="form-label" for="{{ m.name }}">
        <span style="font-weight:600">{{ t(f._label) }}</span>
        {% if not m.readonly and f.rules and 'required' in f.rules %}
          <span class="required" style="color:var(--danger)">*</span>
        {% endif %}
        
        {% if m.is_password and item and item.id %}
          <span class="muted" style="font-weight:400;text-transform:none;font-size:0.75rem;margin-left:4px"> — {{ t('(leave blank to keep current)') }}</span>
        {% endif %}
        {% if m.readonly %}
          {{ badge(t('readonly'), 'warn') }}
        {% endif %}
      </label>

      {% if m.is_file and m.file_value %}
        <div class="file-preview" style="margin-top:8px;display:flex;align-items:center;gap:12px;background:var(--bg-2);padding:8px 12px;border-radius:var(--r);border:1px solid var(--border)">
          {% if m.is_image %}
            <img src="{{ m.file_value }}" alt="" style="width:48px;height:48px;object-fit:cover;border-radius:var(--r);border:1px solid var(--border)">
          {% endif %}
          <div class="file-preview-name" style="font-size:0.85rem;color:var(--fg-2)">{{ m.file_value }}</div>
        </div>
      {% endif %}

      {% if m.is_fk_autocomplete %}
        <div class="fk-autocomplete" data-fk-slug="{{ m.fk_target_slug }}" data-fk-name="{{ m.name }}">
          <input type="hidden" name="{{ m.name }}" value="{{ f.value or '' }}">
          <div style="position:relative">
            {{ icon('search', 14, 'search-wrap fk') }}
            <input type="text" class="fk-ac-input" autocomplete="off" placeholder="{{ t('Type to search…') }}" value="{{ m.fk_current_label }}" style="padding-left:34px">
          </div>
          <div class="fk-ac-results" hidden></div>
        </div>
      {% elif m.wysiwyg %}
        <div class="wysiwyg-container" data-name="{{ m.name }}">
          <div class="wysiwyg-editor" style="min-height:200px; background:var(--surface); border:1px solid var(--border); border-radius:0 0 var(--r) var(--r); border-top:none;">{{ (f.value or '') | safe }}</div>
          <textarea name="{{ m.name }}" id="wysiwyg-{{ m.name }}" style="display:none">{{ f.value or '' }}</textarea>
        </div>
      {% else %}
        {{ f.input }}
      {% endif %}
    {% endif %}

    {% if f._error %}
      <div class="form-error" style="margin-top:8px; color:var(--danger); font-size:0.85rem; display:flex; align-items:center; gap:6px; font-weight:500;">
        {{ icon('warn', 14) }}{{ f._error }}
      </div>
    {% endif %}
  </div>
{% endmacro %}

{# ── Multiple flashes ─────────────────────────────────── #}
{% macro flashes() %}
  {% for f in get_flashed_messages() %}
    {{ flash(f.message, f.category | default('info')) }}
  {% endfor %}
{% endmacro %}