{# Detail view component - displays entity fields as a definition list #}
{# Contract: ~/.claude/skills/ux-architect/components/detail-view.md (UX-029) #}
{% 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="h-8 px-3 rounded-[4px] text-[13px] font-medium text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--muted))] hover:text-[hsl(var(--foreground))] inline-flex items-center transition-colors duration-[80ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]"
         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-[18px] font-semibold text-[hsl(var(--foreground))]">{{ detail.title }}</h2>
    </div>
    <div class="flex gap-2">
      {% if detail.edit_url %}
      <a href="{{ detail.edit_url }}"
         class="h-8 px-3 rounded-[4px] border border-[hsl(var(--border))] text-[13px] font-medium text-[hsl(var(--foreground))] hover:bg-[hsl(var(--muted))] inline-flex items-center transition-colors duration-[80ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]"
         data-dazzle-action="{{ detail.entity_name }}.edit">Edit</a>
      {% endif %}
      {% if detail.delete_url %}
      <button class="h-8 px-3 rounded-[4px] border border-[hsl(var(--destructive))] text-[13px] font-medium text-[hsl(var(--destructive))] hover:bg-[hsl(var(--destructive)/0.1)] inline-flex items-center transition-colors duration-[80ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]"
              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="h-8 px-3 rounded-[4px] border border-[hsl(var(--border))] text-[13px] font-medium text-[hsl(var(--foreground))] hover:bg-[hsl(var(--muted))] inline-flex items-center transition-colors duration-[80ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]"
            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="h-8 px-3 rounded-[4px] border border-[hsl(var(--border))] text-[13px] font-medium text-[hsl(var(--foreground))] hover:bg-[hsl(var(--muted))] inline-flex items-center transition-colors duration-[80ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]"
       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="h-8 px-3 rounded-[4px] border border-[hsl(var(--border))] text-[13px] font-medium text-[hsl(var(--foreground))] hover:bg-[hsl(var(--muted))] inline-flex items-center transition-colors duration-[80ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]"
            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="bg-[hsl(var(--card))] border border-[hsl(var(--border))] rounded-[6px] shadow-[0_1px_3px_rgb(0_0_0/0.04)]">
    <div class="p-4">
      <dl class="divide-y divide-[hsl(var(--border))]">
        {% 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-[13px] font-medium text-[hsl(var(--muted-foreground))]">{{ field.label }}</dt>
          <dd class="mt-1 text-[13px] text-[hsl(var(--foreground))] sm:col-span-2 sm:mt-0">
            {% 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="text-[hsl(var(--primary))] hover:underline 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" 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="mt-6" data-dazzle-related-group="{{ group.group_id }}">
    {% if detail.related_groups | length > 1 or not group.is_auto %}
    <h3 class="text-[14px] font-semibold text-[hsl(var(--foreground))] 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 %}