{% extends "django_sample_components/pages/master_async.html" %}
{% load async_tags %}

{% block title %}Async Counter{% endblock %}

{% block content %}
    <div class="container mt-5">
        <h1>Async Counter with HTMX</h1>
        <p class="text-muted">Interactive counter component that updates without page reload.</p>

        <hr>

        <div class="row">
            <div class="col-md-6">
                <h5>Basic Counter</h5>
                <p>Starts at 0, increments/decrements by 1:</p>
                <div class="mt-3">
                    {% async_counter initial_value=0 step=1 %}
                </div>
            </div>

            <div class="col-md-6">
                <h5>Counter with Step 5</h5>
                <p>Starts at 0, increments/decrements by 5:</p>
                <div class="mt-3">
                    {% async_counter initial_value=0 step=5 %}
                </div>
            </div>
        </div>

        <hr>

        <div class="row mt-4">
            <div class="col-md-6">
                <h5>Counter with Initial Value</h5>
                <p>Starts at 10, increments/decrements by 1:</p>
                <div class="mt-3">
                    {% async_counter initial_value=10 step=1 %}
                </div>
            </div>

            <div class="col-md-6">
                <h5>Counter with Min/Max</h5>
                <p>Starts at 5, with limits 0-10, step 1:</p>
                <div class="mt-3">
                    {% async_counter initial_value=5 step=1 min_value=0 max_value=10 %}
                </div>
            </div>
        </div>

        <hr>

        <section class="mt-5">
            <h5>How It Works</h5>
            <ul>
                <li>Click the <strong>+</strong> or <strong>−</strong> button to update the counter</li>
                <li>HTMX sends a POST request to the server without reloading the page</li>
                <li>The new value is returned and displayed instantly</li>
                <li>No page refresh needed!</li>
            </ul>
        </section>
    </div>

{% endblock %}