{# Detail view component - displays entity fields as a definition list #}
{% if detail %}
<div class="{% if detail.related_tabs %}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">&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 %}
              {{ value | default("—") }}
            {% endif %}
          </dd>
        </div>
        {% endif %}
        {% endfor %}
      </dl>
    </div>
  </div>
  {% endblock detail_fields %}

  {# Related entity tabs (hub-and-spoke, #301) #}
  {% if detail.related_tabs %}
  {% block detail_related_tabs %}
  {# Related tabs — uses Alpine for tab state #}
  {% set first_tab_id = detail.related_tabs[0].tab_id if detail.related_tabs else '' %}
  <div class="mt-6" data-dazzle-related="{{ detail.entity_name }}" x-data="{ activeTab: '{{ first_tab_id }}' }">
    {# Tab navigation with count badges #}
    <div class="tabs tabs-bordered" role="tablist">
      {% for tab in detail.related_tabs %}
      {% if tab.visible | default(true) %}
      <button class="tab"
              :class="activeTab === '{{ tab.tab_id }}' && 'tab-active'"
              role="tab"
              :aria-selected="activeTab === '{{ tab.tab_id }}'"
              @click="activeTab = '{{ tab.tab_id }}'">
        {{ tab.label }}
        <span class="badge badge-sm ml-1">{{ tab.total }}</span>
      </button>
      {% endif %}
      {% endfor %}
    </div>

    {# Tab panels #}
    {% for tab in detail.related_tabs %}
    {% if tab.visible | default(true) %}
    <div x-show="activeTab === '{{ tab.tab_id }}'" role="tabpanel">
      <div class="card bg-base-100 shadow-sm mt-2">
        <div class="card-body p-0">
          {% if tab.create_url %}
          <div class="flex justify-end p-3 pb-0">
            <a href="{{ tab.create_url }}?{{ tab.filter_field }}={{ detail.item.get('id', '') }}{% if tab.filter_type_field %}&amp;{{ tab.filter_type_field }}={{ tab.filter_type_value }}{% endif %}"
               class="btn btn-primary btn-sm"
               data-dazzle-action="{{ tab.entity_name }}.create">
              + New {{ tab.label }}
            </a>
          </div>
          {% endif %}

          <div class="overflow-x-auto">
            <table class="table table-zebra w-full" data-entity="{{ tab.entity_name }}">
              <thead>
                <tr>
                  {% for col in tab.columns %}
                  <th scope="col">{{ col.label }}</th>
                  {% endfor %}
                </tr>
              </thead>
              <tbody>
                {% if tab.rows %}
                {% for item in tab.rows %}
                <tr class="hover cursor-pointer"
                    {% if tab.detail_url_template %}
                    hx-get="{{ tab.detail_url_template.replace('{id}', item.id | string) }}"
                    hx-push-url="true"
                    hx-target="body"
                    hx-swap="innerHTML"
                    {% endif %}>
                  {% for col in tab.columns %}
                  <td>
                    {% if col.type == "badge" %}
                      <span class="badge {{ item[col.key] | badge_class }}">{{ item[col.key] | default("") }}</span>
                    {% 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(col.currency_code or "GBP") }}
                    {% else %}
                      {{ item[col.key] | default("") | truncate_text }}
                    {% endif %}
                  </td>
                  {% endfor %}
                </tr>
                {% endfor %}
                {% else %}
                <tr>
                  <td colspan="{{ tab.columns | length }}" class="text-center py-8 text-base-content/50">
                    No {{ tab.label | lower }} found.
                  </td>
                </tr>
                {% endif %}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    {% endif %}
    {% endfor %}
  </div>
  {% endblock detail_related_tabs %}
  {% endif %}
</div>
{% endif %}