{# Shared by both teamer lists. `scope` selects which list's filter the modal edits and
   which list a mailing resolves its recipients from; it is null on the general one. #}
{% set scope = scope|default(null) %}
<div class="flex items-start justify-between pb-4">
    <h1 class="text-2xl font-bold">
        {{ title }}
    </h1>
    <div class="flex flex-col items-end space-y-2 md:flex-row md:items-center md:space-x-2 md:space-y-0">
        <button type="button"
                class="{{ html_classes('btn btn--small', { 'btn--secondary': filterDto.active }) }}"
                title="Team filtern"
                hx-get="{{ path('app_common_teamer_filter', { 'r': return_url(), 'scope': scope }) }}"
                hx-target="body"
                hx-swap="beforeend">
            {{ icon('filter', 'w-4 h-4 shrink-0') }}
            {% if filterDto.active %}
                <span class="whitespace-nowrap">{{ filterDto.activeFiltersCount }} Filter aktiv</span>
            {% else %}
                <span>Filter</span>
            {% endif %}
        </button>
        {% if filterDto.active %}
            <a href="{{ path('app_common_teamer_filter_reset', { 'r': return_url(), 'scope': scope }) }}" class="btn btn--small btn--secondary">
                Reset
            </a>
        {% endif %}
        {% if is_granted('ROLE_TEAM_ADMIN') %}
            <a href="{{ path('app_admin_teamer_mailing', { 'r': return_url(), 'scope': scope }) }}"
               class="btn btn--small"
               title="Mail an die gefilterte Liste schreiben">
                {{ icon('mail', 'w-4 h-4 shrink-0') }}
                <span>Mailing</span>
            </a>
        {% endif %}
    </div>
</div>