{% extends "admin/base.html" %}
{% block title %}{{ model_name }} | {{ site_header }}{% endblock %}
{% block content %}
<main class="base-card admin-main changelist">
  <nav class="base-breadcrumbs breadcrumbs" aria-label="Breadcrumb">
    <a href="{{ prefix }}/">{{ t('home') }}</a> &rsaquo; {{ model_name }}
  </nav>
  <div class="changelist-header">
    <h1 class="base-heading-1">{{ t('select_to_change', model=model_name) }}</h1>
    {% if has_add_permission %}
    <div class="object-tools">
      <a href="{{ prefix }}/{{ collection }}/add/" class="base-btn base-btn--primary addlink">{{ t('add_model', model=model_name) }}</a>
    </div>
    {% endif %}
  </div>

  {% if success_message %}
  <p class="base-banner base-banner--positive" role="status">{{ success_message }}</p>
  {% endif %}

  {% if has_data_transfer %}
  <button
    type="button"
    id="data-transfer-toggle"
    class="data-transfer-fab{% if filters %} data-transfer-fab--below-filter{% endif %}"
    aria-expanded="{{ 'true' if data_transfer_open else 'false' }}"
    aria-controls="data-transfer-drawer"
    aria-label="{{ t('data_transfer') }}"
  >
    <svg class="data-transfer-fab__icon" width="20" height="20" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path d="M12 3l4 4h-3v6h-2V7H8l4-4zm-6 14h12v2H6v-2zm0-4h12v2H6v-2z" fill="currentColor"/>
    </svg>
  </button>
  <div id="data-transfer-backdrop" class="data-transfer-backdrop{% if data_transfer_open %} is-open{% endif %}" {% if not data_transfer_open %}hidden{% endif %}></div>
  <aside
    id="data-transfer-drawer"
    class="data-transfer-drawer{% if data_transfer_open %} is-open{% endif %}"
    aria-label="{{ t('data_transfer') }}"
    {% if not data_transfer_open %}hidden{% endif %}
  >
    <div class="data-transfer-drawer__header">
      <h2 class="base-heading-2">{{ t('data_transfer') }}</h2>
      <button type="button" class="data-transfer-drawer__close base-btn base-btn--minimal" aria-label="{{ t('cancel') }}">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="data-transfer-drawer__body">
      {% include "admin/partials/data_transfer_panel.html" %}
    </div>
  </aside>
  {% endif %}

  {% if filters %}
  <button
    type="button"
    id="filter-toggle"
    class="filter-fab"
    aria-expanded="false"
    aria-controls="filter-drawer"
    aria-label="{{ t('filter') }}"
  >
    <svg class="filter-fab__icon" width="20" height="20" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path d="M4 5h16l-6.2 7.35v5.3L10 19v-6.65L4 5z" fill="currentColor"/>
    </svg>
    {% if has_active_filters %}<span class="filter-fab__badge" aria-hidden="true"></span>{% endif %}
  </button>
  <div id="filter-backdrop" class="filter-backdrop" hidden></div>
  <aside id="filter-drawer" class="filter-drawer" aria-label="{{ t('filter') }}" hidden>
    <div class="filter-drawer__header">
      <h2 class="base-heading-2">{{ t('filter') }}</h2>
      <button type="button" class="filter-drawer__close base-btn base-btn--minimal" aria-label="{{ t('cancel') }}">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="filter-drawer__body filters">
      {% include "admin/partials/filters_panel.html" %}
    </div>
  </aside>
  {% endif %}

  <div class="changelist-layout">
    <section class="results">
      {% if has_search or actions %}
      <div class="changelist-toolbar">
        {% if has_search %}
        <form method="get" class="search-form search-form--inline" role="search">
          <input type="search" name="q" class="base-input base-input--search changelist-toolbar__search" value="{{ search }}" placeholder="{{ t('search_placeholder') }}">
          <button type="submit" class="base-btn base-btn--secondary">{{ t('search') }}</button>
        </form>
        {% endif %}
        {% if actions %}
        <div class="actions actions--inline">
          <select name="action" class="base-select changelist-toolbar__action" form="changelist-form">
            <option value="">{{ t('action_placeholder') }}</option>
            {% for name, method, label in actions %}
            <option value="{{ name }}">{{ label }}</option>
            {% endfor %}
          </select>
          <button type="submit" class="base-btn base-btn--secondary" form="changelist-form">{{ t('go') }}</button>
        </div>
        {% endif %}
      </div>
      {% endif %}

      <form method="post" action="{{ prefix }}/{{ collection }}/action/" id="changelist-form" class="changelist-form">
        <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
        <div id="result-list">
          {% include "admin/partials/result_list.html" %}
        </div>
      </form>
    </section>
  </div>
</main>
{% endblock %}