{% extends "main/base/layout.html" %}
{% from "main/components/js_alert.html" import no_js_alert %}


{% block content %}
    {% macro render_btn(title, cls, content) %}
        <button
            type="button"
            class="btn {{ cls }} mb-3"
            hx-post="{{ url("swap") }}?content={{ content }}"
            hx-target="#swap-content-target"
        >
            {{ title }}
        </button>
    {% endmacro %}

    {{ no_js_alert() }}

    {{ render_btn(title="Initial", cls="btn-outline-secondary", content="initial") }}
    {{ render_btn(title="Swap to content 1", cls="btn-info", content="info") }}
    {{ render_btn(title="Swap to content 2", cls="btn-warning", content="warning") }}
    {{ render_btn(title="Swap to content 3", cls="btn-danger", content="danger") }}

    <div id="swap-content-target">
        {% include("main/swap_content.html") %}
    </div>
{% endblock %}