{% extends "list_view.html" %}
{% load i18n %}
{% comment %}
  Overrides the outer `content` block, not page.header/page.content-wrapper:
  those sit inside page_view.html's <c-mvp.container>, a plain div that breaks
  the flex chain a filled layout needs (specs/027-table-layout-and-column-styling/research.md R5).
{% endcomment %}
{% comment %}
  page.actions skips {{ block.super }}: list_view.html's default includes
  sort, which a table view's own action set must not (FR-007) — see
  MVPTableViewMixin.actions.
{% endcomment %}
{% comment %}
  The breadcrumb trail draws in the app header, not here, so page.header has
  nothing of its own to draw — it stays declared for a project that filled it.
{% endcomment %}
{% comment %}
  app.footer is emptied: the shell's footer belongs to a page that ends, and
  this one does not — the table spends the whole viewport, so a footer under
  it either steals rows or never comes into view.
{% endcomment %}
{% block app.footer %}{% endblock app.footer %}
{% block content %}
  <c-mvp.page fill class="{{ page.class }}">
    {% block page.content-wrapper %}
      {% comment %}
        gap="0" and padding on the bars, never the page: the table meets the
        shell edges, so a gap or page padding would inset the scroll region.
      {% endcomment %}
      <c-mvp.page.content gap="0">
        {% comment %}
          Plain flex row, not <c-mvp.toolbar>: a toolbar's trailing slot falls
          through to a context `actions` variable when unfilled, printing its
          repr — a bare row keeps that trap shut regardless of page context.
        {% endcomment %}
        <div class="flex w-full px-4">
          {% block page.title %}
            <div class="page-title flex flex-col md:flex-row md:items-center md:justify-between gap-2 w-full">
              <div class="flex flex-col gap-1">
                {% block page.header %}
                {% endblock page.header %}
                <h1 class="text-2xl font-bold leading-tight">{{ page.title }}</h1>
                {% if page.subtitle %}
                  <p class="opacity-70 leading-relaxed max-w-prose">{{ page.subtitle }}</p>
                {% endif %}
              </div>
              <div class="flex flex-wrap md:flex-nowrap gap-2 md:gap-1 md:justify-end md:items-center">
                {% block page.actions %}
                  <c-mvp.page.list.actions />
                {% endblock page.actions %}
              </div>
            </div>
          {% endblock page.title %}
        </div>
        {% block page.content %}
          <c-mvp.addons.django-table :table="table" class="flex-1 min-h-0" />
        {% endblock page.content %}
        <div class="flex w-full px-4 py-4">
          {% block page.footer %}
            {% if page_obj %}
              <div class="flex flex-wrap items-center justify-between gap-2 w-full">
                <c-mvp.text size="sm" tight>
                  {% with start=page_obj.start_index end=page_obj.end_index total=page_obj.paginator.count %}
                    {% blocktrans with name_plural=model_info.verbose_name_plural %}
                    Showing {{ start }}-{{ end }} of {{ total }} {{ name_plural }}
                    {% endblocktrans %}
                  {% endwith %}
                </c-mvp.text>
                <c-mvp.pagination :page_obj="page_obj" />
              </div>
            {% endif %}
          {% endblock page.footer %}
        </div>
      </c-mvp.page.content>
    {% endblock page.content-wrapper %}
  </c-mvp.page>
{% endblock content %}