{% extends 'generic/object_list.html' %}
{% load buttons %}
{% load helpers %}
{% load i18n %}

{% block content %}
    {# Object list tab #}
    <div class="tab-pane show active" id="object-list" role="tabpanel" aria-labelledby="object-list-tab">

      {# Applied filters #}
      {% if filter_form %}
        {% applied_filters model filter_form request.GET %}
      {% endif %}

      {# Object table controls with loading indicator #}
      <div class="row mb-3" id="results">
        <div class="col-auto d-print-none">
          <div class="d-flex align-items-center">
            <div class="input-group input-group-flat me-2 quicksearch" hx-disinherit="hx-select hx-swap">
              <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"
                  hx-indicator="#loading-indicator"/>
              <span class="input-group-text py-1">
                <a href="#" id="quicksearch_clear" class="invisible text-secondary"><i class="mdi mdi-close-circle"></i></a>
              </span>
            </div>
            {# Loading indicator #}
            <div id="loading-indicator" class="htmx-indicator ms-2 d-flex align-items-center">
              <span class="spinner-border spinner-border-sm text-primary me-2" role="status" aria-hidden="true"></span>
              <span class="text-muted small">{% trans "Searching..." %}</span>
            </div>
            {% block extra_table_controls %}{% endblock %}
          </div>
        </div>

        {% if filter_form %}
          <div class="col-auto d-print-none">
            <div class="input-group">
              <div class="input-group-text">
                <i class="mdi mdi-filter" title="{% trans "Saved filter" %}"></i>
              </div>
              {{ filter_form.filter_id }}
            </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"></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">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>

      <form method="post" class="form form-horizontal">
        {% csrf_token %}
        {# "Select all" form #}
        {% if table.paginator.num_pages > 1 %}
          <div id="select-all-box" class="d-none card d-print-none">
            <div class="form col-md-12">
              <div class="card-body d-flex justify-content-between">
                <div class="form-check">
                  <input type="checkbox" id="select-all" name="_all" class="form-check-input" />
                  <label for="select-all" class="form-check-label">
                    {% blocktrans trimmed with count=table.page.paginator.count object_type_plural=table.data.verbose_name_plural %}
                      Select <strong>all <span class="total-object-count">{{ count }}</span> {{ object_type_plural }}</strong> matching query
                    {% endblocktrans %}
                  </label>
                </div>
                <div class="bulk-action-buttons">
                  {% action_buttons actions model multi=True %}
                </div>
              </div>
            </div>
          </div>
        {% endif %}

        <div class="form form-horizontal">
          {% csrf_token %}
          <input type="hidden" name="return_url" value="{% if return_url %}{{ return_url }}{% else %}{{ request.path }}{% if request.GET %}?{{ request.GET.urlencode }}{% endif %}{% endif %}" />

          {# Warn of any missing prerequisite objects #}
          {% if prerequisite_model %}
            {% include 'inc/missing_prerequisites.html' %}
          {% endif %}

          {# Objects table #}
          <div class="card">
            <div class="htmx-container table-responsive" id="object_list">
              {% include 'htmx/table.html' %}
            </div>
          </div>
          {# /Objects table #}

          {# Form buttons #}
          <div class="btn-list d-print-none">
            {% block bulk_buttons %}
              <div class="bulk-action-buttons">
                {% action_buttons actions model multi=True %}
              </div>
            {% endblock %}
          </div>
          {# /Form buttons #}

        </div>
      </form>
    </div>
    {# /Object list tab #}

    {# Filters tab #}
    {% if filter_form %}
      <div class="tab-pane show" id="filters-form" role="tabpanel" aria-labelledby="filters-form-tab">
        {% include 'inc/filter_list.html' %}
      </div>
    {% endif %}
    {# /Filters tab #}

{% endblock content %}