{# Grid region — first adopter of the shared region_card macro (UX-035). #}
{% from 'macros/status_badge.html' import render_status_badge %}
{% from 'macros/region_wrapper.html' import region_card %}
{% call region_card(title) %}
  {% if items %}
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
    {% for item in items %}
    {% set attn = item.get("_attention") if item.get is defined else none %}
    {# Item cell is intentionally plain — no bg/border/full chrome. The
       visible card chrome lives on the enclosing region_card macro
       (rounded-[6px] + border + bg). Duplicating chrome here produced
       a card-within-a-card effect; see issue #794 and its follow-up. #}
    <div class="rounded-[4px] p-3 transition-colors duration-[80ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]
      {% if attn %}
        border-l-4
        {% if attn.level == 'critical' %}border-l-[hsl(var(--destructive))]{% endif %}
        {% if attn.level == 'warning' %}border-l-[hsl(var(--warning))]{% endif %}
        {% if attn.level == 'notice' %}border-l-[hsl(var(--primary))]{% endif %}
      {% endif %}
      {% if action_url %} cursor-pointer hover:bg-[hsl(var(--muted)/0.4)]{% endif %}"
         {% if attn %}title="{{ attn.message }}"{% endif %}
         {% if action_url %}hx-get="{{ action_url | replace('{id}', item[action_id_field|default('id')]|string) }}"
         hx-target="#dz-detail-drawer-content" hx-swap="innerHTML"{% endif %}>
      <h4 class="text-[13px] font-medium text-[hsl(var(--foreground))] mb-1.5">
        {{ item[display_key] | default(item.get("name", (entity_name|default("Item")))) }}
      </h4>
      {% for col in columns %}
      {% if col.key != display_key %}
      <p class="text-[12px] text-[hsl(var(--muted-foreground))]">
        <span class="text-[11px]">{{ col.label }}:</span>
        {% if col.type == "badge" %}
          {{ render_status_badge(value=item[col.key]) }}
        {% elif col.type == "bool" %}
          {{ item[col.key] | bool_icon }}
        {% elif col.type == "date" %}
          {{ item[col.key] | dateformat }}
        {% elif col.type == "currency" %}
          {{ item[col.key] | currency }}
        {% elif col.type == "ref" %}
          {% set ref = item[col.key] %}
          {% set display_name = item.get(col.key ~ "_display", "") %}
          {% if ref is mapping %}
            {% set display_name = display_name or (ref | ref_display) %}
            {% if col.ref_route and ref.get("id") %}
              <a href="{{ col.ref_route | replace('{id}', ref.get('id', '')|string) }}"
                 class="text-[hsl(var(--primary))] hover:underline"
                 onclick="event.stopPropagation()">{{ display_name }}</a>
            {% else %}{{ display_name }}{% endif %}
          {% elif display_name %}{{ display_name }}{% elif ref %}-{% else %}-{% endif %}
        {% else %}
          {{ item[col.key] | default("") | truncate_text }}
        {% endif %}
      </p>
      {% endif %}
      {% endfor %}
    </div>
    {% endfor %}
  </div>
  {% else %}
  {% include "fragments/empty_state.html" %}
  {% endif %}
{% endcall %}