<table id="table"
       hx-get="?page={{ page.number }}"
       hx-target="this"
       hx-swap="outerHTML"
       hx-trigger="every {{ update_interval|default:'30' }}s"
       hx-push-url="true"
       hx-include="#table-refresh-info, #incident-filter-box"
       class="border border-separate border-spacing-1 border-primary table"
>
    <thead>
    <tr class="border-b border-primary">
        {% block columns %}
            {% for col in columns %}
                <th class="border-b border-primary">
                    {% if col.header_template %}
                        {% include col.header_template with label=col.label %}
                    {% else %}
                        {{ col.label }}
                    {% endif %}
                </th>
            {% empty %}
                <th class="border-b border-primary">
                    No columns configured
                </th>
            {% endfor %}
        {% endblock columns %}
    </tr>
    </thead>
    <tbody
            id="table-body"
            class=""
    >
    {% block incident_rows %}
        {% include 'htmx/incidents/_incident_table_rows.html' with incident_list=page.object_list %}
    {% endblock incident_rows %}
    </tbody>
    <tfoot>
    <tr>
        <td colspan="{{ columns|length }}" class="border-t border-primary">
            <div class="flex justify-between items-center">
                {% block refresh_info %}
                    {% include "htmx/incidents/_incidents_refresh_info.html" %}
                {% endblock refresh_info %}
                <!--
                The htmx attributes set on the nav here are inherited by the child links.
                hx-target tells where htmx to swap the fetched content in, and hx-swap
                tells it how to swap it - by replacing the 'outerHTML' attribute of the
                target, i.e. replacing the target's actual DOM node. hx-push-url tells
                htmx to push the fetched URL into the browser history, so we can use
                the backwards/forwards buttons to navigate these subpages.
                -->
                <ul class="join" hx-target="#table" hx-swap="outerHTML" hx-push-url="true">
                    {% if page.number != 1 %}
                        <li>
                            <!--
                              For each link we use hx-get to tell htmx to fetch that URL and
                              swap it in. We also repeat the URL in the href attribute so the
                              page works without JavaScript, and to ensure the link is
                              displayed as clickable.
                            -->
                            <a hx-get="?page=1"
                               href="?page=1"
                               hx-indicator="#incident-list .htmx-indicator"
                               class="join-item btn btn-neutral">
                               &laquo; First
                            </a>
                        </li>
                    {% endif %}
                    {% if page.has_previous %}
                        <li>
                            <a hx-get="?page={{ page.previous_page_number }}"
                               href="?page={{ page.previous_page_number }}"
                               hx-indicator="#incident-list .htmx-indicator"
                               class="join-item btn btn-neutral">
                                {{ page.previous_page_number }}
                            </a>
                        </li>
                    {% endif %}
                    {% if page.paginator.num_pages > 1 %}
                        <li>
                            <button class="join-item btn btn-active btn-neutral">{{ page.number }}</button>
                        </li>
                    {% else %}
                        <li>
                            <button class="btn btn-active btn-neutral">{{ page.number }}</button>
                        </li>
                    {% endif %}

                    {% if page.has_next %}
                        <li>
                            <a hx-get="?page={{ page.next_page_number }}"
                               href="?page={{ page.next_page_number }}"
                               hx-indicator="#incident-list .htmx-indicator"
                               class="join-item btn btn-neutral">
                                {{ page.next_page_number }}
                            </a>
                        </li>
                    {% endif %}
                    {% if page.number != page.paginator.num_pages %}
                        <li>
                            <a hx-get="?page={{ page.paginator.num_pages }}"
                               href="?page={{ page.paginator.num_pages }}"
                               hx-indicator="#incident-list .htmx-indicator"
                               class="join-item btn btn-neutral">
                                &raquo; Last
                            </a>
                        </li>
                    {% endif %}
                </ul>
            </div>
        </td>
    </tr>
    </tfoot>
</table>
