<table id="table">
    {% block table %}
        <thead>
        <tr>
            <th>actions</th>
            <th>id</th>
            <th>timestamp</th>
            <th>status</th>
            <th>severity</th>
            <th>source</th>
            <th>description</th>
            <th>ack</th>
            <th>tag</th>
        </tr>
        </thead>
        <tbody>
        {% for incident in page.object_list %}
            {% block incident %}
                {% include 'htmx/incidents/_incident_table_row.html' %}
            {% endblock incident %}
            {% empty %}
            <tr>
                <td colspan="2">
                    No incidents on this page.
                </td>
            </tr>
        {% endfor %}
        </tbody>
        <tfoot>
        <tr>
            <td>
                <!--
                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 hx-target="#table" hx-swap="innerHTML" 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>
    {% endblock %}
</table>
