{% load i18n %}
{% comment %}
  Toolbar above the inline: actions, filters and (for stacked inlines, or
  columns without a header) sort links. Override per inline with
  `inline_controls_toolbar_template`. The JS moves this element under the
  inline's heading and relies on the data-inline-controls-* attributes.
{% endcomment %}
{% block toolbar %}
  {% if controls.has_toolbar %}
    <div class="inline-controls-toolbar{% block toolbar_classes %}{% endblock %}">
      {% block toolbar_start %}{% endblock %}

      {% block actions %}
        {% if controls.bulk_actions %}
          <div class="inline-controls-actions">
            {% block action_menu %}
              <label>
                {% block action_label %}{% translate "Action:" %}{% endblock %}
                <select name="action" form="{{ controls.actions_form_id }}" data-inline-controls-action>
                  {% block action_empty_option %}<option value="">---------</option>{% endblock %}
                  {% for action in controls.bulk_actions %}
                    {% block action_option %}<option value="{{ action.name }}">{{ action.description }}</option>{% endblock %}
                  {% endfor %}
                </select>
              </label>
            {% endblock action_menu %}
            {% block action_button %}
              <button type="button" class="button" data-inline-controls-run title="{% translate 'Run the selected action' %}">{% block action_button_label %}{% translate "Go" %}{% endblock %}</button>
            {% endblock action_button %}
            {% block action_selection %}
              <span class="inline-controls-selection" data-inline-controls-selection></span>
              <a href="#" class="inline-controls-select-across" data-inline-controls-select-across hidden></a>
            {% endblock action_selection %}
            {% block action_status %}
              <span class="inline-controls-status" role="status" aria-live="polite"></span>
            {% endblock action_status %}
          </div>
        {% endif %}
      {% endblock actions %}

      {% block filters %}
        {% if controls.filter_form %}
          {% if controls.filter_sheet %}
            {% comment %}
              inline_filter_sheet: behind a button (always, or only when the
              inline is narrow). A <details>: open or closed, it stays so when
              the inline is refreshed.
            {% endcomment %}
            <details class="inline-controls-filter-sheet inline-controls-filter-sheet-{{ controls.filter_sheet }}">
              {% block filter_toggle %}
                <summary class="button inline-controls-filter-toggle{% if controls.is_filtered %} inline-controls-filter-toggle-active{% endif %}">
                  {% translate "Filters" %}
                  {% if controls.active_filter_count %}<span class="inline-controls-filter-count" title="{% blocktranslate count counter=controls.active_filter_count %}{{ counter }} filter on{% plural %}{{ counter }} filters on{% endblocktranslate %}">{{ controls.active_filter_count }}</span>{% endif %}
                </summary>
              {% endblock filter_toggle %}
          {% endif %}
          <div class="inline-controls-filters" role="search">
            {% block filter_fields %}
              {% for field in controls.filter_form %}
                {% block filter_field %}
                  <div class="inline-controls-filter{% if field.errors %} errors{% endif %}">
                    {{ field.label_tag }}
                    {{ field }}
                    {{ field.errors }}
                  </div>
                {% endblock filter_field %}
              {% endfor %}
            {% endblock filter_fields %}
            {% block filter_buttons %}
              <div class="inline-controls-filter-buttons">
                {% block filter_apply_button %}
                  <button type="button" class="button" data-inline-controls-apply>{% block filter_apply_label %}{% translate "Filter" %}{% endblock %}</button>
                {% endblock filter_apply_button %}
                {% block filter_clear_button %}
                  {% if controls.is_filtered %}
                    <button type="button" class="button" data-inline-controls-clear>{% block filter_clear_label %}{% translate "Clear" %}{% endblock %}</button>
                  {% endif %}
                {% endblock filter_clear_button %}
              </div>
            {% endblock filter_buttons %}
          </div>
          {% if controls.filter_sheet %}</details>{% endif %}
        {% endif %}
      {% endblock filters %}

      {% block ordering %}
        {% if controls.ordering_columns %}
          <div class="inline-controls-ordering">
            {% block ordering_label %}<span class="inline-controls-ordering-label">{% translate "Sort by:" %}</span>{% endblock %}
            {% for column in controls.ordering_columns %}
              {% block ordering_column %}
                <span class="inline-controls-sort{% if column.direction %} inline-controls-{{ column.direction }}{% endif %}">
                  <a href="{{ column.toggle_url }}" class="inline-controls-sort-toggle" data-inline-controls-nav title="{% translate 'Toggle sorting' %}">{{ column.label }}</a>
                  {% if column.priority %}
                    <span class="inline-controls-sort-priority">{{ column.priority }}</span>
                    <a href="{{ column.remove_url }}" class="inline-controls-sort-remove" data-inline-controls-nav title="{% translate 'Remove from sorting' %}">&times;</a>
                  {% endif %}
                </span>
              {% endblock ordering_column %}
            {% endfor %}
          </div>
        {% endif %}
      {% endblock ordering %}

      {% block toolbar_end %}{% endblock %}
    </div>
  {% endif %}
{% endblock toolbar %}