html-over-websockets-with-django-and-htmx/app/website/templates/pages/talks.html

<main id="main">
    {% for talk in talks %}
        <a href="#">
            <article>
                <header>
                    <div class="grid">
                        <p>
                            <img width="200" src="{{ talk.image.url }}">
                        </p>
                        <h2>{{ talk.title }}</h2>
                    </div>
                </header>
                <p>
                    {{ talk.content|truncatechars:150 }}
                </p>
                <footer>Author {{ talk.author.full_name }} - {{ talk.category.name }}</footer>
            </article>
        </a>
    {% endfor %}
    {# Pagination #}
    <div class="loading" >
        <form>
            <input type="hidden" name="action" value="page">
            <input type="hidden" name="value" value="talks">
            <input type="hidden" name="page" value="{{ next_page }}">
            <p hx-ws="send" hx-trigger="click,revealed">Show more</p>
        </form>
    </div>
</main>