{# Async counter component using HTMX #}
{% load static %}
<link rel="stylesheet" href="{% static 'css/components/async_counter.css' %}">
<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_component' %}"
            hx-target="#{{ id_counter }}"
            hx-swap="outerHTML"
            hx-vals='js:{"id_counter": "{{ id_counter }}", "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_component' %}"
            hx-target="#{{ id_counter }}"
            hx-swap="outerHTML"
            hx-vals='js:{"id_counter": "{{ id_counter }}", "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>