{% comment %}
Reusable overview table component using django-template-partials
This template can be parameterized to work with any entity type

Required context variables:
- entity_type: e.g., 'substance', 'polymer', 'mixture', 'isotope', 'reaction'
- entity_type_plural: e.g., 'substances', 'polymers', 'mixtures', 'isotopes', 'reactions'
- items_list: the queryset of items to display
- page_obj: pagination object
- app_color: color theme
- current_sort: current sort field
- current_order: 'asc' or 'desc'
- filter: filter object
- columns: list of column definitions with 'field', 'label', 'sortable' keys
- overview_url_name: URL name for the overview view (e.g., 'lara_django_substances:polymers-overview')
- create_url_name: URL name for create view
- update_url_name: URL name for update view
- delete_url_name: URL name for delete view
- detail_url_name: URL name for detail view
{% endcomment %}
{% partialdef entity-filter with entity_type=entity_type entity_type_plural=entity_type_plural %}
{% include "lara_django_substances/partials/entity_filter.html" with entity_type=entity_type entity_type_plural=entity_type_plural %}
{% endpartialdef entity-filter %}
{% partialdef entity-row with item=item %}
{% include "lara_django_substances/partials/entity_row.html" with item=item %}
{% endpartialdef entity-row %}
<!-- Component controls its own max-width, parent centers it -->
<div class="w-full max-w-[120rem]">
    <!-- Add button and mobile filter toggle -->
    <div class="mb-4 flex justify-between items-center">
        <button class="btn lg:hidden" id="show-filter-btn">Show filters</button>
        <a class="btn bg-green-500 text-white ml-auto"
           href="{% url create_url_name %}">Add {{ entity_type|title }}</a>
    </div>
    <!-- Table and filter sections -->
    <div id="{{ entity_type_plural }}-list-container"
         class="grid grid-cols-4 gap-6">
        <section id="{{ entity_type_plural }}-list"
                 class="col-span-4 lg:col-span-3 overflow-x-auto">
            <table id="{{ entity_type_plural }}-table"
                   class="table table-zebra table-pin-rows w-full">
                <thead class="bg-{{ app_color }}-600 text-white text-xs md:text-sm lg:text-base xl:text-base 2xl:text-lg">
                    <tr class="bg-{{ app_color }}-600">
                        {% for column in columns %}
                            <th class="bg-{{ app_color }}-600 {% if column.sortable %}hover:bg-{{ app_color }}-700 cursor-pointer{% endif %} text-xs md:text-sm lg:text-base xl:text-base 2xl:text-lg"
                                {% if column.sortable %} hx-get="{% url overview_url_name %}?sort={{ column.field }}&order={% if current_sort == column.field and current_order == 'asc' %}desc{% else %}asc{% endif %}
                                "
                                hx-target="#{{ entity_type_plural }}-table"
                                hx-swap="outerHTML"
                                hx-include="#filter-form"
                                {% endif %}>
                                <div class="flex items-center gap-1">
                                    <span>{{ column.label }}</span>
                                    {% if column.sortable and current_sort == column.field %}
                                        <span class="text-xs">
                                            {% if current_order == 'asc' %}
                                                ▲
                                            {% else %}
                                                ▼
                                            {% endif %}
                                        </span>
                                    {% endif %}
                                </div>
                            </th>
                        {% endfor %}
                        <th class="bg-{{ app_color }}-600 text-xs md:text-sm lg:text-base xl:text-base 2xl:text-lg">Actions</th>
                    </tr>
                </thead>
                <tbody id="{{ entity_type }}-table-body"
                       class="text-xs md:text-xs lg:text-sm xl:text-sm 2xl:text-base">
                    {% if items_list %}
                        {% for item in items_list %}
                            {% partial entity-row with item=item %}
                        {% endfor %}
                        {% if page_obj %}
                            <tr>
                                <td colspan="{{ columns|length|add:1 }}">{% include "lara_django_substances/partials/pagination.html" %}</td>
                            </tr>
                        {% endif %}
                    {% else %}
                        <tr class="no-{{ entity_type }}-row">
                            <td colspan="{{ columns|length|add:1 }}">
                                <div role="alert" class="alert alert-info">
                                    <svg xmlns="http://www.w3.org/2000/svg"
                                         fill="none"
                                         viewBox="0 0 24 24"
                                         class="h-6 w-6 shrink-0 stroke-current">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z">
                                        </path>
                                    </svg>
                                    <span>No {{ entity_type_plural }} found.</span>
                                </div>
                            </td>
                        </tr>
                    {% endif %}
                </tbody>
            </table>
        </section>
        <section id="filters" class="hidden lg:grid col-span-1 mb-4">
            {% partial entity-filter with entity_type=entity_type entity_type_plural=entity_type_plural %}
        </section>
    </div>
</div>