{% load handyhelper_tags %}
<section>
    <header class="m-5 animated fadeIn">
        <div class="headline text-center">
            <div class="container">
                <div class="h1 text-primary fw-bold mb-3">{{ title|safe }}</div>
                <div class="h5 text-secondary">{{ subtitle|safe }}</div>
            </div>
        </div>
    </header>

    <div class="zoom-group-flex-container animated fadeIn" style="animation-delay: .25s;" hx-headers='{"X-CSRFToken":"{{ csrf_token }}"}'>
        {% for item in item_list %}
            {% include 'handyhelpers/htmx/bs5/partial/itemized_card.htm' %}
        {% endfor %}
        {% if request.user|has_group:protected_group_name %}
            {% for item in protected_item_list %}
                {% include 'handyhelpers/htmx/bs5/partial/itemized_card.htm' %}
            {% endfor %}
        {% endif %}
    </div>
</section>