{% load i18n admin_urls htmx_admin_tags %}
{% if cl.result_list %}
<div class="{% if is_grappelli %}grp-changelist-results{% else %}changelist-results{% endif %}">
    <table id="result_list" class="{% if is_grappelli %}grp-table grp-sortable{% endif %}">
        <thead>
            <tr class="{% if is_grappelli %}grp-table-header{% endif %}">
                <th scope="col" class="{% if is_grappelli %}grp-th{% endif %} action-checkbox-column">
                    <input type="checkbox" id="action-toggle">
                </th>
                {% for i, field_name in cl.list_display|enumerate %}
                {% if field_name != 'action_checkbox' %}
                <th scope="col" class="{% if is_grappelli %}grp-th{% endif %} column-{{ field_name }}">
                    <a href="?o={{ i|sort_param:cl }}"
                       hx-get="{% htmx_table_body_url opts %}?o={{ i|sort_param:cl }}"
                       hx-target="#result-list-container"
                       hx-swap="innerHTML"
                       class="sortable">
                        {{ field_name|capfirst }}
                        {% with current_order=i|current_sort_order:cl %}
                        {% if current_order %}
                        <span class="sort-indicator">{% if current_order == 'desc' %}▼{% else %}▲{% endif %}</span>
                        {% endif %}
                        {% endwith %}
                    </a>
                </th>
                {% endif %}
                {% endfor %}
                {% if list_editable_htmx %}
                <th scope="col" class="{% if is_grappelli %}grp-th{% endif %}">
                    {% translate "Actions" %}
                </th>
                {% endif %}
            </tr>
        </thead>
        <tbody>
            {% for result in cl.result_list %}
            <tr class="{% if is_grappelli %}grp-tr {% endif %}{% cycle 'row1' 'row2' %}" data-row-id="{{ result.pk }}">
                <td class="{% if is_grappelli %}grp-td{% endif %} action-checkbox">
                    <input type="checkbox" name="_selected_action" value="{{ result.pk }}" class="action-select">
                </td>
                {% for field_name in cl.list_display %}
                {% if field_name != 'action_checkbox' %}
                <td class="{% if is_grappelli %}grp-td{% endif %} field-{{ field_name }}">
                    {% if field_name in list_editable_htmx %}
                    {% include "htmx_admin/partials/table_cell.html" with object=result field=field_name value=result|get_field_value:field_name is_editable=True %}
                    {% else %}
                    {{ result|get_field_value:field_name }}
                    {% endif %}
                </td>
                {% endif %}
                {% endfor %}
                {% if list_editable_htmx %}
                <td class="{% if is_grappelli %}grp-td{% endif %} htmx-actions">
                    <a href="{% url opts|admin_urlname:'change' result.pk %}"
                       class="btn-edit-page {% if is_grappelli %}grp-button{% endif %}"
                       title="{% translate 'Edit (Full Page)' %}">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line></svg>
                    </a>
                    <button type="button"
                            class="btn-edit {% if is_grappelli %}grp-button{% endif %}"
                            hx-get="{% htmx_modal_url opts result.pk %}"
                            hx-target="#modal-container"
                            hx-swap="innerHTML"
                            title="{% translate 'Quick Edit (Modal)' %}">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
                    </button>
                    <button type="button"
                            class="btn-delete {% if is_grappelli %}grp-button grp-delete-link{% endif %}"
                            hx-delete="{% htmx_delete_url result %}"
                            hx-confirm="{% translate 'Are you sure you want to delete this item?' %}"
                            hx-target="closest tr"
                            hx-swap="outerHTML swap:300ms"
                            title="{% translate 'Delete' %}">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
                    </button>
                </td>
                {% endif %}
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% else %}
<p class="{% if is_grappelli %}grp-pagination{% else %}paginator{% endif %}">{% translate "0 results" %}</p>
{% endif %}