{% 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 extrastyle %}
{{ block.super }}
{{ media.css }}
{% endblock %}

{% block content %}
{{ block.super }}
{% endblock %}

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

{% block result_list %}
{% if htmx_enabled %}
<!-- HTMX Containers -->
<div id="htmx-admin-container">
    <!-- Toast Container -->
    <div id="toast-container" class="toast-container"></div>

    <!-- Toast Template -->
    <template id="toast-template">
        <div class="toast">
            <span class="toast-message"></span>
            <button type="button" class="toast-close">&times;</button>
        </div>
    </template>

    <!-- Modal Container -->
    <div id="modal-container"></div>
</div>

<!-- Top count (OOB target) -->
<p class="paginator htmx-result-count" id="htmx-total-count-top">
    <span>{{ cl.result_count }} {% translate "total" %}</span>
</p>

<!-- HTMX Table -->
<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 %}
{% if not htmx_enabled %}
{{ block.super }}
{% endif %}
{% endblock %}

{% block footer %}
{{ block.super }}
{% endblock %}