{% set tags = mapOrganizationTags|default([]) %}
{% set showOrganizations = mapShowOrganizations|default(false) %}
{% set showEvents = mapShowEvents|default(false) %}
{% set showTagButtons = showOrganizations and tags is iterable and tags|length > 0 %}
{% set showEventButton = showOrganizations and showEvents %}
{% set showFilterButtons = showTagButtons or showEventButton %}

<section
    id="{{ mapFilterWrapperId|e('html_attr') }}"
    class="eventmanager-map-filter"
    data-map-filter-wrapper="1"
    role="region"
    aria-label="Kartenfilter"
>
    {% if showFilterButtons %}
        <button
            type="button"
            class="eventmanager-map-filter__toggle is-expanded"
            data-map-filter-toggle="1"
            aria-expanded="true"
            aria-controls="{{ mapFilterGroupId|e('html_attr') }}"
        >
            <span class="eventmanager-map-filter__toggle-label eventmanager-map-filter__toggle-label--expand">Filter einblenden</span>
            <span class="eventmanager-map-filter__toggle-label eventmanager-map-filter__toggle-label--collapse">Filter ausblenden</span>
        </button>
    {% endif %}

    <div
        id="{{ mapFilterGroupId|e('html_attr') }}"
        class="eventmanager-map-filter__group"
        role="group"
        aria-label="Organisationstypen"
    >
        {% if showTagButtons %}
            {% for tag in tags %}
                <button
                    type="button"
                    class="eventmanager-map-filter__tag"
                    data-map-tag-filter="{{ tag.id|e('html_attr') }}"
                    aria-pressed="false"
                >{{ tag.label|e }}</button>
            {% endfor %}
        {% endif %}
        {% if showEventButton %}
            <button
                type="button"
                class="eventmanager-map-filter__tag"
                data-map-event-toggle="1"
                aria-pressed="false"
            >Veranstaltungen</button>
        {% endif %}

        <button
            type="button"
            class="eventmanager-map-filter__tag"
            data-map-style-mode="street"
            aria-pressed="true"
        >Straße</button>

        <button
            type="button"
            class="eventmanager-map-filter__tag"
            data-map-style-mode="satellite"
            aria-pressed="false"
        >Satellit</button>
    </div>
</section>

<div
    id="{{ mapContainerId|e('html_attr') }}"
    class="eventmanager-map"
    data-eventmanager-map="1"
    data-map-filter-wrapper-id="{{ mapFilterWrapperId|default('')|e('html_attr') }}"
    data-map-style="{{ mapStyleUrl|e('html_attr') }}"
    data-map-data-id="{{ mapDataElementId|e('html_attr') }}"
    data-map-event-color="{{ mapEventColor|default('#BC5067')|e('html_attr') }}"
    data-map-organization-color="{{ mapOrganizationColor|default('#BC5067')|e('html_attr') }}"
    data-map-initial-display="{{ mapInitialDisplay|default('all')|e('html_attr') }}"
    data-map-initial-tag-id="{{ mapInitialTagId|default(0)|e('html_attr') }}"
    data-map-center-mode="{{ mapCenterMode|default('markers')|e('html_attr') }}"
    data-map-center-lat="{{ mapCenterLat|default('')|e('html_attr') }}"
    data-map-center-lng="{{ mapCenterLng|default('')|e('html_attr') }}"
    data-map-center-zoom="{{ mapCenterZoom|default(12)|e('html_attr') }}"
    data-map-pitch="{{ mapPitch|default(0)|e('html_attr') }}"
></div>

<style>
    .eventmanager-map-filter {
        display: grid;
        gap: .5rem;
        margin-bottom: .75rem;
    }

    .eventmanager-map-filter__group {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
    }

    .eventmanager-map-filter__tag[aria-pressed="true"] {
        font-weight: 600;
    }

    .eventmanager-map {
        width: 100%;
        min-height: 420px;
    }

    .maplibregl-popup {
        z-index: 2147483647;
    }
</style>

<script type="application/json" id="{{ mapDataElementId|e('html_attr') }}">{{ mapItemsJson|raw }}</script>
<script type="module" src="/bundles/mummertmediaeventmanager/assets/map-module.js?v=20260227b"></script>