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

{% block title %}Dynamic Forms — Sum{% endblock %}

{% block content %}
    <div class="container mt-5">
        <h1>Dynamic Forms with HTMX &amp; crispy-forms</h1>
        <p class="text-muted">Self-contained form that submits and displays its result without a full page reload.</p>

        <hr>

        <div class="row">
            <div class="col-md-6">
                <h5>Sum of Two Numbers</h5>
                <p>Enter two numbers and click <strong>Calculate Sum</strong>. The result appears inline.</p>
                <div class="mt-3">
                    {% async_sum_form %}
                </div>
            </div>
        </div>

        <hr>

        <section class="mt-5">
            <h5>How It Works</h5>
            <ul>
                <li>The form is rendered server-side using <strong>django-crispy-forms</strong> with the Bootstrap 5 template pack</li>
                <li>On submit, <strong>HTMX</strong> POSTs the form data to the component endpoint without reloading the page</li>
                <li>The server validates the form, computes the result, and returns the updated component HTML</li>
                <li>HTMX swaps the old component with the new one (<code>hx-swap="outerHTML"</code>)</li>
                <li>Validation errors are displayed inline if the form is invalid</li>
            </ul>
        </section>
    </div>
{% endblock %}