{% load static %}
{% 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
                    id="search"
                    type="search"
                    name="search"
                    autocomplete="off"
                    hx-ws="send"
                    hx-trigger="keyup changed delay:1s"
                    value="{{ search }}"
            >
        </label>
    </form>
    {# End search #}

    {# List talks #}
    {% if talks %}
        {% for talk in talks %}
            <form>
                {% #link action="page" value="single-talk" id=talk.id %}
                    <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>
                {% /link %}
            </form>
        {% endfor %}
    {% else %}
        <h1>No talks found.</h1>
    {% endif %}
    {# End List talks #}

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

    <script src="{% static "js/talks.js" %}"></script>
</main>