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

{% block content_left %}
    <table id="content-table" class="table can-compact is-fullwidth is-hoverable is-narrow my-0" hx-indicator=".htmx-indicator" x-data="">
        <thead style="position: sticky; top: 0; z-index: 10; background-color: var(--bulma-scheme-main)">
            <tr>
                <th>{{ object_label }}</th>
                {% for field in fields %}
                    <th style="text-align: {{ page.object_list|table_alignment:field }}">{{ page.object_list|verbose_field_name:field }}</th>
                {% endfor %}
            </tr>
        </thead>
        <tbody id="content-table-body" style="z-index: 9" x-ref="tbody">
            {% for object in page.object_list %}
                {% partialdef tr inline=True %}
                    <tr id="tr-{{ object.pk }}"
                        {% if detail_enabled %}
                        style="cursor: pointer;"
                        hx-get="{{ object.get_absolute_url }}{% querystring %}"  hx-target="#content-right-header" hx-select="#content-right-header" hx-select-oob="#content-right" hx-swap="outerHTML"
                        x-data="{selected: false}" @unselect-tr.window="selected = false"
                        x-on:click="$dispatch('unselect-tr'); showContentRight = true; selected = true; $nextTick(() => { $el.scrollIntoView( {block: 'nearest'} ) });" x-bind:class="selected ? 'is-success' : ''"
                        {% endif %}
                    >
                        {% partialdef td inline=True %}
                            <td>{{ object }}</td>
                            {% for field in fields %}
                                <td style="text-align: {{ object|table_alignment:field }}">
                                    <span class="">
                                        <span class="responsive-heading has-text-weight-light" style="margin-right: .2rem">{{ object|verbose_field_name:field }}:</span>
                                        {{ object|table_display:field|default_if_none:'' }}
                                    </span>
                                </td>
                            {% endfor %}
                        {% endpartialdef %}
                    </tr>
                {% endpartialdef %}
            {% endfor %}
        </tbody>
        <tfoot style="position: sticky; bottom: 0; z-index: 10; background-color: var(--bulma-scheme-main);" class="has-text-weight-bold">
            <tr id="tf-row">
                {% partialdef tf inline=True %}
                    <td class="p-0"></td>
                    {% for field in fields %}
                        {% if field in footer %}
                            <td style="text-align: {{ queryset|table_alignment:field }}">
                                <span class="">
                                    <span class="responsive-heading has-text-weight-light" style="margin-right: .2rem">{{ queryset|verbose_field_name:field }}:</span>
                                    {{ footer|get_item:field }}
                                </span>
                            </td>
                        {% else %}
                            <td class="p-0"></td>
                        {% endif %}
                    {% endfor %}
                {% endpartialdef %}
            </tr>
        </tfoot>
    </table>
    
    <div id="endless-scroller"
         {% if page.has_next %}
            hx-get="{% querystring page=page.next_page_number %}"
            hx-trigger="intersect once"
            hx-select="tbody > tr"
            hx-target="#content-table-body"
            hx-swap="beforeend"
            hx-select-oob="#pagination-next-button,#pagination-end-index,#endless-scroller"
            hx-indicator="#endless-scroll-indicator"
            hx-replace-url="true"
         {% endif %}
    >
    </div>
    <progress id="endless-scroll-indicator" class="htmx-indicator progress is-small is-success" max="100">15%</progress>
{% endblock %}
