{% extends "_base.html" %}
{% load partials %}

{% block main %}
  <section>
    <p>
      This example shows you how you can do partial rendering for htmx requests using <a href="https://github.com/carltongibson/django-template-partials">django-template-partials</a>.
      The view renders only the content of the table section partial for requests made with htmx, saving time and bandwidth.
      Paginate through the below list of randomly generated people to see this in action, and study the view and template.
    </p>
    <p>
      <a href="https://django-htmx.readthedocs.io/en/latest/tips.html#partial-rendering">See more in the docs</a>.
    </p>
  </section>

  {% partialdef table-section inline %}
  <article id=table>
    <section>
      <table>
        <thead>
          <tr>
            <th>id</th>
            <th>name</th>
          </tr>
        </thead>
        <tbody>
          {% for person in page.object_list %}
            <tr>
              <td>{{ person.id }}</td>
              <td>{{ person.name }}</td>
            </tr>
          {% empty %}
            <tr>
              <td colspan=2>
                No people on this page.
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </section>

    <section>
      <!--
        The htmx attributes set on the nav here are inherited by the child
        links, via the :inherited modifier. hx-target tells where htmx to swap
        the fetched content in. hx-swap tells it how to swap it, in this case
        by replacing the 'outerHTML' attribute of the target, which replaces
        the target's own 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:inherited=#table hx-swap:inherited=outerHTML hx-push-url:inherited=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>
    </section>
  </article>
  {% endpartialdef table-section %}

{% endblock main %}
