{% extends 'tom_common/base.html' %}
{% load bootstrap4 %}
{% block title %}Target Groups{% endblock %}
{% load crispy_forms_tags %}
{% block content %}

<h1>Target Groupings</h1>
<div class="row">
    <div class="col-md-10">
        <p>
            <a href="{% url 'targets:create-group' %}" class="btn btn-primary">Create New Grouping</a>
        </p>
    </div>
</div>
{% comment %}
{% bootstrap_pagination page_obj extra=request.GET.urlencode %}
<form action="{% url 'targets:list' %}" method="GET">
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Group</th>
        <th>Total Targets</th>
        {% if sharing %}
          <th>Share</th>
        {% endif %}
        <th>Delete</th>
      </tr>
    </thead>
    <tbody>
      {% for group in object_list %}
      <tr>
        <td><button type="submit" class="btn btn-link" name="targetlist__name" value="{{group.id}}" title="View Group">{{ group.name }}</button></td>
        <td valign="middle">{{ group.targets.count }}</td>
        {% if sharing %}
          <td>
            <a href="{% url 'targets:share-group' group.id%}" title="Share Group" class="btn btn-info">Share</a>
          </td>
        {% endif %}
        <td><a href="{% url 'targets:delete-group' group.id%}" title="Delete Group" class="btn btn-danger">Delete</a></td>
      </tr>
      {% empty %}
      <tr>
        <td>No groups yet</td>
        <td></td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</form>
{% bootstrap_pagination page_obj extra=request.GET.urlencode %}
{%endcomment%}

<div class="row">
      <div class="col-md-12">
        <h2>{{ record_count }} Target Group{{ record_count|pluralize }}</h2>
        <hr>

        {# Filter form -- id must match hx-include in the Table's Meta.attrs #}
        <form id="filter-form" class="mb-3"
              hx-get="{{ request.get_full_path }}"
              hx-target="div.table-container"
              hx-swap="outerHTML"
              hx-indicator=".progress">
            {% crispy filter.form %}
        </form>
        {# Progress indicator (CSS provided by TOM Toolkit base template) #}
        <div class="progress">
            <div class="indeterminate"></div>
        </div>

        {# Table container -- this is the HTMX swap target #}
        <div class="table-container">
            {% include table.get_partial_template_name %}
        </div>
      </div>
    </div>
{% endblock %}