{# Detail region — UX-035 adopter #14.
   Contract: ~/.claude/skills/ux-architect/components/detail-region.md (UX-063)

   v0.62 CSS refactor: inline Tailwind → semantic .dz-detail-region-*
   classes (see components/detail.css). Two-column label/value grid
   distinct from the row-stacked .dz-detail-row in the standalone
   detail_view component. #}
{% from 'macros/region_wrapper.html' import region_card %}
{% from 'macros/status_badge.html' import render_status_badge %}
{% from 'macros/ref_cell.html' import ref_cell %}
{% call region_card(title) %}
<div class="dz-detail-region">
  {% if item %}
  <dl class="dz-detail-region-grid">
    {% for col in columns %}
    <dt class="dz-detail-label">{{ col.label }}</dt>
    <dd class="dz-detail-value">
      {% if col.type == "badge" %}
        {{ render_status_badge(value=item[col.key], bordered=true) }}
      {% 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') }}
      {% else %}
        {% set val = item[col.key] %}
        {% if val is none %}—{% else %}{{ val }}{% endif %}
      {% endif %}
    </dd>
    {% endfor %}
  </dl>
  {% else %}
  <p class="dz-empty-dense" role="status">{{ empty_message | default("No record selected.") }}</p>
  {% endif %}
</div>
{% endcall %}