{% extends 'ui/layout.html' %}
{% load static %}
{% load i18n %}

{% block tenant_switch_url %}{% endblock %}

{% block content %}
    <div class="columns is-multiline">
        {% for obj in list_page %}
            <div class="list-column column is-{{ column_width }}-fullhd is-{{ column_width_widescreen }}-widescreen is-{{ column_width_desktop }}-desktop is-12-touch"
                 style="height: {{ column_height }}{{ column_height_unit }}"
                 {% if endless_scroll and forloop.last and list_page.has_next %}
                    hx-get="{{ pagination_param_str }}&page={{ list_page.next_page_number }}"
                    hx-trigger="intersect once"
                    hx-select=".list-column"
                    hx-select-oob="#list-pagination-end-index,#list-pagination-next-button,#list-pagination-prev-button"
                    hx-swap="afterend"
                    hx-indicator="#endless-scroll-indicator"
                {% endif %}
            >
                <div class="box is-hoverable p-3" 
                     style="word-break: break-word; height: 100%; border: var(--accrete-box-border); overflow-y: auto; {% if obj.get_absolute_url %}cursor:pointer;{% endif %}"
                     {% if obj.get_absolute_url %}hx-get="{{ obj.get_absolute_url }}{{ object_param_str }}" hx-target="body" hx-push-url="true" {% endif %}
                >
                    {% block data %}
                        {{ obj }}
                    {% endblock %}
                </div>
            </div>
        {% endfor %}
    </div>
    {% if endless_scroll %}
        <progress id="endless-scroll-indicator" class="htmx-indicator progress is-small is-success" max="100">15%</progress>
    {% endif %}
{% endblock %}
