{# Detail view component - displays entity fields as a definition list #}
{% if detail %}
<div class="max-w-3xl" data-dazzle-entity="{{ detail.entity_name }}">
  {# Header with actions #}
  <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>

  {# Transition buttons (state machine) #}
  {% 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 %}

  {# Detail card #}
  <div class="card bg-base-100 shadow-sm">
    <div class="card-body">
      <dl class="divide-y divide-base-200">
        {% for field in detail.fields %}
        {% 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') }}
            {% else %}
              {{ value | default("—") }}
            {% endif %}
          </dd>
        </div>
        {% endfor %}
      </dl>
    </div>
  </div>
</div>
{% endif %}