{# Detail view component — displays entity fields as a definition list.
   Contract: ~/.claude/skills/ux-architect/components/detail-view.md (UX-029)

   v0.62 CSS refactor: Tailwind utility soup → semantic classes from
   components/detail.css + components/button.css. Container queries
   on .dz-detail-list adapt the row layout to the card's width
   (was viewport-driven via sm: prefix). #}
{% if detail %}
<div class="dz-detail{% if detail.related_groups %} dz-detail-wide{% endif %}"
     data-dazzle-entity="{{ detail.entity_name }}"
     data-dz-entity="{{ detail.entity_name }}"
     {% if detail.entity_id %}data-dz-entity-id="{{ detail.entity_id }}"{% endif %}>
  {# Header with actions #}
  {% block detail_header %}
  <div class="dz-detail-header">
    <div class="dz-detail-header-title">
      <a href="{{ detail.back_url }}"
         class="dz-button dz-button-ghost"
         onclick="var d=this.closest('#dz-detail-drawer');if(d&&window.dzDrawer){window.dzDrawer.close();return false}try{if(document.referrer&&new URL(document.referrer).origin===location.origin){history.back();return false}}catch(e){}">&larr; Back</a>
      <h2 class="dz-detail-title">{{ detail.title }}</h2>
    </div>
    <div class="dz-detail-actions">
      {% if detail.edit_url %}
      <a href="{{ detail.edit_url }}"
         class="dz-button dz-button-outline"
         data-dazzle-action="{{ detail.entity_name }}.edit"
         data-dz-action="edit"
         data-dz-entity="{{ detail.entity_name }}">Edit</a>
      {% endif %}
      {% if detail.delete_url %}
      <button class="dz-button dz-button-destructive"
              data-dazzle-action="{{ detail.entity_name }}.delete"
              data-dz-action="delete"
              data-dz-entity="{{ detail.entity_name }}"
              hx-delete="{{ detail.delete_url }}"
              hx-confirm="Delete this {{ detail.entity_name | lower }}?"
              hx-target="body"
              hx-swap="innerHTML">
        Delete
      </button>
      {% endif %}
    </div>
  </div>
  {% endblock detail_header %}

  {# Transition buttons (state machine) #}
  {% block detail_transitions %}
  {% if detail.transitions %}
  <div class="dz-detail-toolbar" data-dazzle-transitions="{{ detail.entity_name }}">
    {% for transition in detail.transitions %}
    <button class="dz-button dz-button-outline"
            data-dazzle-action="{{ detail.entity_name }}.transition.{{ transition.to_state }}"
            data-dz-action="transition.{{ transition.to_state }}"
            data-dz-entity="{{ detail.entity_name }}"
            hx-put="{{ transition.api_url }}"
            hx-vals='{"{{ detail.status_field }}": "{{ transition.to_state }}"}'
            hx-ext="json-enc"
            hx-target="body"
            hx-swap="innerHTML">
      {{ transition.label }}
    </button>
    {% endfor %}
  </div>
  {% endif %}
  {% endblock detail_transitions %}

  {# External link actions #}
  {% block detail_external_links %}
  {% if detail.external_link_actions %}
  <div class="dz-detail-toolbar" data-dazzle-external-links="{{ detail.entity_name }}">
    {% for link in detail.external_link_actions %}
    <a href="{{ link.url }}" {% if link.new_tab %}target="_blank" rel="noopener noreferrer"{% endif %}
       class="dz-button dz-button-outline"
       data-dazzle-action="{{ detail.entity_name }}.external.{{ link.name }}">
      {{ link.label }}
    </a>
    {% endfor %}
  </div>
  {% endif %}
  {% endblock detail_external_links %}

  {# Integration action buttons (manual triggers) #}
  {% block detail_integration_actions %}
  {% if detail.integration_actions %}
  <div class="dz-detail-toolbar" data-dazzle-integration-actions="{{ detail.entity_name }}">
    {% for action in detail.integration_actions %}
    <button class="dz-button dz-button-outline"
            data-dazzle-action="{{ detail.entity_name }}.integration.{{ action.integration_name }}.{{ action.mapping_name }}"
            hx-post="{{ action.api_url }}"
            hx-target="body"
            hx-swap="innerHTML"
            hx-confirm="Execute {{ action.label }}?">
      {{ action.label }}
    </button>
    {% endfor %}
  </div>
  {% endif %}
  {% endblock detail_integration_actions %}

  {# Detail card #}
  {% block detail_fields %}
  <div class="dz-detail-card">
    <div class="dz-detail-card-body">
      <dl class="dz-detail-list">
        {% for field in detail.fields %}
        {% if field.visible | default(true) %}
        {% set value = detail.item.get(field.name, "") %}
        <div class="dz-detail-row">
          <dt class="dz-detail-label">{{ field.label }}</dt>
          <dd class="dz-detail-value">
            {% if value is none %}
              —
            {% elif field.type == "badge" %}
              {% include 'fragments/status_badge.html' %}
            {% elif field.type == "bool" or field.type == "checkbox" %}
              {{ value | bool_icon }}
            {% elif field.type == "date" %}
              {{ value | dateformat }}
            {% elif field.type == "currency" or field.type == "money" %}
              {{ value | currency(field.extra.get('currency_code', 'GBP') if field.extra else 'GBP') }}
            {% elif field.type == "file" %}
              {% if value %}
              <a href="{{ value }}" target="_blank" rel="noopener" class="dz-detail-file-link">
                <svg xmlns="http://www.w3.org/2000/svg" class="dz-detail-file-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                </svg>
                {{ value | basename_or_url }}
              </a>
              {% else %}—{% endif %}
            {% elif field.type == "ref" %}
              {# Try _display keys: relation_name_display (from _inject_display_names) or fk_field_display #}
              {% set rel_name = field.name.removesuffix("_id") if field.name.endswith("_id") else field.name %}
              {% set display_val = detail.item.get(rel_name ~ "_display", "") or detail.item.get(field.name ~ "_display", "") %}
              {% if display_val %}{{ display_val }}{% elif value is mapping %}{{ value.get("name") or value.get("title") or value.get("label") or value.get("email") or value.get("id", "—") }}{% elif value %}{{ value }}{% else %}—{% endif %}
            {% else %}
              {% if value is mapping %}
                {{ value | ref_display }}
              {% elif field.type == "enum" %}
                {{ value | default("—", true) | humanize }}
              {% else %}
                {{ value | default("—", true) }}
              {% endif %}
            {% endif %}
          </dd>
        </div>
        {% endif %}
        {% endfor %}
      </dl>
    </div>
  </div>
  {% endblock detail_fields %}

  {# Related entity groups (#related-display-intent) #}
  {% if detail.related_groups %}
  {% block detail_related_groups %}
  {% for group in detail.related_groups %}
  <div class="dz-detail-related-group" data-dazzle-related-group="{{ group.group_id }}">
    {% if detail.related_groups | length > 1 or not group.is_auto %}
    <h3 class="dz-detail-related-label">{{ group.label }}</h3>
    {% endif %}

    {% if group.display == "status_cards" %}
      {% include "fragments/related_status_cards.html" %}
    {% elif group.display == "file_list" %}
      {% include "fragments/related_file_list.html" %}
    {% else %}
      {% include "fragments/related_table_group.html" %}
    {% endif %}
  </div>
  {% endfor %}
  {% endblock detail_related_groups %}
  {% endif %}

  {# #956 cycle 11 — audit-history region. Opt-in via DSL
     `show_history: true` on the surface; backed by cycle-9's
     `render_audit_history_region`. HTMX-loaded so the audit fetch
     doesn't block the detail-page render and the empty-state /
     RBAC-denied paths are handled by the audit_history.html
     fragment without an extra round-trip. #}
  {% if detail.show_history and detail.item.get("id") %}
  {% block detail_audit_history %}
  <div class="dz-detail-audit-history"
       hx-get="/_dazzle/audit-history/{{ detail.entity_name }}/{{ detail.item.id }}"
       hx-trigger="load"
       hx-swap="innerHTML">
    <p class="dz-audit-history__loading" aria-live="polite">Loading history…</p>
  </div>
  {% endblock detail_audit_history %}
  {% endif %}
</div>
{% endif %}