{% extends "admin/base.html" %}
{% from "admin/components/csrf-field.html" import csrf_field %}
{% from "admin/components/field.html" import render_field_value with context %}
{% from "admin/components/inline.html" import render_inline_section with context %}
{% from "admin/components/icons.html" import icon %}
{% block title %}{{ _(model_admin.get_verbose_name()) }}{% endblock %}
{% block content %}
{# Layout comes from ui("page"), shared with the form, so viewing and
   editing the same record do not jump width or alignment.

   Edit, Delete and the record actions sit below the record, not above
   it -- the record is what a viewer came to read -- and stay reachable
   on a long one thanks to the pinned bar. #}
<div class="{{ ui('page') }}">
  <div class="{{ ui('page', 'body-wide') if wide_body else ui('page', 'body') }}">
    <dl class="{{ ui('card') }} divide-y divide-border">
      {% for name in detail_fields %}
      {% set field = model_admin.get_field(name) %}
      <div class="grid grid-cols-1 gap-1 px-4 py-3 sm:grid-cols-3 sm:gap-4">
        {# A field's help_text deliberately does not appear here: it
           explains how to fill a field in, which is a question the form
           answers and this page does not ask. See ui/field.html. #}
        <dt class="text-sm font-medium text-muted-foreground">{{ _(field.label) }}</dt>
        <dd class="text-sm text-foreground sm:col-span-2">{{ render_field_value(field, field.get_value(object), model_admin.get_empty_value()) }}</dd>
      </div>
      {% endfor %}
    </dl>
    {% for inline in inlines %}{{ render_inline_section(inline) }}{% endfor %}
    {# Only rendered when the configured audit logger can read back
       (core.audit.AuditReader) -- a write-only logger records silently. #}
    {% if history %}
    <div class="{{ ui('history') }}">
      <h2 class="{{ ui('history', 'title') }}">{{ _("History") }}</h2>
      <ul class="divide-y divide-border">
        {% for entry in history %}
        <li class="{{ ui('history', 'row') }}">
          <span><span class="{{ ui('history', 'who') }}">{{ entry.who }}</span>
            <span class="{{ ui('history', 'what') }}">{{ entry.what }}</span></span>
          <span class="{{ ui('history', 'when') }}">{{ entry.when }}</span>
        </li>
        {% endfor %}
      </ul>
    </div>
    {% endif %}
  </div>
  {# No Delete here -- it lives on the edit form, so destroying a record
     is something you opt into by entering edit mode rather than a click
     away from merely looking at one. #}
  <div class="{{ ui('page', 'actions') }}">
    <div class="{{ ui('page', 'actions-inner-wide') if wide_body else ui('page', 'actions-inner') }}">
      <div class="{{ ui('page', 'actions-primary') }}">
        {% if permissions.can_update %}
        <a href="{{ base_path }}/{{ model_admin.get_slug() }}/{{ model_admin.get_pk(object) }}/edit"
           class="{{ ui('button', 'outline') }}">
          {{ icon("edit", "w-4 h-4") }} {{ _("Edit") }}
        </a>
        {% endif %}
        {% for action in actions %}
        {# w-full sm:w-auto tracks "actions-primary"'s flex-col ->
           sm:flex-row switch by hand: stretch gives Edit its full width
           as a direct child, but an action's button is a grandchild --
           the stretch stops at the <form> -- and would otherwise sit
           stunted beside a full-width Edit. #}
        <form method="post" action="{{ base_path }}/{{ model_admin.get_slug() }}/actions/{{ action.name }}"
              {% if action.confirm %}data-confirm="{{ _(action.confirm) }}"{% endif %} {% if action.preview %}data-preview{% endif %}
              onsubmit="return window.adminConfirmSubmit(event, this, this.dataset.confirm)">
          {{ csrf_field(csrf_token) }}
          <input type="hidden" name="pks" value="{{ model_admin.get_pk(object) }}">
          <button type="submit" class="{{ ui('button', 'outline') }} w-full sm:w-auto">
            {{ _(action.label) }}
          </button>
        </form>
        {% endfor %}
      </div>
    </div>
  </div>
</div>
{% endblock %}