<table id="table"
       hx-get="?page={{ page.number }}"
       hx-target="#table-body"
       hx-swap="innerHTML"
       hx-trigger="every {{ update_interval|default:'30' }}s"
>
    <thead>
    <tr>
        {% block columns %}
            {% for col in columns %}
                <th>
                    {{ col.label }}
                </th>
            {% empty %}
                <th>
                    No columns configured
                </th>
            {% endfor %}
        {% endblock columns %}
    </tr>
    </thead>
    <tbody
            id="table-body"
    >
    {% 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 }}">
            <!--
            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.
            -->
            <nav class="paginator" hx-target="#table" hx-swap="outerHTML" hx-push-url="true">
                <ul>
                    {% 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">
                                &laquo; First
                            </a>
                        </li>
                    {% endif %}
                    {% if page.has_previous %}
                        <li>
                            <a hx-get="?page={{ page.previous_page_number }}"
                               href="?page={{ page.previous_page_number }}">
                                {{ page.previous_page_number }}
                            </a>
                        </li>
                    {% endif %}
                    <li>
                        {{ page.number }}
                    </li>
                    {% if page.has_next %}
                        <li>
                            <a hx-get="?page={{ page.next_page_number }}"
                               href="?page={{ page.next_page_number }}">
                                {{ 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 }}">
                                &raquo; Last
                            </a>
                        </li>
                    {% endif %}
                </ul>
            </nav>

        </td>
    </tr>
    </tfoot>
</table>
