{% extends "adminsite/base.html" %}
{% import "adminsite/_icons.html" as icons %}
{% import "adminsite/_values.html" as values %}

{% block page_title %}{{ heading }} · {{ title }}{% endblock %}

{% block breadcrumb %}
  <nav aria-label="{{ _('Breadcrumb') }}" class="flex h-11 items-end gap-1.5 px-4 text-[13px] text-muted lg:px-7">
    <a class="hover:text-base-content" href="{{ urls.list(view) }}">{{ view.label_plural }}</a>
    {{ icons.icon("chevron-right", 14) }}
    <span aria-current="page" class="truncate text-base-content">{{ heading }}</span>
  </nav>
{% endblock %}

{% block header_class %}lg:pt-2 lg:pb-5{% endblock %}

{#- The first choice on the page, such as a status, stands beside the name. -#}
{% set first = namespace(path=none, value="") %}
{% for path, label, value, url in rows if first.path is none and value and view._fields.field_for(path).widget == "select" and not view._fields.hides(record, path) %}
  {% set first.path = path %}{% set first.value = value %}
{% endfor %}
{#- Who last changed the record, from the history the page already holds. -#}
{% set changed = (history or [])|selectattr("entry.succeeded")|first %}

{% block header %}
  <div class="flex min-w-0 flex-col gap-1.5">
    <div class="flex flex-wrap items-center gap-x-3 gap-y-1">
      <h1 class="truncate text-[26px] font-semibold leading-tight tracking-tight">{{ heading }}</h1>
      {% if first.path %}
        {{ values.badge(view._fields.field_for(first.path), view._fields.value_at(record, first.path), first.value) }}
      {% endif %}
    </div>
    {% if changed %}
      <p class="text-[13px] text-muted">{{ _('Last changed by {who} on {when}', who=changed.who, when=changed.when) }}</p>
    {% endif %}
  </div>
{% endblock %}

{% block header_actions %}
  {#- Each action a button of the header's own row, which wraps where they
      do not all fit. On a phone they fold into the menu below. -#}
  <div class="hidden sm:contents">
    {% for item in record_actions %}
      <button class="btn btn-sm {% if item.dangerous %}btn-error btn-soft{% else %}btn-plain{% endif %}"
              type="button" onclick='runRecordAction({{ item.name|tojson }}, {{ key|tojson }})'>
        {% if item.icon %}{{ icons.custom(item.icon, urls, "size-4" if item.dangerous else "size-4 text-muted") }}{% endif %}
        {{ item.label }}
      </button>
    {% endfor %}
  </div>
  {% if can_edit %}
    <a class="btn btn-primary btn-sm ps-2.5" href="{{ urls.edit(view, key) }}">{{ icons.icon("pencil") }}{{ _('Edit') }}</a>
  {% endif %}
  {#- The menu holds delete, and on a phone the record's actions as well. -#}
  {% if can_delete or record_actions %}
    <div class="dropdown dropdown-end {% if not can_delete %}sm:hidden{% endif %}">
      <div tabindex="0" role="button" aria-haspopup="true" class="btn btn-plain btn-sm btn-square"
           aria-label="{{ _('More actions') }}">{{ icons.icon("more") }}</div>
      <ul tabindex="0" class="dropdown-content menu menu-sm z-30 mt-1 w-52 rounded-box border border-base-300 bg-base-100 p-1 shadow-float">
        {% for item in record_actions %}
          <li class="sm:hidden">
            <button type="button" class="{% if item.dangerous %}text-error{% endif %}"
                    onclick='runRecordAction({{ item.name|tojson }}, {{ key|tojson }})'>
              {%- if item.icon %}{{ icons.custom(item.icon, urls, "size-3.5" if item.dangerous else "size-3.5 text-muted") }}{% endif -%}
              {{ item.label }}</button>
          </li>
        {% endfor %}
        {% if can_delete %}
          <li>
            <button type="button" class="text-error" onclick="document.getElementById('confirm-delete').showModal()">
              {{ icons.icon("trash", 14) }}{{ _('Delete') }}
            </button>
          </li>
        {% endif %}
      </ul>
    </div>
  {% endif %}
{% endblock %}

{% block content %}
{% include "adminsite/_action_forms.html" %}
{#- The status beside the name leaves the rows, unless it is all they hold. -#}
{% set skipped = first.path if first.path and rows|length > 1 else none %}
{% set by_path = {} %}
{% for row in rows %}{% set ignored = by_path.update({row[0]: row}) %}{% endfor %}
{#- A table for each panel of the view's layout, and each tab, with its
    fields in the order placed; the fields outside them make a table of
    their own, the first named after the model. -#}
{% set sections = [] %}
{% for card in layout %}
  {% if card.kind == "tabs" %}
    {% for tab in card.children %}
      {% set ignored = sections.append((tab.title, "", tab.paths())) %}
    {% endfor %}
  {% else %}
    {% set ignored = sections.append((card.title or (view.label if loop.first else ""), card.description, card.paths())) %}
  {% endif %}
{% endfor %}
<div class="flex flex-1 flex-col" x-data="{ tab: 'details' }">
  {% if history is not none %}
    <div role="tablist" aria-label="{{ _('Sections') }}" class="flex gap-5 border-b border-base-300 px-4 lg:px-7">
      <button role="tab" type="button" id="tab-details" aria-controls="panel-details"
              aria-selected="true" :aria-selected="(tab === 'details').toString()" @click="tab = 'details'"
              class="-mb-px h-10 border-b-2 text-[13.5px] font-medium"
              :class="tab === 'details' ? 'border-base-content text-base-content' : 'border-transparent text-muted hover:text-base-content'">
        {{ _('Details') }}
      </button>
      <button role="tab" type="button" id="tab-history" aria-controls="panel-history"
              aria-selected="false" :aria-selected="(tab === 'history').toString()" @click="tab = 'history'"
              class="-mb-px h-10 border-b-2 border-transparent text-[13.5px] font-medium text-muted"
              :class="tab === 'history' ? 'border-base-content text-base-content' : 'border-transparent text-muted hover:text-base-content'">
        {{ _('History ({count})', count=(history|length) ~ ('+' if older_history else '')) }}
      </button>
    </div>
  {% else %}
    <div class="border-b border-base-300"></div>
  {% endif %}

  <div class="flex-1 bg-subtle px-4 py-6 lg:px-7">
    <div role="tabpanel" id="panel-details" aria-labelledby="tab-details" x-show="tab === 'details'"
         class="flex max-w-5xl flex-col gap-5">
      {% for title, description, paths in sections %}
        {% set listed = paths|reject("equalto", skipped)|list %}
        {% if listed %}
          {#- A row per field, its label in a column of its own, so the labels
              read down one line and the values line up beside them. -#}
          <section class="overflow-hidden rounded-box border border-base-300 bg-base-100 shadow-quiet"
                   {% if title %}aria-labelledby="fields-{{ loop.index }}"{% else %}aria-label="{{ view.label }}"{% endif %}>
            {% if title %}
              <div class="px-5 py-3.5">
                <h2 id="fields-{{ loop.index }}" class="text-sm font-semibold">{{ title }}</h2>
                {% if description %}<p class="pt-0.5 text-[13px] text-muted">{{ description }}</p>{% endif %}
              </div>
            {% endif %}
            <dl>
              {% for path in listed %}
                {% set path, label, value, url = by_path[path] %}
                {% set item = view._fields.field_for(path) %}
                {#- A JSON document with a schema it fits reads as labelled values. -#}
                {% set stored = view._fields.value_at(record, path) if item.widget == "json" and not view._fields.hides(record, path) else none %}
                {% set reading = item.form_document(record, stored) if stored is not none and item.form_document is defined else none %}
                <div class="grid gap-1 px-5 py-3 sm:grid-cols-[12rem_minmax(0,1fr)] sm:gap-4 {% if title or not loop.first %}border-t border-line{% endif %}"
                     {% if reading is not none %}x-data="{ view: 'values' }"{% endif %}>
                  <dt class="text-[13px] leading-5 text-muted">{{ label }}</dt>
                  <dd class="min-w-0 break-words leading-5">
                    {% if reading is not none %}
                      <div class="mb-2 flex justify-end">
                        {%- with switch_views = [("values", _("Values")), ("json", "JSON")], switch_label = label -%}
                          {% include "adminsite/_document_switch.html" %}
                        {%- endwith -%}
                      </div>
                    {% endif %}
                    {% if view._fields.hides(record, path) %}
                      {#- Read through a record its own view keeps from this user. -#}
                      <span class="text-muted">{{ value }}</span>
                    {% elif item.widget in ("file", "image") and value %}
                      {% set address = urls.file(view, path, view._fields.value_at(record, path)) %}
                      {% if item.widget == "image" %}
                        <a href="{{ address }}"><img src="{{ address }}" alt="{{ value }}" class="max-h-40 rounded-box border border-base-300"></a>
                      {% else %}
                        <a class="text-link hover:underline" href="{{ address }}">{{ value }}</a>
                      {% endif %}
                    {% elif url and value %}
                      <a class="text-link hover:underline" href="{{ url }}">{{ value }}</a>
                    {% elif path in many and many[path].names %}
                      {#- Each record a link to many holds opens its own page. -#}
                      {%- for name, opens in many[path].names -%}
                        {%- if opens -%}
                          <a class="text-link hover:underline" href="{{ opens }}">{{ name }}</a>
                        {%- else -%}
                          {{ name }}
                        {%- endif -%}
                        {%- if not loop.last %}, {% endif -%}
                      {%- endfor -%}
                      {%- if many[path].more > 0 %}{{ _(" and {count} more", count="{:,}".format(many[path].more)) }}{% endif -%}
                    {% elif item.widget in ("select", "checkbox") and value %}
                      {{ values.badge_or_text(item, view._fields.value_at(record, path), value) }}
                    {% elif item.widget == "number" and value %}
                      <span class="tabular-nums">{{ value }}</span>
                    {% elif item.widget == "json" and stored is not none %}
                      {% with outline = item.outline(stored), pretty = item.laid_out(stored) %}
                        {% if reading is not none %}
                          {% with shown = reading.shown(stored) %}{% include "adminsite/_document_view.html" %}{% endwith %}
                        {% else %}
                          {% include "adminsite/_json.html" %}
                        {% endif %}
                      {% endwith %}
                    {% elif item.widget == "textarea" and value %}
                      <div class="max-w-prose whitespace-pre-line">{{ value }}</div>
                    {% elif value %}
                      {{ value }}
                    {% else %}
                      {% include "adminsite/_empty.html" %}
                    {% endif %}
                  </dd>
                </div>
              {% endfor %}
            </dl>
          </section>
        {% endif %}
      {% endfor %}

      {% for table in children %}
        <section class="overflow-hidden rounded-box border border-base-300 bg-base-100 shadow-quiet"
                 aria-labelledby="child-{{ loop.index }}">
          <div class="flex items-center gap-2 px-5 py-3.5">
            <h2 id="child-{{ loop.index }}" class="text-sm font-semibold">{{ table.label }}</h2>
            <span class="inline-flex h-5 min-w-5 items-center justify-center rounded-full border border-base-300 bg-subtle px-1.5 text-xs font-medium text-muted">{{ table.rows|length }}</span>
          </div>
          <div class="relative overflow-x-auto overflow-y-hidden">
            <table class="w-full text-sm">
              <thead>
                <tr class="border-y border-line bg-subtle">
                  {% for header in table.headers %}
                    <th class="h-9 px-5 text-[12.5px] font-medium text-muted {{ 'text-end' if table.numeric[loop.index0] else 'text-start' }}">{{ header }}</th>
                  {% endfor %}
                </tr>
              </thead>
              <tbody class="divide-y divide-line">
                {% for cells in table.rows %}
                  <tr>
                    {% for text in cells %}
                      <td class="h-11 px-5 {{ 'text-end tabular-nums' if table.numeric[loop.index0] else '' }}">{% if text %}{{ text }}{% else %}{% include "adminsite/_empty.html" %}{% endif %}</td>
                    {% endfor %}
                  </tr>
                {% else %}
                  <tr>
                    <td colspan="{{ table.headers|length }}" class="h-11 px-5 text-muted">{{ _('None yet.') }}</td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </section>
      {% endfor %}
    </div>

    {% if history is not none %}
      <div role="tabpanel" id="panel-history" aria-labelledby="tab-history" x-show="tab === 'history'" x-cloak
           class="max-w-3xl rounded-box border border-base-300 bg-base-100 p-5 shadow-quiet">
        {% set items = history %}
        {% set show_record = False %}
        {% include "adminsite/_history.html" %}
        {% if older_history %}
          <a class="mt-5 inline-block text-[13px] font-medium text-link hover:underline" href="{{ older_history }}">
            {{ _('Older entries are on the Activity page') }}
          </a>
        {% endif %}
      </div>
    {% endif %}
  </div>
</div>

{% if can_delete %}
  <dialog id="confirm-delete" class="modal">
    <form class="modal-box max-w-md rounded-box border border-base-300 shadow-float" method="post" action="{{ urls.delete(view, key) }}">
      {{ csrf_input | safe if csrf_input }}
      <h3 class="text-base font-semibold">{{ _('Delete {name}?', name=heading) }}</h3>
      <p class="pt-2 text-base-content/80">{{ _('This cannot be undone.') }}</p>
      <div class="modal-action">
        <button type="button" class="btn btn-ghost btn-sm" onclick="this.closest('dialog').close()">{{ _('Cancel') }}</button>
        <button type="submit" class="btn btn-error btn-sm">{{ _('Delete') }}</button>
      </div>
    </form>
    <div class="modal-backdrop" onclick="this.closest('dialog').close()"></div>
  </dialog>
{% endif %}
{% endblock %}