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

{% block table %}
    {% if page.object_list %}
        <table id="content-table" class="table is-fullwidth {% if has_url %}is-hoverable{% endif %} my-0 {% if can_compact %}can-compact{% endif %}" style="{% if has_url %}cursor: default;{% endif %}" hx-indicator=".htmx-indicator" x-data="">
            <thead style="position: sticky; top: 0; z-index: 10; background-color: var(--bulma-scheme-main)">
                <tr style="background: var(--accrete-table-header-color); line-height: 1em;">
                    {% for field in table_data.header.fields %}<th class="py-3" style="text-align: {{ field.alignment }}">{{ field.content }}</th>{% endfor %}
                </tr>
            </thead>
            <tbody id="content-table-body" style="z-index: 9" x-ref="tbody">
                {% for row in table_data.body.rows %}
                    {% partialdef tr inline=True %}
                        <tr id="tr-{{ row.id }}" class="{% if row.is_active %}is-primary{% endif %}" {% if row.hx_get %}hx-get="{{ row.hx_get }}{% querystring detail=row.id %}" hx-swap="none" hx-push-url="{% querystring detail=row.id %}"{% endif %}>
                            {% partialdef td inline=True %}
                                {% for field in row.fields %}
                                    <td style="text-align: {{ field.alignment }}">
                                        <span>
                                            <span class="responsive-heading has-text-weight-medium mr-2" style="margin-right: .2rem">{{ field.verbose_name }}:</span>
                                            <span>{{ field.content }}</span>
                                        </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" style="background: var(--accrete-table-footer-color); line-height: 1em;">
                    {% partialdef tf inline=True %}
                        {% for field in table_data.footer.fields %}
                            <td class="py-1" style="text-align: {{field.alignment}}">
                                <span>
                                    <span class="responsive-heading has-text-weight-light" style="margin-right: .2rem">{{ field.verbose_name }}:</span>
                                    {{ field.content }}
                                </span>
                            </td>
                        {% endfor %}
                    {% endpartialdef %}
                </tr>
            </tfoot>
        </table>
        {% if endless_scroll %}
            <div id="endless-scroller"
                 {% if page.has_next %}
                    hx-get="{% querystring page=page.next_page_number %}"
                    hx-trigger="intersect once"
                    hx-select="#content-table > tbody > tr"
                    hx-target="#content-table-body"
                    hx-swap="beforeend"
                    hx-select-oob="#overview-header-items,#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-primary" max="100"></progress>
        {% endif %}
    {% else %}
        <div class="p-3">
            <p class="has-text-weight-bold is-size-4">{% translate 'No Entries found' %}</p>
        </div>
    {% endif %}
{% endblock %}