{% load i18n %}
{% load ui %}
{% load partials %}

{% block list %}
<div class="fixed-grid has-{{ column_count }}-cols has-1-cols-mobile m-2">
    <div id="list-grid" class="grid m-0">
        {% for instance in page.object_list %}
            {% partialdef entry inline=True %}
                <div id="list-entry-{{ instance.pk }}" class="list-entry cell pb-0" style="{% if column_height %}height: {{ column_height }}{% endif %}">
                    <div class="box p-3"
                         style="word-break: break-word; height: 100%; overflow-y: auto;" x-bind:class="selected ? 'selected' : ''"
                         x-data="{selected: {% if active_instance and instance.pk == active_instance.pk %}true{% else %}false{% endif %}}" @unselect-list-entry.window="selected = false"
                    >
                        <div id="list-data-{{ instance.pk }}" style="height: 100%">
                            {% if list_entry_template %}
                                {% include list_entry_template %}
                            {% else %}
                                {% partialdef list_entry inline=True %}
                                    <div class="is-flex is-justify-content-space-between">
                                        <p class="title is-5 is-flex-grow-1">{{ instance }}</p>
                                        {% if has_url %}
                                            <button class="button is-light is-align-self-baseline"
                                                    hx-get="{{ instance.get_absolute_url }}{% querystring %}" hx-swap="none" hx-replace-url="{% querystring detail=instance.pk %}"
                                                    x-on:click="$dispatch('unselect-list-entry'); selected = true; window.setPaginationDetail({{ instance.pk }}); $nextTick(() => { $el.scrollIntoView({block: 'nearest'}) });"
                                            >
                                                <span class="icon"><i class="fa fa-edit"></i> </span>
                                            </button>
                                        {% endif %}
                                    </div>
                                {% endpartialdef %}
                            {% endif %}
                        </div>
                    </div>
                </div>
            {% endpartialdef %}
        {% endfor %}
    </div>
    {% if endless_scroll and page.has_next %}
        <div id="endless-scroller"
             hx-get="{% querystring page=page.next_page_number %}"
             hx-target="#list-grid"
             hx-trigger="intersect once"
             hx-select=".list-entry"
             hx-select-oob="#pagination-next-button,#pagination-end-index,#endless-scroller"
             hx-swap="beforeend"
             hx-replace-url="true"
             hx-indicator="#endless-scroll-indicator"></div>
        <progress id="endless-scroll-indicator" class="htmx-indicator progress is-small is-primary" max="100">15%</progress>
    {% endif %}
</div>
{% endblock %}