{# Detail view component - displays entity fields as a definition list #}
{% if detail %}
<div class="{% if detail.related_groups %}max-w-5xl{% else %}max-w-3xl{% endif %}" data-dazzle-entity="{{ detail.entity_name }}">
  {# Header with actions #}
  {% block detail_header %}
  <div class="flex items-center justify-between mb-6">
    <div class="flex items-center gap-3">
      <a href="{{ detail.back_url }}" class="btn btn-ghost btn-sm"
         onclick="var d=this.closest('#dz-detail-drawer');if(d&&window.dzDrawer){window.dzDrawer.close();return false}if(document.referrer&&new URL(document.referrer).origin===location.origin){history.back();return false}">&larr; Back</a>
      <h2 class="text-2xl font-bold">{{ detail.title }}</h2>
    </div>
    <div class="flex gap-2">
      {% if detail.edit_url %}
      <a href="{{ detail.edit_url }}" class="btn btn-outline btn-sm" data-dazzle-action="{{ detail.entity_name }}.edit">Edit</a>
      {% endif %}
      {% if detail.delete_url %}
      <button class="btn btn-error btn-outline btn-sm"
              data-dazzle-action="{{ detail.entity_name }}.delete"
              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="flex gap-2 mb-4" data-dazzle-transitions="{{ detail.entity_name }}">
    {% for transition in detail.transitions %}
    <button class="btn btn-outline btn-sm"
            data-dazzle-action="{{ detail.entity_name }}.transition.{{ transition.to_state }}"
            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="flex gap-2 mb-4" 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="btn btn-outline btn-sm"
       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="flex gap-2 mb-4" data-dazzle-integration-actions="{{ detail.entity_name }}">
    {% for action in detail.integration_actions %}
    <button class="btn btn-outline btn-sm"
            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="card bg-base-100 shadow-sm">
    <div class="card-body">
      <dl class="divide-y divide-base-200">
        {% for field in detail.fields %}
        {% if field.visible | default(true) %}
        {% set value = detail.item.get(field.name, "") %}
        <div class="py-3 sm:grid sm:grid-cols-3 sm:gap-4">
          <dt class="text-sm font-medium text-base-content/70">{{ field.label }}</dt>
          <dd class="mt-1 text-sm sm:col-span-2 sm:mt-0">
            {% if 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="link link-primary inline-flex items-center gap-1">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <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 field.type == "enum" %}{{ value | default("—") | humanize }}{% else %}{{ value | default("—") }}{% 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="mt-6" data-dazzle-related-group="{{ group.group_id }}">
    {% if detail.related_groups | length > 1 or not group.is_auto %}
    <h3 class="text-lg font-semibold mb-3">{{ 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 %}
</div>
{% endif %}