{% load form_helpers %}
{% load helpers %}
{% load i18n %}

{# Live region used to announce updated results (e.g. after a quick search) to assistive technology #}
<div id="object-list-status" class="visually-hidden" role="status" aria-live="polite"></div>

<div class="row mb-3" id="results">
  <div class="col-auto d-print-none">
    <div class="input-group input-group-flat me-2 quicksearch" hx-disinherit="hx-select hx-swap">
      <label for="quicksearch" class="visually-hidden">{% trans "Quick search" %}</label>
      <input type="search" results="5" name="q" id="quicksearch" class="form-control" placeholder="{% trans "Quick search" %}"
          hx-get="{{ request.full_path }}" hx-target="#object_list" hx-trigger="keyup changed delay:500ms, search"/>
      <span class="input-group-text py-1">
        <a href="#" id="quicksearch_clear" class="invisible text-secondary" aria-label="{% trans "Clear quick search" %}"><i class="mdi mdi-close-circle" aria-hidden="true"></i></a>
      </span>
      {% block extra_table_controls %}{% endblock %}
    </div>
  </div>

  {% if filter_form and filter_form.filter_id %}
    <div class="col-auto d-print-none">
      <div class="input-group">
        <label for="saved-filter-select" class="input-group-text">
          <i class="mdi mdi-filter" title="{% trans "Saved filter" %}" aria-hidden="true"></i>
          <span class="visually-hidden">{% trans "Saved filter" %}</span>
        </label>
        {% render_field_with_aria filter_form.filter_id element_id="saved-filter-select" %}
      </div>
    </div>
  {% endif %}

  <div class="col-auto ms-auto d-print-none">
    {% if request.user.is_authenticated and table_modal %}
      <div class="table-configure btn-group">
        <button type="button" data-bs-toggle="modal" title="{% trans "Configure Table" %}" data-bs-target="#{{ table_modal }}" class="btn">
          <i class="mdi mdi-cog" aria-hidden="true"></i> {% trans "Configure Table" %}
        </button>
        {% if table.config_params or table_configs %}
          <button type="button" class="btn dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
            <span class="visually-hidden">{% trans "Toggle Dropdown" %}</span>
          </button>
          <div class="dropdown-menu">
            {% if table.config_params %}
              <a class="dropdown-item" href="{% url 'extras:tableconfig_add' %}?{{ table.config_params }}&return_url={{ request.path }}" id="table_save_link">{% trans "Save" %}</a>
            {% endif %}
            {% if table.config_params and table_configs %}
              <hr class="dropdown-divider">
            {% endif %}
            {% if table_configs %}
              {% for config in table_configs %}
                <a class="dropdown-item" href="?tableconfig_id={{ config.pk }}">{{ config }}</a>
              {% endfor %}
            {% endif %}
          </div>
        {% endif %}
      </div>
    {% endif %}
  </div>
</div>