{% extends "admin/change_list.html" %}
{% load i18n admin_urls static htmx_admin_tags %}

{% block extrahead %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'htmx_admin/htmx-admin.css' %}">
<script src="{% static 'htmx_admin/htmx.min.js' %}" defer></script>
<script src="{% static 'htmx_admin/htmx-admin.js' %}" defer></script>
{% endblock %}

{% block object-tools-items %}
{{ block.super }}
{% if htmx_enabled and modal_fields %}
<li>
    <a href="#"
       class="btn-add-htmx"
       hx-get="{% htmx_modal_url opts 'add' %}"
       hx-target="#modal-container"
       hx-swap="innerHTML"
       onclick="return false;">
        {% translate "Quick Add" %}
    </a>
</li>
{% endif %}
{% endblock %}

{% block result_list %}
{% if htmx_enabled %}
<!-- HTMX Containers for Grappelli -->
<div id="htmx-admin-container">
    <div id="toast-container" class="toast-container"></div>
    <template id="toast-template">
        <div class="toast">
            <span class="toast-message"></span>
            <button type="button" class="toast-close">&times;</button>
        </div>
    </template>
    <div id="modal-container"></div>
</div>

<!-- HTMX Table for Grappelli -->
<div id="result-list-container"
     hx-trigger="refreshTable from:body"
     hx-get="{% htmx_table_body_url opts %}"
     hx-target="this"
     hx-swap="innerHTML">
    {% include "htmx_admin/partials/table_body.html" %}
</div>
{% else %}
{{ block.super }}
{% endif %}
{% endblock %}

{% block pagination %}
{{ block.super }}
{% endblock %}