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

{% block page_title %}{{ view.label_plural }} · {{ title }}{% endblock %}

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

{% block header %}
  <h1 class="truncate text-[22px] font-semibold leading-tight tracking-tight">{{ view.label_plural }}</h1>
  {% include "adminsite/_records_total.html" %}
{% endblock %}

{% block header_actions %}
  {#- On a phone the page's other actions fold into one menu, so the header
      keeps to a single line. Wider, Import and Export CSV are buttons, and so
      is the view's own action when it has only one. Several share a More
      actions menu, so however many there are, the header keeps to a few
      buttons. Kept as buttons of the header's own row, they wrap where they
      do not all fit; kept apart in a row of their own, they ran past the edge
      of the panel. In either menu whatever cannot be undone comes last, under
      a line of its own. -#}
  {%- set safe = view_actions|rejectattr("dangerous")|list -%}
  {%- set dangerous = view_actions|selectattr("dangerous")|list -%}
  <div class="hidden sm:contents">
    {% if can_import %}
      <a class="btn btn-plain btn-sm" href="{{ urls.list(view) }}/import">
        <span class="text-muted">{{ icons.icon("upload") }}</span>{{ _('Import') }}
      </a>
    {% endif %}
    {% if can_export %}
      <a class="btn btn-plain btn-sm" href="{{ urls.export(view, **export_params) }}" data-keeps="">
        <span class="text-muted">{{ icons.icon("download") }}</span>{{ _('Export CSV') }}
      </a>
    {% endif %}
    {% if view_actions|length == 1 %}
      {% set item = view_actions[0] %}
      <button class="btn btn-sm {% if item.dangerous %}btn-error btn-soft{% else %}btn-plain{% endif %}"
              type="button" onclick='runRecordAction({{ item.name|tojson }}, "")'>
        {% if item.icon %}{{ icons.custom(item.icon, urls, "size-4" if item.dangerous else "size-4 text-muted") }}{% endif %}
        {{ item.label }}
      </button>
    {% elif view_actions %}
      <button id="view-actions-button" class="btn btn-plain btn-sm" type="button" popovertarget="view-actions-menu">
        {{ _('More actions') }}<span class="text-muted">{{ icons.icon("chevron-down", 14) }}</span>
      </button>
      {#- In the top layer, lined up with the button's end, as the Actions menu
          is. -#}
      <div id="view-actions-menu" popover data-below="view-actions-button" data-align="end"
           ontoggle="dropBelow(event)" aria-label="{{ _('More actions') }}"
           class="invisible inset-auto m-0 w-72 rounded-box border border-base-300 bg-base-100 p-1.5 text-base-content shadow-float">
        <ul class="menu w-full p-0">
          {% for item in safe + dangerous %}
            <li {% if safe and loop.index0 == safe|length %}class="mt-1 border-t border-base-300 pt-1"{% endif %}>
              <button type="button" class="{% if item.dangerous %}text-error{% endif %}"
                      onclick='this.closest("[popover]").hidePopover(); runRecordAction({{ item.name|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 %}
        </ul>
      </div>
    {% endif %}
  </div>
  {% if view_actions or can_import or can_export %}
    <div class="dropdown dropdown-end sm:hidden">
      <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-56 rounded-box border border-base-300 bg-base-100 p-1 shadow-float">
        {% if can_import %}
          <li><a href="{{ urls.list(view) }}/import"><span class="text-muted">{{ icons.icon("upload", 14) }}</span>{{ _('Import') }}</a></li>
        {% endif %}
        {% if can_export %}
          <li><a href="{{ urls.export(view, **export_params) }}" data-keeps=""><span class="text-muted">{{ icons.icon("download", 14) }}</span>{{ _('Export CSV') }}</a></li>
        {% endif %}
        {% for item in safe + dangerous %}
          <li {% if loop.index0 == safe|length and (safe or can_import or can_export) %}class="mt-1 border-t border-base-300 pt-1"{% endif %}>
            <button type="button" class="{% if item.dangerous %}text-error{% endif %}"
                    onclick='runRecordAction({{ item.name|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 %}
      </ul>
    </div>
  {% endif %}
  {% if can_create %}
    <a class="btn btn-primary btn-sm ps-2.5" href="{{ urls.create(view) }}">
      {{ icons.icon("plus") }}<span class="sm:hidden">{{ _('New') }}</span><span class="hidden sm:inline">{{ _('New {thing}', thing=view.label|lower) }}</span>
    </a>
  {% endif %}
{% endblock %}

{% block content %}
<div class="flex min-h-0 flex-1 flex-col">
  <p id="records-status" class="sr-only" aria-live="polite"></p>
  {% if saving_views %}{% include "adminsite/_saved_tabs.html" %}{% endif %}
  {% include "adminsite/_toolbar.html" %}
  {% include "adminsite/_table.html" %}
  {% if view._settings.inline_editable_fields %}{% include "adminsite/_value_editing.html" %}{% endif %}
</div>
{% endblock %}