{# Grid region — first adopter of the shared region_card macro (UX-035).
   Contract: ~/.claude/skills/ux-architect/components/grid-region.md (UX-066)

   v0.62 CSS refactor: inline Tailwind → semantic .dz-grid-* classes
   (components/regions.css). Cell hover-state lives on .is-clickable
   modifier (toggled by `{% if action_url %}`); attention accent still
   flows through the unchanged attention_classes macro. #}
{% from 'macros/status_badge.html' import render_status_badge %}
{% from 'macros/region_wrapper.html' import region_card %}
{% from 'macros/attention_accent.html' import attention_classes %}
{% from 'macros/ref_cell.html' import ref_cell %}
{% call region_card(title) %}
<div class="dz-grid-region">
  {% if items %}
  <div class="dz-grid-list">
    {% 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="dz-grid-cell {{ attention_classes(attn, 'border') }}{% if action_url %} is-clickable{% endif %}"
         {% if attn %}title="{{ attn.message }}"{% endif %}
         {% if action_url %}hx-get="{{ action_url | replace('{id}', item[action_id_field|default('id')]|resolve_fk_id) }}"
         hx-target="#dz-detail-drawer-content" hx-swap="innerHTML"{% endif %}>
      <h4 class="dz-grid-cell-title">
        {% set _primary = item[display_key] %}
        {% if _primary is none %}{{ item.get("name", (entity_name|default("Item"))) }}{% else %}{{ _primary }}{% endif %}
      </h4>
      {% for col in columns %}
      {% if col.key != display_key %}
      <p class="dz-grid-cell-field">
        <span class="dz-grid-cell-field-label">{{ 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" %}
          {{ ref_cell(item[col.key], item.get(col.key ~ "_display", ""), col.ref_route or "", 'link_stop') }}
        {% else %}
          {{ item[col.key] | default("") | truncate_text }}
        {% endif %}
      </p>
      {% endif %}
      {% endfor %}
    </div>
    {% endfor %}
  </div>
  {% else %}
  {% include "fragments/empty_state.html" %}
  {% endif %}
</div>
{% endcall %}