{% load slippers %}
<main id="main" data-scroll-to-top="true">

    {# Search #}
    <form>
        <input type="hidden" name="action" value="page">
        <input type="hidden" name="value" value="search-talks">
        <label>
            <input
                    autofocus="autofocus"
                    onfocus="const miVal = this.value; this.value= ''; this.value = miVal"
                    type="search"
                    name="search"
                    hx-ws="send"
                    hx-trigger="keyup changed delay:1000ms"
                    value="{{ search }}"
            >
        </label>
    </form>
    {# End search #}

    {# List talks #}
    {% for talk in talks %}
        <form>
            <input type="hidden" name="action" value="page">
            <input type="hidden" name="value" value="single-talk">
            <input type="hidden" name="id" value="{{ talk.id }}">
            <a href="#" hx-ws="send" hx-trigger="click">
                <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>
        </form>
    {% endfor %}
    {# End List talks #}

    {# Paginator #}
    {% if not search %}
        <div class="loading" >
            <p>Page {{ page }}</p>
            {% #link text="Next page" action="page" value="talks" page=next_page %}{% /link %}
        </div>
    {% endif %}
    {# End Paginator #}

</main>