{# Async counter component using HTMX #}
<div class="async-counter" id="{{ id_counter }}">
    <div class="d-flex gap-2 align-items-center">
        <button
            class="btn btn-sm btn-outline-primary"
            hx-post="{% url 'django_sample_components:counter' %}"
            hx-target="#{{ id_counter }} .counter-display"
            hx-vals='js:{"action": "subtract", "current_value": document.querySelector("#{{ id_counter }} .counter-display").textContent.trim(), "step": {{ step }}, "min_value": "{{ min_value }}", "max_value": "{{ max_value }}"}'
        >
            −
        </button>

        <span class="counter-display px-3 text-monospace" style="min-width: 3rem; text-align: center;">{{ initial_value }}</span>

        <button
            class="btn btn-sm btn-outline-primary"
            hx-post="{% url 'django_sample_components:counter' %}"
            hx-target="#{{ id_counter }} .counter-display"
            hx-vals='js:{"action": "add", "current_value": document.querySelector("#{{ id_counter }} .counter-display").textContent.trim(), "step": {{ step }}, "min_value": "{{ min_value }}", "max_value": "{{ max_value }}"}'
        >
            +
        </button>
    </div>
</div>