{% comment %}
table

A table

Parameters:
- content_type_id (): 

{% endcomment %}

{% load bloomerp %}
{% load i18n %}

<div 
    class="rounded-xl border border-b-0 border-gray-200 overflow-hidden bg-white focus:outline-none focus:ring-0"
    bloomerp-component="{% if component_name %}{{ component_name }}{% else %}datatable{% endif %}"
    data-content-type-id="{{ content_type_id }}"
    >
    <table 
        id="data-table-{{ content_type_id }}" 
        class="table-auto table-hover table w-full border-collapse outline-none"
        >
        <thead>
            <tr>
                {% if avatar_field %}
                <th class="w-14">
                    <span class="sr-only">{{ avatar_field.title }}</span>
                </th>
                {% endif %}
                {% for field in fields %}
                <th {% if current_sort_field == field.field %}aria-sort="{% if current_sort_direction == 'desc' %}descending{% else %}ascending{% endif %}"{% endif %}>
                    <button
                        type="button"
                        class="flex w-full items-center gap-2 text-left font-semibold hover:text-primary focus:outline-none focus:ring-0"
                        hx-get="{{ request.path }}{% if table_sort_querystring %}?{{ table_sort_querystring }}&sort={{ field.field }}&direction={% if current_sort_field == field.field and current_sort_direction == 'asc' %}desc{% else %}asc{% endif %}{% else %}?sort={{ field.field }}&direction={% if current_sort_field == field.field and current_sort_direction == 'asc' %}desc{% else %}asc{% endif %}{% endif %}"
                        hx-target="#data-view-data-section"
                        hx-swap="innerHTML"
                    >
                        <span>{{ field.title }}</span>
                        {% if current_sort_field == field.field %}
                            {% if current_sort_direction == 'desc' %}
                                <i class="fa fa-sort-down text-xs text-primary" aria-hidden="true"></i>
                            {% else %}
                                <i class="fa fa-sort-up text-xs text-primary" aria-hidden="true"></i>
                            {% endif %}
                        {% else %}
                            <i class="fa fa-sort text-xs text-gray-300" aria-hidden="true"></i>
                        {% endif %}
                    </button>
                </th>
                {% endfor %}
            </tr>
        </thead>
        <tbody id="data-table-body-{{ content_type_id }}">
            {% if queryset %}
            {% for object in queryset %}
            <tr
                class="cursor-pointer"
            >   
                {% if avatar_field %}
                <td
                    class="cursor-context-menu w-14"
                    data-dropdown="cell-menu"
                    data-column-index="0"
                    data-row-index="{{ forloop.counter0 }}"
                    data-value=""
                    data-object-id="{{ object.pk }}"
                    data-object-string="{{ object }}"
                    data-application-field-id="{{ avatar_field.id }}"
                    data-application-field-name="{{ avatar_field.field }}"
                    data-detail-url="{{ object.get_absolute_url }}"
                    bloomerp-component="datatable-cell"
                >
                    <c-ui.avatar :object="object" :avatar_attribute="avatar_field.field" size="32" class_name="rounded-full object-cover" />
                </td>
                {% endif %}
                {% for field in fields %}
                    {% if avatar_field %}
                        {% render_dataview_value object=object application_field=field user=request.user row_index=forloop.parentloop.counter0 column_index=forloop.counter0|add:1 url=object.get_absolute_url split_view_enabled=preference.split_view_enabled %}
                    {% else %}
                        {% render_dataview_value object=object application_field=field user=request.user row_index=forloop.parentloop.counter0 column_index=forloop.counter0 url=object.get_absolute_url split_view_enabled=preference.split_view_enabled %}
                    {% endif %}
                {% endfor %}
            </tr>
            {% endfor %}
            {% else %}
            <tr>
                <td colspan="{{ fields|length|add:1 }}" class="text-center text-gray-500 py-6">
                    <c-blocktrans>No records found.</c-blocktrans>
                </td>
            </tr>
            {% endif %}
        </tbody>
    </table>
</div>