_page_and_paging_controls.html

{% for monster in page_obj %}
  <p class="card">{{ monster.name }}</p>
{% endfor %}

{% if page_obj.has_next %}
  <p id="paging-area">
    <a href="?page={{ page_obj.next_page_number }}"
      hx-get="?page={{ page_obj.next_page_number }}"
      hx-target="#paging-area"
      hx-swap="outerHTML"
    >Load more</a>
  </p>
{% else %}
  <p>That's all of them!</p>
{% endif %}