{% extends "base.html" %}
{% from "macros.html" import icon, detail_field_row %}
{% block title %}{{ title }}{% endblock %}

{% block content %}
<div class="page-header">
  <div>
    <h1 class="page-title">{{ title }}</h1>
  </div>
  <div class="page-actions">
    {% if can_edit %}
      <a href="{{ admin_prefix }}/{{ slug }}/{{ item.id }}"
         class="btn btn-primary btn-sm" data-spa>
        {{ icon('edit', 14) }} <span style="margin-left:4px">{{ t('Edit') }}</span>
      </a>
    {% endif %}
    {# SECURITY: History (audit logs) + Trash reserved for admins only #}
    {% if request.user and request.user.is_admin %}
    <a href="{{ admin_prefix }}/{{ slug }}/{{ item.id }}/history"
       class="btn btn-ghost btn-sm" data-spa title="{{ t('History') }}">
      {{ icon('history', 14) }} <span style="margin-left:4px">{{ t('History') }}</span>
    </a>
    <a href="{{ admin_prefix }}/trash?model_slug={{ slug }}" class="btn btn-ghost btn-sm" data-spa>
      {{ icon('trash', 14) }} <span style="margin-left:4px">{{ t('Trash') }}</span>
    </a>
    {% endif %}
    <a href="{{ admin_prefix }}/{{ slug }}"
       class="btn btn-default btn-sm" data-spa>
      {{ icon('arrow-left', 14) }} <span style="margin-left:4px">{{ t('Back to list') }}</span>
    </a>
  </div>
</div>

<div class="detail-view">
  <div style="display:flex;flex-direction:column;gap:32px">

    {# Field groups #}
    {% for group in field_groups %}
      <div class="detail-section">
        {% if group.label %}
          <h3 class="detail-section-title">{{ group.label }}</h3>
        {% endif %}
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:24px">
          {% for pair in group.fields %}
            {% set model_field = pair.m %}
            {# SECURITY: Skip password fields - never show passwords #}
            {% if not (model_field and model_field.is_password) %}
              {{ detail_field_row(pair.f, pair.m, item) }}
            {% endif %}
          {% endfor %}
        </div>
      </div>
    {% endfor %}

    {# Permission matrix (read-only for Role) #}
    {% if permission_matrix %}
      <div class="detail-section" style="padding-top:24px; border-top:1px solid var(--border)">
        <h3 class="detail-section-title">
          {{ icon('shield', 18) }} {{ t('Permissions') }}
        </h3>

        {% if permission_matrix.wildcard %}
          <div class="detail-alert detail-alert-info">
            {{ icon('shield', 16) }} <strong>{{ t('Superuser') }}</strong> — {{ t('Full access to all resources. Bypasses matrix below.') }}
          </div>
        {% endif %}

        <div class="table-wrap" style="box-shadow:none; margin-top:16px">
          <table class="perm-matrix">
            <thead>
              <tr>
                <th style="padding-left:16px">{{ t('Model') }}</th>
                {% for v in permission_matrix.verbs %}<th>{{ t(v) }}</th>{% endfor %}
              </tr>
            </thead>
            <tbody>
              {% for row in permission_matrix.rows %}
                <tr>
                  <td style="font-weight:600; padding-left:16px">{{ row.label }}</td>
                  {% for cell in row.cells %}
                    <td style="text-align:center">
                      {% if cell.checked %}
                        <span class="detail-perm-check">{{ icon('check', 14) }}</span>
                      {% else %}
                        <span class="detail-perm-empty">—</span>
                      {% endif %}
                    </td>
                  {% endfor %}
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    {% endif %}

    {# M2M Relations #}
    {% for m2m in m2m_fields %}
      <div class="detail-section" style="padding-top:24px; border-top:1px solid var(--border)">
        <h3 class="detail-section-title">{{ m2m.label }}</h3>
        {% if m2m.current %}
          <div class="detail-tags">
            {% for opt in m2m.current %}
              <span class="detail-tag">{{ opt.label }}</span>
            {% endfor %}
          </div>
        {% else %}
          <div class="empty-state" style="padding:20px">
            <p class="empty-text">{{ t('No related records') }}</p>
          </div>
        {% endif %}
      </div>
    {% endfor %}

    {# Inline relations #}
    {% for inline in inlines %}
      <div class="detail-section" style="padding-top:24px; border-top:1px solid var(--border)">
        <h3 class="detail-section-title">{{ inline.label }}</h3>
        {% if inline.rows %}
          <div style="overflow-x:auto;">
            <table>
              <thead>
                <tr>
                  {% for col in inline.columns %}<th>{{ col }}</th>{% endfor %}
                  <th style="width:60px"></th>
                </tr>
              </thead>
              <tbody>
                {% for row in inline.rows %}
                  <tr>
                    {% for col in inline.columns %}<td>{{ row[col] }}</td>{% endfor %}
                    <td style="text-align:right">
                      {% if inline.target_slug %}
                        <a href="{{ admin_prefix }}/{{ inline.target_slug }}/{{ row.id }}/view"
                           class="btn btn-ghost btn-icon" data-spa title="{{ t('View') }}">
                          {{ icon('search', 16) }}
                        </a>
                      {% endif %}
                    </td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        {% else %}
          <div class="empty-state" style="padding:40px 20px">
            <p class="empty-text">{{ t('No related records') }}</p>
          </div>
        {% endif %}
      </div>
    {% endfor %}

    {# Action buttons #}
    <div style="margin-top:40px; padding-top:24px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center">
      <div style="display:flex; gap:12px">
        {% if can_edit %}
          <a href="{{ admin_prefix }}/{{ slug }}/{{ item.id }}"
             class="btn btn-primary" data-spa>
            {{ icon('edit', 14) }} <span style="margin-left:4px">{{ t('Edit') }}</span>
          </a>
        {% endif %}
        {% if can_add and user_can_add %}
          <a href="{{ admin_prefix }}/{{ slug }}/{{ item.id }}/clone" class="btn btn-default" data-spa>
            {{ icon('copy', 14) }} <span style="margin-left:4px">{{ t('Clone') }}</span>
          </a>
        {% endif %}
        <a href="{{ admin_prefix }}/{{ slug }}"
           class="btn btn-default" data-spa>
          {{ icon('arrow-left', 14) }} <span style="margin-left:4px">{{ t('Back to list') }}</span>
        </a>
      </div>
      <div>
        {% if item and item.id and can_delete %}
          <form method="post"
                action="{{ admin_prefix }}/{{ slug }}/{{ item.id }}/delete"
                style="display:inline"
                data-block="#page-body"
                data-push-url
                data-confirm="{{ t('Move this record to trash?') }}">
            {{ request.csrf_input() }}
            <button type="submit" class="btn btn-ghost text-danger">
              {{ icon('trash', 14) }} <span style="margin-left:4px">{{ t('Move to Trash') }}</span>
            </button>
          </form>
        {% endif %}
      </div>
    </div>

  </div>
</div>

{% endblock %}