{% extends "layout.html" %}

{% block title %}{{ record }} — {{ resource.label }} — {{ panel_title }}{% endblock %}

{% block breadcrumb %}
  <nav class="flex flex-wrap items-center gap-1 text-sm text-secondary-400 dark:text-secondary-500">
    <a href="{{ panel_prefix }}/" class="hover:text-secondary-600 dark:hover:text-secondary-300 transition-colors">Dashboard</a>
    <span class="select-none">›</span>
    <a href="{{ panel_prefix }}/{{ resource.slug }}" class="hover:text-secondary-600 dark:hover:text-secondary-300 transition-colors">{{ resource.label_plural }}</a>
    <span class="select-none">›</span>
    <span class="text-secondary-600 dark:text-secondary-300">{{ record }}</span>
  </nav>
{% endblock %}

{% block page_heading %}
  <div>
    <h1 class="text-xl font-semibold text-secondary-900 dark:text-secondary-100">{{ record }}</h1>
    <p class="text-sm text-secondary-500 dark:text-secondary-400 mt-0.5">{{ resource.label }} · #{{ record_id }}</p>
  </div>
{% endblock %}

{% block header_actions %}
  {% if resource.form_actions %}
    {% for action in resource.form_actions %}
      {% if action.placement == 'header' and has_perm(resource.slug + ':action') %}
      <button type="button"
              data-action-trigger
              data-action-url="{{ panel_prefix }}/{{ resource.slug }}/{{ record_id }}/action/{{ action.key }}"
              data-action-title="{{ action.modal_title }}"
              data-action-fields="{{ action.fields_json() | e }}"
              data-action-confirm="{{ action.confirm or '' }}"
              data-action-submit="{{ action.label }}"
              class="inline-flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium
                     {{ action.button_class }} transition-colors">
        {{ render_icon(action.icon) }}
        {{ action.label }}
      </button>
      {% endif %}
    {% endfor %}
  {% endif %}

  {% if resource.can_edit and has_perm(resource.slug + ':edit') %}
  <a href="{{ panel_prefix }}/{{ resource.slug }}/{{ record_id }}"
     class="inline-flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium
            text-white bg-primary hover:opacity-90 transition-opacity">
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
        d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
    </svg>
    Edit
  </a>
  {% endif %}
{% endblock %}

{% block flash %}{% endblock %}

{% block content %}
<div>

  {% if flash == 'action_ok' %}
  <div id="flash-banner"
       class="mb-5 flex items-center gap-2 bg-green-50 border border-green-200 text-green-800
              dark:bg-green-900/30 dark:border-green-700/50 dark:text-green-300
              rounded-lg px-4 py-2.5 text-sm">
    <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
    </svg>
    Action completed.
  </div>
  <script>
    var fb = document.getElementById('flash-banner');
    if (fb) setTimeout(function(){ fb.style.transition='opacity .4s'; fb.style.opacity=0; setTimeout(function(){ fb.remove(); }, 400); }, 3000);
  </script>
  {% endif %}

  {# ── Detail description list ────────────────────────────────────── #}
  <div>

    {%- set _detail_fields = resource.detail_fields if resource.detail_fields else resource.form_fields %}
    {% if _detail_fields %}
      {%- set _fields = _detail_fields %}
      {%- set _form_cols = resource.form_cols %}
      {% include "partials/detail_grid.html" %}
    {% else %}
      <div class="px-6 py-10 text-center text-sm text-secondary-400 dark:text-secondary-500">
        No fields configured.
      </div>
    {% endif %}

  </div>

  {# ── Inline form actions ────────────────────────────────────────── #}
  {% set inline_actions = [] %}
  {% for action in resource.form_actions %}
    {% if action.placement == 'inline' and has_perm(resource.slug + ':action') %}
      {% set _ = inline_actions.append(action) %}
    {% endif %}
  {% endfor %}

  {% if inline_actions %}
  <div class="mt-6 flex flex-wrap items-center gap-2">
    <span class="text-xs font-medium text-secondary-400 dark:text-secondary-500 uppercase tracking-wider mr-1">Actions</span>
    {% for action in inline_actions %}
    <button type="button"
            data-action-trigger
            data-action-url="{{ panel_prefix }}/{{ resource.slug }}/{{ record_id }}/action/{{ action.key }}"
            data-action-title="{{ action.modal_title }}"
            data-action-fields="{{ action.fields_json() | e }}"
            data-action-confirm="{{ action.confirm or '' }}"
            data-action-submit="{{ action.label }}"
            class="inline-flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium
                   {{ action.button_class }} transition-colors">
      {{ render_icon(action.icon) }}
      {{ action.label }}
    </button>
    {% endfor %}
  </div>
  {% endif %}

</div>
{% endblock %}