Add list_default_organisationen template: UUID-based logos, improved tag filter

contao/dca/tl_location.php

@@ -148,8 +148,8 @@ $GLOBALS['TL_DCA']['tl_location'] = [
             'label' => &$GLOBALS['TL_LANG']['tl_location']['lat'],
             'exclude' => true,
             'inputType' => 'text',
-            'eval' => ['maxlength' => 10, 'tl_class' => 'w50'],
+            'eval' => ['maxlength' => 11, 'tl_class' => 'w50'],
-            'sql' => ['type' => 'decimal', 'precision' => 10, 'scale' => 8, 'default' => '0.00000000'],
+            'sql' => ['type' => 'decimal', 'precision' => 11, 'scale' => 8, 'default' => '0.00000000'],
         ],
         'lng' => [
             'label' => &$GLOBALS['TL_LANG']['tl_location']['lng'],

contao/dca/tl_module.php

@@ -7,6 +7,7 @@ use Contao\StringUtil;
 
 $GLOBALS['TL_DCA']['tl_module']['palettes']['member_organizations'] = '{title_legend},name,headline,type;{eventmanager_legend},editPage;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID';
 $GLOBALS['TL_DCA']['tl_module']['palettes']['member_events'] = '{title_legend},name,headline,type;{eventmanager_legend},editPage;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID';
+$GLOBALS['TL_DCA']['tl_module']['palettes']['event_filter'] = '{title_legend},name,headline,type;{eventmanager_legend},cal_calendar,eventListDomId;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID';
 $GLOBALS['TL_DCA']['tl_module']['palettes']['organization_edit'] = '{title_legend},name,headline,type;{eventmanager_legend},listPage,logoFolder,organizationTypeTags;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID';
 $GLOBALS['TL_DCA']['tl_module']['palettes']['event_edit'] = '{title_legend},name,headline,type;{eventmanager_legend},listPage,eventFolder,termsPage,frontendAuthorId,frontendArchiveId,eventTypeTags;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID';
 
@@ -119,3 +120,40 @@ $GLOBALS['TL_DCA']['tl_module']['fields']['eventTypeTags'] = [
         },
     ],
 ];
+
+$GLOBALS['TL_DCA']['tl_module']['fields']['eventListDomId'] = [
+    'label' => &$GLOBALS['TL_LANG']['tl_module']['eventListDomId'],
+    'exclude' => true,
+    'inputType' => 'select',
+    'options_callback' => static function (): array {
+        $rows = Database::getInstance()
+            ->prepare('SELECT id, name, cssID FROM tl_module WHERE type=? ORDER BY name ASC, id ASC')
+            ->execute('eventlist')
+            ->fetchAllAssoc();
+
+        $options = [];
+
+        foreach ($rows as $row) {
+            $moduleId = (int) ($row['id'] ?? 0);
+
+            if ($moduleId <= 0) {
+                continue;
+            }
+
+            $cssId = StringUtil::deserialize($row['cssID'] ?? null, true);
+            $domId = trim((string) ($cssId[0] ?? ''));
+            $domId = '' !== $domId ? $domId : sprintf('mod_eventlist_%d', $moduleId);
+            $moduleName = trim((string) ($row['name'] ?? ''));
+
+            if ('' === $moduleName) {
+                $moduleName = sprintf('Eventliste %d', $moduleId);
+            }
+
+            $options[$domId] = sprintf('%s [%s]', $moduleName, $domId);
+        }
+
+        return $options;
+    },
+    'eval' => ['includeBlankOption' => true, 'chosen' => true, 'tl_class' => 'w50'],
+    'sql' => ['type' => 'string', 'length' => 128, 'default' => ''],
+];

contao/dca/tl_organization.php

@@ -178,8 +178,8 @@ $GLOBALS['TL_DCA']['tl_organization'] = [
             'label' => &$GLOBALS['TL_LANG']['tl_organization']['lat'],
             'exclude' => true,
             'inputType' => 'text',
-            'eval' => ['maxlength' => 10, 'tl_class' => 'w50'],
+            'eval' => ['maxlength' => 11, 'tl_class' => 'w50'],
-            'sql' => ['type' => 'decimal', 'precision' => 10, 'scale' => 8, 'default' => '0.00000000'],
+            'sql' => ['type' => 'decimal', 'precision' => 11, 'scale' => 8, 'default' => '0.00000000'],
         ],
         'lng' => [
             'label' => &$GLOBALS['TL_LANG']['tl_organization']['lng'],

contao/languages/de/modules.php

@@ -9,4 +9,5 @@ $GLOBALS['TL_LANG']['FMD']['eventmanager'] = 'Event-Manager';
 $GLOBALS['TL_LANG']['FMD']['member_organizations'] = ['Meine Organisationen', 'Listet Organisationen des eingeloggten Mitglieds auf.'];
 $GLOBALS['TL_LANG']['FMD']['organization_edit'] = ['Organisation bearbeiten', 'Bearbeitungsformular für eine Organisation.'];
 $GLOBALS['TL_LANG']['FMD']['member_events'] = ['Meine Veranstaltungen', 'Listet Veranstaltungen der zugeordneten Organisationen auf.'];
+$GLOBALS['TL_LANG']['FMD']['event_filter'] = ['Eventfilter', 'Filter für kommende Veranstaltungen (Tags, Orte, Veranstalter).'];
 $GLOBALS['TL_LANG']['FMD']['event_edit'] = ['Veranstaltung bearbeiten', 'Bearbeitungsformular für eine Veranstaltung.'];

contao/languages/de/tl_module.php

@@ -10,5 +10,6 @@ $GLOBALS['TL_LANG']['tl_module']['eventFolder'] = ['Event-Ordner', 'Bitte wähle
 $GLOBALS['TL_LANG']['tl_module']['termsPage'] = ['Seite mit Nutzungsbedingungen', 'Optional: Seite mit den Nutzungsbedingungen, die im Frontend beim Zustimmungs-Label verlinkt wird.'];
 $GLOBALS['TL_LANG']['tl_module']['frontendAuthorId'] = ['Backend Benutzer ID', 'ID des Backend-Benutzers, der als Autor für frontendseitig angelegte Events gesetzt wird.'];
 $GLOBALS['TL_LANG']['tl_module']['frontendArchiveId'] = ['ID des Newsarchivs', 'Archiv-ID (pid), in das frontendseitig angelegte Events gespeichert werden.'];
+$GLOBALS['TL_LANG']['tl_module']['eventListDomId'] = ['Eventlisten-ID (DOM)', 'Wählen Sie die ID der Eventliste, die durch das Event-Filter-Modul gefiltert werden soll.'];
 $GLOBALS['TL_LANG']['tl_module']['organizationTypeTags'] = ['Anzuzeigende Organisationstypen', 'Optional: Begrenzen Sie die im Frontend anzeigbaren Organisationstyp-Tags. Leer = alle.'];
 $GLOBALS['TL_LANG']['tl_module']['eventTypeTags'] = ['Anzuzeigende Veranstaltungstypen', 'Optional: Begrenzen Sie die im Frontend anzeigbaren Veranstaltungstyp-Tags. Leer = alle.'];

contao/languages/en/modules.php

@@ -9,4 +9,5 @@ $GLOBALS['TL_LANG']['FMD']['eventmanager'] = 'Event manager';
 $GLOBALS['TL_LANG']['FMD']['member_organizations'] = ['My organizations', 'Lists organizations of the logged-in member.'];
 $GLOBALS['TL_LANG']['FMD']['organization_edit'] = ['Edit organization', 'Edit form for one organization.'];
 $GLOBALS['TL_LANG']['FMD']['member_events'] = ['My events', 'Lists events of the member organizations.'];
+$GLOBALS['TL_LANG']['FMD']['event_filter'] = ['Event filter', 'Filters upcoming events (tags, locations, organizers).'];
 $GLOBALS['TL_LANG']['FMD']['event_edit'] = ['Edit event', 'Edit form for one event.'];

contao/languages/en/tl_module.php

@@ -10,5 +10,6 @@ $GLOBALS['TL_LANG']['tl_module']['eventFolder'] = ['Event folder', 'Please selec
 $GLOBALS['TL_LANG']['tl_module']['termsPage'] = ['Terms page', 'Optional: page containing the terms of use linked from the frontend consent label.'];
 $GLOBALS['TL_LANG']['tl_module']['frontendAuthorId'] = ['Backend user ID', 'Backend user ID that should be set as author for events created from the frontend.'];
 $GLOBALS['TL_LANG']['tl_module']['frontendArchiveId'] = ['News archive ID', 'Archive ID (pid) where events created from the frontend should be stored.'];
+$GLOBALS['TL_LANG']['tl_module']['eventListDomId'] = ['Event list ID (DOM)', 'Select the event list ID that should be filtered by the event filter module.'];
 $GLOBALS['TL_LANG']['tl_module']['organizationTypeTags'] = ['Displayed organization types', 'Optional: Limit which organization type tags can be selected in the frontend. Empty = all.'];
 $GLOBALS['TL_LANG']['tl_module']['eventTypeTags'] = ['Displayed event types', 'Optional: Limit which event type tags can be selected in the frontend. Empty = all.'];

contao/templates/frontend/event_filter.html.twig

@@ -0,0 +1,336 @@
+<div id="eventfilters" data-eventlist-id="{{ targetEventListId|default('eventlist')|e('html_attr') }}">
+    <div class="select-filters">
+        <div class="widget-select category">
+            <label for="tag-filter" class="visually-hidden">Kategorie wählen</label>
+            <select id="tag-filter">
+                <option value="all" data-placeholder="true">Kategorie wählen</option>
+                {% for tag in tagButtons|default([]) %}
+                    <option value="tag-{{ tag.id }}">{{ tag.title }} ({{ tag.count }})</option>
+                {% endfor %}
+            </select>
+        </div>
+
+        <div class="widget-select places">
+            <label for="location-filter" class="visually-hidden">Ort wählen</label>
+            <select id="location-filter">
+                <option value="all" data-placeholder="true">Ort wählen</option>
+                {% for location in locations|default([]) %}
+                    <option value="location-{{ location.id }}">{{ location.title }} ({{ location.count }})</option>
+                {% endfor %}
+            </select>
+        </div>
+
+        <div class="widget-select org">
+            <label for="org-filter" class="visually-hidden">Veranstalter wählen</label>
+            <select id="org-filter">
+                <option value="all" data-placeholder="true">Veranstalter wählen</option>
+                {% for organization in organizations|default([]) %}
+                    <option value="org-{{ organization.id }}">{{ organization.title }} ({{ organization.count }})</option>
+                {% endfor %}
+            </select>
+        </div>
+    </div>
+
+    <button type="button" id="eventfilter-reset" class="eventfilter-reset" hidden>Filter zurücksetzen</button>
+
+    <p id="eventfilter-status" class="visually-hidden" aria-live="polite"></p>
+</div>
+
+<style>
+    .visually-hidden {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;
+    }
+
+    .event-filter-target-list {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+        gap: 1rem;
+    }
+
+    .event-filter-target-list .event {
+        opacity: 1;
+        transform: translateY(0);
+        transition: opacity 220ms ease, transform 220ms ease;
+        will-change: opacity, transform;
+    }
+
+    .event-filter-target-list .event.is-filtered-out {
+        opacity: 0;
+        transform: translateY(6px);
+        pointer-events: none;
+    }
+
+    #eventfilters .widget-select.active .ss-main {
+        outline: 2px solid currentColor;
+        outline-offset: 2px;
+    }
+
+    #eventfilters .ss-main:focus-visible {
+        outline: 2px solid currentColor;
+        outline-offset: 2px;
+    }
+
+    #eventfilters .eventfilter-reset[hidden] {
+        display: none;
+    }
+</style>
+
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slim-select@3/dist/slimselect.css">
+<script src="https://cdn.jsdelivr.net/npm/slim-select@3/dist/slimselect.min.js"></script>
+
+<script type="module">
+    const filters = document.getElementById('eventfilters');
+
+    if (!filters) {
+        throw new Error('Event filter requires #eventfilters.');
+    }
+
+    const targetEventListId = filters.dataset.eventlistId || 'eventlist';
+    const list = document.getElementById(targetEventListId);
+
+    if (!list) {
+        console.warn(`[event_filter] Target event list #${targetEventListId} was not found.`);
+    }
+
+    list?.classList.add('event-filter-target-list');
+
+    const events = list ? Array.from(list.querySelectorAll(':scope > .event')) : [];
+    const tagSelect = filters.querySelector('#tag-filter');
+    const locationSelect = filters.querySelector('#location-filter');
+    const orgSelect = filters.querySelector('#org-filter');
+    const tagWidget = tagSelect?.closest('.widget-select');
+    const locationWidget = locationSelect?.closest('.widget-select');
+    const orgWidget = orgSelect?.closest('.widget-select');
+    const resetButton = filters.querySelector('#eventfilter-reset');
+    const status = filters.querySelector('#eventfilter-status');
+
+    const animationMs = 220;
+    let hideTimers = new WeakMap();
+    let currentFilter = { type: 'all', value: 'all' };
+    let suppressedChangeEvents = 0;
+
+    const initSlimSelect = (selectElement) => {
+        if (!selectElement || 'undefined' === typeof window.SlimSelect) {
+            return null;
+        }
+
+        return new window.SlimSelect({
+            select: selectElement,
+            settings: {
+                showSearch: false,
+                allowDeselect: false,
+            },
+        });
+    };
+
+    const tagSlim = initSlimSelect(tagSelect);
+    const locationSlim = initSlimSelect(locationSelect);
+    const orgSlim = initSlimSelect(orgSelect);
+
+    const setSelectValue = (selectElement, slimInstance, value) => {
+        if (!selectElement) {
+            return;
+        }
+
+        if (selectElement.value === value) {
+            return;
+        }
+
+        suppressedChangeEvents += 1;
+
+        try {
+            if (slimInstance) {
+                slimInstance.setSelected(value);
+            } else {
+                selectElement.value = value;
+            }
+        } finally {
+            queueMicrotask(() => {
+                suppressedChangeEvents = Math.max(0, suppressedChangeEvents - 1);
+            });
+        }
+    };
+
+    const clearHideTimer = (eventItem) => {
+        const timer = hideTimers.get(eventItem);
+
+        if (timer) {
+            window.clearTimeout(timer);
+            hideTimers.delete(eventItem);
+        }
+    };
+
+    const showEvent = (eventItem) => {
+        clearHideTimer(eventItem);
+        eventItem.hidden = false;
+
+        requestAnimationFrame(() => {
+            eventItem.classList.remove('is-filtered-out');
+        });
+    };
+
+    const hideEvent = (eventItem) => {
+        clearHideTimer(eventItem);
+        eventItem.classList.add('is-filtered-out');
+
+        const timer = window.setTimeout(() => {
+            eventItem.hidden = true;
+            hideTimers.delete(eventItem);
+        }, animationMs);
+
+        hideTimers.set(eventItem, timer);
+    };
+
+    const setActiveControl = ({ type, value }) => {
+        const hasActiveTag = type === 'tag' && value !== 'all';
+        const hasActiveLocation = type === 'location' && value !== 'all';
+        const hasActiveOrg = type === 'org' && value !== 'all';
+
+        tagWidget?.classList.toggle('active', hasActiveTag);
+        locationWidget?.classList.toggle('active', hasActiveLocation);
+        orgWidget?.classList.toggle('active', hasActiveOrg);
+
+        if (resetButton) {
+            resetButton.hidden = !(hasActiveTag || hasActiveLocation || hasActiveOrg);
+        }
+    };
+
+    const parseIdList = (rawValue) => (rawValue ?? '')
+        .split(',')
+        .map((value) => value.trim())
+        .filter(Boolean);
+
+    const matches = (eventItem, filterState) => {
+        if (filterState.value === 'all') {
+            return true;
+        }
+
+        if (filterState.type === 'tag') {
+            return parseIdList(eventItem.dataset.tags).includes(filterState.value);
+        }
+
+        if (filterState.type === 'location') {
+            return eventItem.dataset.location === filterState.value;
+        }
+
+        if (filterState.type === 'org') {
+            return parseIdList(eventItem.dataset.org).includes(filterState.value);
+        }
+
+        if (filterState.type === 'all') {
+            return true;
+        }
+
+        return true;
+    };
+
+    const updateStatus = (filterState) => {
+        if (!status) {
+            return;
+        }
+
+        const visibleCount = events.filter((eventItem) => !eventItem.hidden).length;
+        let filterText = 'alle';
+
+        if (filterState.type === 'tag' && tagSelect) {
+            const option = tagSelect.options[tagSelect.selectedIndex];
+            filterText = option ? option.textContent.trim() : 'Kategorie wählen';
+        }
+
+        if (filterState.type === 'location' && locationSelect) {
+            const option = locationSelect.options[locationSelect.selectedIndex];
+            filterText = option ? option.textContent.trim() : 'Ort';
+        }
+
+        if (filterState.type === 'org' && orgSelect) {
+            const option = orgSelect.options[orgSelect.selectedIndex];
+            filterText = option ? option.textContent.trim() : 'Veranstalter';
+        }
+
+        status.textContent = `${visibleCount} Veranstaltungen angezeigt, Filter: ${filterText}.`;
+    };
+
+    const applyFilter = (filterState) => {
+        currentFilter = filterState;
+        setActiveControl(filterState);
+
+        events.forEach((eventItem) => {
+            if (matches(eventItem, filterState)) {
+                showEvent(eventItem);
+            } else {
+                hideEvent(eventItem);
+            }
+        });
+
+        updateStatus(filterState);
+    };
+
+    tagSelect?.addEventListener('change', () => {
+        if (suppressedChangeEvents > 0) {
+            return;
+        }
+
+        const selectedValue = tagSelect.value;
+
+        setSelectValue(locationSelect, locationSlim, 'all');
+        setSelectValue(orgSelect, orgSlim, 'all');
+
+        applyFilter(
+            selectedValue === 'all'
+                ? { type: 'all', value: 'all' }
+                : { type: 'tag', value: selectedValue.replace('tag-', '') },
+        );
+    });
+
+    locationSelect?.addEventListener('change', () => {
+        if (suppressedChangeEvents > 0) {
+            return;
+        }
+
+        const selectedValue = locationSelect.value;
+
+        setSelectValue(tagSelect, tagSlim, 'all');
+        setSelectValue(orgSelect, orgSlim, 'all');
+
+        applyFilter(
+            selectedValue === 'all'
+                ? { type: 'all', value: 'all' }
+                : { type: 'location', value: selectedValue.replace('location-', '') },
+        );
+    });
+
+    orgSelect?.addEventListener('change', () => {
+        if (suppressedChangeEvents > 0) {
+            return;
+        }
+
+        const selectedValue = orgSelect.value;
+
+        setSelectValue(tagSelect, tagSlim, 'all');
+        setSelectValue(locationSelect, locationSlim, 'all');
+
+        applyFilter(
+            selectedValue === 'all'
+                ? { type: 'all', value: 'all' }
+                : { type: 'org', value: selectedValue.replace('org-', '') },
+        );
+    });
+
+    resetButton?.addEventListener('click', () => {
+        setSelectValue(tagSelect, tagSlim, 'all');
+        setSelectValue(locationSelect, locationSlim, 'all');
+        setSelectValue(orgSelect, orgSlim, 'all');
+
+        applyFilter({ type: 'all', value: 'all' });
+    });
+
+    applyFilter(currentFilter);
+</script>

src/Controller/Frontend/EventFilterController.php

@@ -0,0 +1,192 @@
+<?php
+
+declare(strict_types=1);
+
+namespace MummertMedia\EventManagerBundle\Controller\Frontend;
+
+use Contao\CoreBundle\Controller\FrontendModule\AbstractFrontendModuleController;
+use Contao\CoreBundle\DependencyInjection\Attribute\AsFrontendModule;
+use Contao\CoreBundle\Twig\FragmentTemplate;
+use Contao\ModuleModel;
+use Contao\StringUtil;
+use Doctrine\DBAL\ArrayParameterType;
+use Doctrine\DBAL\Connection;
+use Doctrine\DBAL\ParameterType;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\Response;
+
+#[AsFrontendModule(type: 'event_filter', category: 'eventmanager', template: 'frontend/event_filter')]
+class EventFilterController extends AbstractFrontendModuleController
+{
+    public function __construct(
+        private readonly Connection $connection,
+    ) {
+    }
+
+    protected function getResponse(FragmentTemplate $template, ModuleModel $model, Request $request): Response
+    {
+        $calendarIds = array_map('intval', StringUtil::deserialize($model->cal_calendar, true));
+        $eventIds = $this->findUpcomingEventIds($calendarIds);
+        $targetEventListId = trim((string) ($model->eventListDomId ?? ''));
+
+        $template->set('tagButtons', $this->findTagButtons($eventIds));
+        $template->set('locations', $this->findLocations($eventIds));
+        $template->set('organizations', $this->findOrganizations($eventIds));
+        $template->set('targetEventListId', '' !== $targetEventListId ? $targetEventListId : 'eventlist');
+
+        return $template->getResponse();
+    }
+
+    /**
+     * @param list<int> $calendarIds
+     *
+     * @return list<int>
+     */
+    private function findUpcomingEventIds(array $calendarIds): array
+    {
+        $today = strtotime('today');
+
+        if ([] === $calendarIds) {
+            $rows = $this->connection->executeQuery(
+                <<<'SQL'
+                    SELECT e.id
+                    FROM tl_calendar_events e
+                    WHERE e.published='1'
+                      AND (e.startTime>=? OR e.endTime>=?)
+                    ORDER BY e.startTime ASC
+                SQL,
+                [$today, $today],
+                [ParameterType::INTEGER, ParameterType::INTEGER],
+            )->fetchFirstColumn();
+        } else {
+            $rows = $this->connection->executeQuery(
+                <<<'SQL'
+                    SELECT e.id
+                    FROM tl_calendar_events e
+                    WHERE e.pid IN (?)
+                      AND e.published='1'
+                      AND (e.startTime>=? OR e.endTime>=?)
+                    ORDER BY e.startTime ASC
+                SQL,
+                [$calendarIds, $today, $today],
+                [ArrayParameterType::INTEGER, ParameterType::INTEGER, ParameterType::INTEGER],
+            )->fetchFirstColumn();
+        }
+
+        return array_values(array_unique(array_map('intval', $rows)));
+    }
+
+    /**
+     * @param list<int> $eventIds
+     *
+     * @return list<array{id:int,title:string,count:int}>
+     */
+    private function findTagButtons(array $eventIds): array
+    {
+        if ([] === $eventIds) {
+            return [];
+        }
+
+        $rows = $this->connection->executeQuery(
+            <<<'SQL'
+                                SELECT t.id, t.tag, COUNT(DISTINCT r.pid) AS total
+                FROM tl_tags_rel r
+                INNER JOIN tl_tags t ON t.id=r.tag_id
+                WHERE r.ptable='tl_calendar_events'
+                  AND r.field='tags'
+                                    AND r.pid IN (?)
+                GROUP BY t.id, t.tag
+                ORDER BY t.tag ASC
+            SQL,
+            [$eventIds],
+            [ArrayParameterType::INTEGER],
+        )->fetchAllAssociative();
+
+        $items = [];
+
+        foreach ($rows as $row) {
+            $items[] = [
+                'id' => (int) ($row['id'] ?? 0),
+                'title' => (string) ($row['tag'] ?? ''),
+                'count' => (int) ($row['total'] ?? 0),
+            ];
+        }
+
+        return $items;
+    }
+
+    /**
+     * @param list<int> $eventIds
+     *
+     * @return list<array{id:int,title:string,count:int}>
+     */
+    private function findLocations(array $eventIds): array
+    {
+        if ([] === $eventIds) {
+            return [];
+        }
+
+        $rows = $this->connection->executeQuery(
+            <<<'SQL'
+                SELECT l.id, l.title, COUNT(e.id) AS total
+                FROM tl_calendar_events e
+                                INNER JOIN tl_location l ON l.id=e.location_id
+                WHERE e.id IN (?)
+                                    AND e.location_id>0
+                GROUP BY l.id, l.title
+                ORDER BY l.title ASC
+            SQL,
+            [$eventIds],
+            [ArrayParameterType::INTEGER],
+        )->fetchAllAssociative();
+
+        $items = [];
+
+        foreach ($rows as $row) {
+            $items[] = [
+                'id' => (int) ($row['id'] ?? 0),
+                'title' => (string) ($row['title'] ?? ''),
+                'count' => (int) ($row['total'] ?? 0),
+            ];
+        }
+
+        return $items;
+    }
+
+    /**
+     * @param list<int> $eventIds
+     *
+     * @return list<array{id:int,title:string,count:int}>
+     */
+    private function findOrganizations(array $eventIds): array
+    {
+        if ([] === $eventIds) {
+            return [];
+        }
+
+        $rows = $this->connection->executeQuery(
+            <<<'SQL'
+                SELECT o.id, o.title, COUNT(DISTINCT rel.event_id) AS total
+                FROM tl_calendar_events_organization rel
+                INNER JOIN tl_organization o ON o.id=rel.organization_id
+                WHERE rel.event_id IN (?)
+                GROUP BY o.id, o.title
+                ORDER BY o.title ASC
+            SQL,
+            [$eventIds],
+            [ArrayParameterType::INTEGER],
+        )->fetchAllAssociative();
+
+        $items = [];
+
+        foreach ($rows as $row) {
+            $items[] = [
+                'id' => (int) ($row['id'] ?? 0),
+                'title' => (string) ($row['title'] ?? ''),
+                'count' => (int) ($row['total'] ?? 0),
+            ];
+        }
+
+        return $items;
+    }
+}

src/EventListener/EventFullTemplateDataListener.php

@@ -0,0 +1,265 @@
+<?php
+
+declare(strict_types=1);
+
+namespace MummertMedia\EventManagerBundle\EventListener;
+
+use Contao\CoreBundle\DependencyInjection\Attribute\AsHook;
+use Contao\StringUtil;
+use Contao\Template;
+use Doctrine\DBAL\Connection;
+use Doctrine\DBAL\ParameterType;
+
+#[AsHook('parseTemplate', method: 'onParseTemplate')]
+class EventFullTemplateDataListener
+{
+    public function __construct(
+        private readonly Connection $connection,
+    ) {
+    }
+
+    public function onParseTemplate(Template $template): void
+    {
+        $templateName = (string) $template->getName();
+
+        if (!str_starts_with($templateName, 'event_full')) {
+            return;
+        }
+
+        $data = $template->getData();
+        $eventId = (int) ($data['id'] ?? 0);
+
+        if ($eventId <= 0) {
+            return;
+        }
+
+        $locationId = isset($data['location_id']) ? (int) $data['location_id'] : 0;
+
+        $locationRow = $this->fetchLocationRow($locationId);
+        $organizations = $this->fetchOrganizations($eventId);
+        $tags = $this->fetchTags($eventId);
+
+        $template->location_row = $locationRow;
+        $template->organizations = $organizations;
+        $template->tags = $tags;
+        $template->has_tag_21 = \in_array(21, array_map(static fn (array $tag): int => (int) ($tag['id'] ?? 0), $tags), true);
+
+        if ($locationRow && '' !== ($locationRow['lng'] ?? '') && '' !== ($locationRow['lat'] ?? '') && 58 !== (int) ($locationRow['id'] ?? 0)) {
+            $this->registerMapAssets();
+            $template->show_location_map = true;
+        } else {
+            $template->show_location_map = false;
+        }
+
+        $template->location_fields = $this->toFlatLocationFields($locationRow);
+        $template->organization_fields = $this->toFlatOrganizationFields($organizations);
+        $template->tag_fields = $this->toFlatTagFields($tags);
+    }
+
+    /** @return array<string, string> */
+    private function fetchLocationRow(int $locationId): array
+    {
+        if ($locationId <= 0) {
+            return [];
+        }
+
+        $row = $this->connection->createQueryBuilder()
+            ->select('*')
+            ->from('tl_location')
+            ->where('id = :id')
+            ->setParameter('id', $locationId, ParameterType::INTEGER)
+            ->setMaxResults(1)
+            ->executeQuery()
+            ->fetchAssociative();
+
+        if (false === $row || null === $row) {
+            return [];
+        }
+
+        $normalized = [];
+
+        foreach ($row as $column => $value) {
+            $normalized[$column] = $this->toString($value);
+        }
+
+        if ('' !== ($normalized['image'] ?? '')) {
+            $normalized['image_uuid'] = $this->normalizeUuid($normalized['image']);
+        }
+
+        return $normalized;
+    }
+
+    /** @return list<array<string, string>> */
+    private function fetchOrganizations(int $eventId): array
+    {
+        $rows = $this->connection->createQueryBuilder()
+            ->select('o.*')
+            ->from('tl_calendar_events_organization', 'ceo')
+            ->innerJoin('ceo', 'tl_organization', 'o', 'o.id = ceo.organization_id')
+            ->where('ceo.event_id = :eventId')
+            ->setParameter('eventId', $eventId, ParameterType::INTEGER)
+            ->orderBy('ceo.organization_id', 'ASC')
+            ->executeQuery()
+            ->fetchAllAssociative();
+
+        $organizations = [];
+
+        foreach ($rows as $row) {
+            $normalized = [];
+
+            foreach ($row as $column => $value) {
+                $normalized[$column] = $this->toString($value);
+            }
+
+            if ('' !== ($normalized['logo'] ?? '')) {
+                $normalized['logo_uuid'] = $this->normalizeUuid($normalized['logo']);
+            }
+
+            $organizations[] = $normalized;
+        }
+
+        return $organizations;
+    }
+
+    /** @return list<array<string, string>> */
+    private function fetchTags(int $eventId): array
+    {
+        $rows = $this->connection->createQueryBuilder()
+            ->select('t.*')
+            ->from('tl_tags_rel', 'r')
+            ->innerJoin('r', 'tl_tags', 't', 't.id = r.tag_id')
+            ->where('r.ptable = :ptable')
+            ->andWhere('r.field = :field')
+            ->andWhere('r.pid = :pid')
+            ->setParameter('ptable', 'tl_calendar_events')
+            ->setParameter('field', 'tags')
+            ->setParameter('pid', $eventId, ParameterType::INTEGER)
+            ->orderBy('r.tag_id', 'ASC')
+            ->executeQuery()
+            ->fetchAllAssociative();
+
+        $tags = [];
+
+        foreach ($rows as $row) {
+            $title = '';
+
+            if (isset($row['title']) && '' !== (string) $row['title']) {
+                $title = (string) $row['title'];
+            } elseif (isset($row['tag'])) {
+                $title = (string) $row['tag'];
+            }
+
+            $tags[] = [
+                'id' => (string) ((int) ($row['id'] ?? 0)),
+                'title' => $title,
+                'tag' => (string) ($row['tag'] ?? ''),
+            ];
+        }
+
+        return $tags;
+    }
+
+    /** @param array<string, string> $locationRow
+     *  @return array<string, string>
+     */
+    private function toFlatLocationFields(array $locationRow): array
+    {
+        $fields = [];
+
+        foreach ($locationRow as $column => $value) {
+            $fields['location_'.$column] = $value;
+        }
+
+        return $fields;
+    }
+
+    /** @param list<array<string, string>> $organizations
+     *  @return array<string, string>
+     */
+    private function toFlatOrganizationFields(array $organizations): array
+    {
+        $fields = [];
+        $index = 1;
+
+        foreach ($organizations as $organization) {
+            foreach ($organization as $column => $value) {
+                $fields['organization'.$index.'_'.$column] = $value;
+            }
+
+            ++$index;
+        }
+
+        return $fields;
+    }
+
+    /** @param list<array<string, string>> $tags
+     *  @return array<string, string>
+     */
+    private function toFlatTagFields(array $tags): array
+    {
+        $fields = [];
+        $index = 1;
+
+        foreach ($tags as $tag) {
+            $fields['tag'.$index.'_title'] = (string) ($tag['title'] ?? '');
+            ++$index;
+        }
+
+        return $fields;
+    }
+
+    private function normalizeUuid(string $value): string
+    {
+        $trimmed = trim($value);
+
+        if (preg_match('/^[0-9a-fA-F-]{36}$/', $trimmed)) {
+            return strtolower($trimmed);
+        }
+
+        if (16 === strlen($trimmed)) {
+            return StringUtil::binToUuid($trimmed);
+        }
+
+        return $trimmed;
+    }
+
+    private function registerMapAssets(): void
+    {
+        $GLOBALS['TL_JAVASCRIPT'] ??= [];
+        $GLOBALS['TL_CSS'] ??= [];
+
+        $jsAssets = [
+            'https://maps.mummert.media/libraries/maplibre-gl.js',
+            'https://maps.mummert.media/libraries/pmtiles.js',
+        ];
+
+        foreach ($jsAssets as $asset) {
+            if (!\in_array($asset, $GLOBALS['TL_JAVASCRIPT'], true)) {
+                $GLOBALS['TL_JAVASCRIPT'][] = $asset;
+            }
+        }
+
+        $cssAsset = 'https://maps.mummert.media/libraries/maplibre-gl.css';
+
+        if (!\in_array($cssAsset, $GLOBALS['TL_CSS'], true)) {
+            $GLOBALS['TL_CSS'][] = $cssAsset;
+        }
+    }
+
+    private function toString(mixed $value): string
+    {
+        if (null === $value) {
+            return '';
+        }
+
+        if (\is_bool($value)) {
+            return $value ? '1' : '0';
+        }
+
+        if (\is_scalar($value)) {
+            return (string) $value;
+        }
+
+        return json_encode($value, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?: '';
+    }
+}

src/EventListener/EventTeaserDataAttributesListener.php

@@ -0,0 +1,225 @@
+<?php
+
+declare(strict_types=1);
+
+namespace MummertMedia\EventManagerBundle\EventListener;
+
+use Contao\CoreBundle\DependencyInjection\Attribute\AsHook;
+use Contao\Module;
+use Doctrine\DBAL\ArrayParameterType;
+use Doctrine\DBAL\Connection;
+use Doctrine\DBAL\Exception;
+use Doctrine\DBAL\ParameterType;
+
+#[AsHook('getAllEvents', method: 'onGetAllEvents', priority: -512)]
+class EventTeaserDataAttributesListener
+{
+    public function __construct(
+        private readonly Connection $connection,
+    ) {
+    }
+
+    public function onGetAllEvents(array $events, array $calendars, int $start, int $end, Module $module): array
+    {
+        $eventIds = $this->collectEventIds($events);
+        $tagMap = $this->fetchTagMap($eventIds);
+        $organizationMap = $this->fetchOrganizationMap($eventIds);
+        $locationMap = $this->fetchLocationMap($eventIds);
+        $locationTitleMap = $this->fetchLocationTitleMap($locationMap);
+
+        foreach ($events as $dayKey => $eventsPerDay) {
+            foreach ($eventsPerDay as $timeKey => $eventsPerTime) {
+                foreach ($eventsPerTime as $index => $event) {
+                    if (!isset($event['id'])) {
+                        $events[$dayKey][$timeKey][$index]['location_id'] = null;
+                        $events[$dayKey][$timeKey][$index]['location_title'] = '';
+                        $events[$dayKey][$timeKey][$index]['event_tags'] = '';
+                        $events[$dayKey][$timeKey][$index]['event_org'] = '';
+
+                        continue;
+                    }
+
+                    $eventId = (int) $event['id'];
+
+                    if (isset($event['location_id']) && '' !== (string) $event['location_id']) {
+                        $events[$dayKey][$timeKey][$index]['location_id'] = (int) $event['location_id'];
+                    } else {
+                        $events[$dayKey][$timeKey][$index]['location_id'] = $locationMap[$eventId] ?? null;
+                    }
+
+                    $locationId = $events[$dayKey][$timeKey][$index]['location_id'];
+                    $events[$dayKey][$timeKey][$index]['location_title'] = null !== $locationId
+                        ? ($locationTitleMap[(int) $locationId] ?? '')
+                        : '';
+
+                    $events[$dayKey][$timeKey][$index]['event_tags'] = implode(',', $tagMap[$eventId] ?? []);
+                    $events[$dayKey][$timeKey][$index]['event_org'] = implode(',', $organizationMap[$eventId] ?? []);
+                }
+            }
+        }
+
+        return $events;
+    }
+
+    /** @return list<int> */
+    private function collectEventIds(array $events): array
+    {
+        $eventIds = [];
+
+        foreach ($events as $eventsPerDay) {
+            foreach ($eventsPerDay as $eventsPerTime) {
+                foreach ($eventsPerTime as $event) {
+                    if (!isset($event['id'])) {
+                        continue;
+                    }
+
+                    $eventIds[] = (int) $event['id'];
+                }
+            }
+        }
+
+        return array_values(array_unique(array_map('intval', $eventIds)));
+    }
+
+    /** @param list<int> $eventIds
+     *  @return array<int, list<int>>
+     */
+    private function fetchTagMap(array $eventIds): array
+    {
+        if ([] === $eventIds) {
+            return [];
+        }
+
+        $rows = $this->connection->executeQuery(
+            'SELECT pid, tag_id FROM tl_tags_rel WHERE ptable = ? AND field = ? AND pid IN (?) ORDER BY pid ASC, tag_id ASC',
+            ['tl_calendar_events', 'tags', $eventIds],
+            [ParameterType::STRING, ParameterType::STRING, ArrayParameterType::INTEGER],
+        )->fetchAllAssociative();
+
+        $map = [];
+
+        foreach ($rows as $row) {
+            $eventId = (int) ($row['pid'] ?? 0);
+            $tagId = (int) ($row['tag_id'] ?? 0);
+
+            if ($eventId <= 0 || $tagId <= 0) {
+                continue;
+            }
+
+            $map[$eventId][] = $tagId;
+        }
+
+        foreach ($map as $eventId => $tagIds) {
+            $map[$eventId] = array_values(array_unique(array_map('intval', $tagIds)));
+        }
+
+        return $map;
+    }
+
+    /** @param list<int> $eventIds
+     *  @return array<int, list<int>>
+     */
+    private function fetchOrganizationMap(array $eventIds): array
+    {
+        if ([] === $eventIds) {
+            return [];
+        }
+
+        $tables = ['tl_events_organization', 'tl_calendar_events_organization'];
+
+        foreach ($tables as $table) {
+            try {
+                $rows = $this->connection->executeQuery(
+                    sprintf('SELECT event_id, organization_id FROM %s WHERE event_id IN (?) ORDER BY event_id ASC, organization_id ASC', $table),
+                    [$eventIds],
+                    [ArrayParameterType::INTEGER],
+                )->fetchAllAssociative();
+
+                $map = [];
+
+                foreach ($rows as $row) {
+                    $eventId = (int) ($row['event_id'] ?? 0);
+                    $organizationId = (int) ($row['organization_id'] ?? 0);
+
+                    if ($eventId <= 0 || $organizationId <= 0) {
+                        continue;
+                    }
+
+                    $map[$eventId][] = $organizationId;
+                }
+
+                foreach ($map as $eventId => $organizationIds) {
+                    $map[$eventId] = array_values(array_unique(array_map('intval', $organizationIds)));
+                }
+
+                return $map;
+            } catch (Exception) {
+                continue;
+            }
+        }
+
+        return [];
+    }
+
+    /** @param list<int> $eventIds
+     *  @return array<int, int|null>
+     */
+    private function fetchLocationMap(array $eventIds): array
+    {
+        if ([] === $eventIds) {
+            return [];
+        }
+
+        $rows = $this->connection->executeQuery(
+            'SELECT id, location_id FROM tl_calendar_events WHERE id IN (?)',
+            [$eventIds],
+            [ArrayParameterType::INTEGER],
+        )->fetchAllAssociative();
+
+        $map = [];
+
+        foreach ($rows as $row) {
+            $eventId = (int) ($row['id'] ?? 0);
+
+            if ($eventId <= 0) {
+                continue;
+            }
+
+            $map[$eventId] = null !== ($row['location_id'] ?? null) ? (int) $row['location_id'] : null;
+        }
+
+        return $map;
+    }
+
+    /** @param array<int, int|null> $locationMap
+     *  @return array<int, string>
+     */
+    private function fetchLocationTitleMap(array $locationMap): array
+    {
+        $locationIds = array_values(array_unique(array_filter(array_map('intval', $locationMap), static fn (int $id): bool => $id > 0)));
+
+        if ([] === $locationIds) {
+            return [];
+        }
+
+        $rows = $this->connection->executeQuery(
+            'SELECT id, title FROM tl_location WHERE id IN (?)',
+            [$locationIds],
+            [ArrayParameterType::INTEGER],
+        )->fetchAllAssociative();
+
+        $map = [];
+
+        foreach ($rows as $row) {
+            $locationId = (int) ($row['id'] ?? 0);
+
+            if ($locationId <= 0) {
+                continue;
+            }
+
+            $map[$locationId] = (string) ($row['title'] ?? '');
+        }
+
+        return $map;
+    }
+}

templates/list_default_organisationen.html.twig

@@ -0,0 +1,258 @@
+{% extends '@Contao/block_searchable.html.twig' %}
+
+{% set wrapperAttributes = attrs()
+    .addClass(['ce_table', 'listing'])
+    .mergeWith(wrapperAttributes|default)
+%}
+
+{% block content %}
+
+    {% set legacyTagLabels = {
+        '10': 'Sport',
+        '11': 'Kultur',
+        '12': 'Politik',
+        '13': 'Soziales',
+        '14': 'Freizeit',
+        '15': 'Bildung',
+        '16': 'Religion',
+        '17': 'Natur',
+        '18': 'Gesellschaft'
+    } %}
+
+    {% if searchable %}
+        <div class="list_search">
+            <form method="get">
+                <div class="formbody">
+                    <input type="hidden" name="order_by" value="{{ order_by }}">
+                    <input type="hidden" name="sort" value="{{ sort }}">
+                    {% if per_page %}
+                        <input type="hidden" name="per_page" value="{{ per_page }}">
+                    {% endif %}
+                    <div class="widget widget-select">
+                        <label for="ctrl_search" class="invisible">{{ fields_label }}</label>
+                        <select name="search" id="ctrl_search" class="select">
+                            {{ search_fields|raw }}
+                        </select>
+                    </div>
+                    <div class="widget widget-text">
+                        <label for="ctrl_for" class="invisible">{{ keywords_label }}</label>
+                        <input type="text" name="for" id="ctrl_for" class="text" value="{{ for }}">
+                    </div>
+                    <div class="widget widget-submit">
+                        <button type="submit" class="submit">{{ search_label }}</button>
+                    </div>
+                </div>
+            </form>
+        </div>
+    {% endif %}
+
+    {% if per_page %}
+        <div class="list_per_page">
+            <form method="get">
+                <div class="formbody">
+                    <input type="hidden" name="order_by" value="{{ order_by }}">
+                    <input type="hidden" name="sort" value="{{ sort }}">
+                    <input type="hidden" name="search" value="{{ search }}">
+                    <input type="hidden" name="for" value="{{ for }}">
+                    <div class="widget widget-select">
+                        <label for="ctrl_per_page" class="invisible">{{ per_page_label }}</label>
+                        <select name="per_page" id="ctrl_per_page" class="select">
+                            <option value="10"{% if 10 == per_page %} selected{% endif %}>10</option>
+                            <option value="20"{% if 20 == per_page %} selected{% endif %}>20</option>
+                            <option value="30"{% if 30 == per_page %} selected{% endif %}>30</option>
+                            <option value="50"{% if 50 == per_page %} selected{% endif %}>50</option>
+                            <option value="100"{% if 100 == per_page %} selected{% endif %}>100</option>
+                            <option value="250"{% if 250 == per_page %} selected{% endif %}>250</option>
+                            <option value="500"{% if 500 == per_page %} selected{% endif %}>500</option>
+                        </select>
+                    </div>
+                    <div class="widget widget-submit">
+                        <button type="submit" class="submit">{{ per_page_label }}</button>
+                    </div>
+                </div>
+            </form>
+        </div>
+    {% endif %}
+
+    {% if searchable and for and not tbody|default %}
+        {{ no_results }}
+    {% else %}
+        {% set tagOptions = {} %}
+
+        {% for row in tbody|default([]) %}
+            {% set tagsRaw = row.tag_labels.content|default(row.tags.content|default(''))|striptags %}
+            {% set tagsPrepared = tagsRaw|replace({'&nbsp;': '', '&amp;nbsp;': '', ' ': '', ';': ',', '|': ',', '/': ',', ', ': ',', ' ,': ','}) %}
+            {% set tagParts = tagsPrepared is not empty ? tagsPrepared|split(',') : [] %}
+
+            {% for part in tagParts %}
+                {% set tagValue = part|striptags|replace({'&nbsp;': '', '&amp;nbsp;': '', ' ': ''})|trim %}
+
+                {% if legacyTagLabels[tagValue] is defined %}
+                    {% set tagLabel = legacyTagLabels[tagValue] %}
+                {% elseif tagValue matches '/^\\d+$/' %}
+                    {% set tagLabel = '' %}
+                {% elseif tagValue matches '/^[\\p{L}\\p{N}\\s._,&+\\-\\/]+$/u' %}
+                    {% set tagLabel = tagValue %}
+                {% else %}
+                    {% set tagLabel = '' %}
+                {% endif %}
+
+                {% if tagLabel is not empty %}
+                    {% set tagSlug = tagLabel|lower|replace({'ä': 'ae', 'ö': 'oe', 'ü': 'ue', 'ß': 'ss', ' ': '-', '/': '-', '&': '-', '+': '-', '.': '', ',': '', '(': '', ')': '', '"': '', "'": ''}) %}
+
+                    {% if tagSlug is not empty and tagOptions[tagSlug] is not defined %}
+                        {% set tagOptions = tagOptions|merge({ (tagSlug): tagLabel }) %}
+                    {% endif %}
+                {% endif %}
+            {% endfor %}
+        {% endfor %}
+
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slim-select@3/dist/slimselect.min.css">
+
+        <div id="orgfilters" class="controls filters">
+            <label for="org-tag-filter" class="visually-hidden">Nach Typ filtern</label>
+            <select id="org-tag-filter" class="select" data-placeholder="Typ wählen">
+                <option value="">Alle</option>
+                {% for slug, label in tagOptions %}
+                    <option value="{{ slug }}">{{ label }}</option>
+                {% endfor %}
+            </select>
+            <button type="button" id="org-filter-reset" class="submit" style="display:none;">Filter zurücksetzen</button>
+        </div>
+
+        <div id="org">
+            <div id="org-list">
+                {% for row in tbody|default([]) %}
+                    {% set tagSlugsRaw = row.tag_slugs.content|default('')|trim %}
+                    {% set tagsRaw = row.tag_labels.content|default(row.tags.content|default(''))|striptags %}
+                    {% set tagsPrepared = tagsRaw|replace({'&nbsp;': '', '&amp;nbsp;': '', ' ': '', ';': ',', '|': ',', '/': ',', ', ': ',', ' ,': ','}) %}
+                    {% set tagParts = tagsPrepared is not empty ? tagsPrepared|split(',') : [] %}
+
+                    {% set tagClasses = [] %}
+                    {% set tagSlugs = [] %}
+
+                    {% if tagSlugsRaw is not empty %}
+                        {% for slug in tagSlugsRaw|split(',') %}
+                            {% set cleanedSlug = slug|trim %}
+
+                            {% if cleanedSlug is not empty %}
+                                {% set tagSlugs = tagSlugs|merge([cleanedSlug]) %}
+                                {% set tagClasses = tagClasses|merge(['tag-' ~ cleanedSlug]) %}
+                            {% endif %}
+                        {% endfor %}
+                    {% endif %}
+
+                    {% for part in tagParts if tagSlugsRaw is empty %}
+                        {% set tagValue = part|striptags|replace({'&nbsp;': '', '&amp;nbsp;': '', ' ': ''})|trim %}
+
+                        {% if legacyTagLabels[tagValue] is defined %}
+                            {% set tagLabel = legacyTagLabels[tagValue] %}
+                        {% elseif tagValue matches '/^\\d+$/' %}
+                            {% set tagLabel = '' %}
+                        {% elseif tagValue matches '/^[\\p{L}\\p{N}\\s._,&+\\-\\/]+$/u' %}
+                            {% set tagLabel = tagValue %}
+                        {% else %}
+                            {% set tagLabel = '' %}
+                        {% endif %}
+
+                        {% if tagLabel is not empty %}
+                            {% set tagSlug = tagLabel|lower|replace({'ä': 'ae', 'ö': 'oe', 'ü': 'ue', 'ß': 'ss', ' ': '-', '/': '-', '&': '-', '+': '-', '.': '', ',': '', '(': '', ')': '', '"': '', "'": ''}) %}
+
+                            {% if tagSlug is not empty %}
+                                {% set tagClasses = tagClasses|merge(['tag-' ~ tagSlug]) %}
+                                {% set tagSlugs = tagSlugs|merge([tagSlug]) %}
+                            {% endif %}
+                        {% endif %}
+                    {% endfor %}
+
+                    {% set title = row.title.content|default('') %}
+                    {% set logoUuid = row.logo_uuid.content|default('')|trim %}
+                    {% set lastCol = row|last %}
+
+                    <div class="org-item{% if tagClasses|length %} {{ tagClasses|join(' ') }}{% endif %}"{% if tagSlugs|length %} data-tags="{{ tagSlugs|join(',') }}"{% endif %}>
+                        <div class="wrapper">
+                            {% if logoUuid is not empty %}
+                                <div class="logo">{{ ('{{figure::' ~ logoUuid ~ '}}')|insert_tag_raw }}</div>
+                            {% endif %}
+
+                            {% if title is not empty %}
+                                <div class="title">{{ title|sanitize_html }}</div>
+                            {% endif %}
+
+                            {% if details and lastCol and lastCol.url|default %}
+                                <a class="details" href="{{ lastCol.url }}" title="{{ title|striptags }} - Details"></a>
+                            {% endif %}
+                        </div>
+                    </div>
+                {% endfor %}
+            </div>
+        </div>
+    {% endif %}
+
+    {% if pagination is defined %}
+        {{ pagination|raw }}
+    {% endif %}
+
+    <script src="https://cdn.jsdelivr.net/npm/slim-select@3/dist/slimselect.min.js"></script>
+    <script>
+        (function () {
+            const selectElement = document.querySelector('#org-tag-filter');
+            const resetButton = document.querySelector('#org-filter-reset');
+            const items = Array.from(document.querySelectorAll('#org-list .org-item'));
+
+            if (!selectElement || !items.length || typeof SlimSelect === 'undefined') {
+                return;
+            }
+
+            const slim = new SlimSelect({
+                select: selectElement,
+                settings: {
+                    allowDeselect: true,
+                    showSearch: false,
+                    placeholderText: 'Alle'
+                }
+            });
+
+            const applyFilter = function (selectedTag) {
+                const activeTag = selectedTag || '';
+
+                if (!activeTag) {
+                    items.forEach(function (item) {
+                        item.style.removeProperty('display');
+                    });
+
+                    if (resetButton) {
+                        resetButton.style.display = 'none';
+                    }
+
+                    return;
+                }
+
+                items.forEach(function (item) {
+                    const itemTags = (item.getAttribute('data-tags') || '').split(',').filter(Boolean);
+                    item.style.display = itemTags.includes(activeTag) ? '' : 'none';
+                });
+
+                if (resetButton) {
+                    resetButton.style.display = activeTag ? '' : 'none';
+                }
+            };
+
+            selectElement.addEventListener('change', function () {
+                applyFilter(selectElement.value || '');
+            });
+
+            if (resetButton) {
+                resetButton.addEventListener('click', function () {
+                    slim.setSelected('');
+                    applyFilter('');
+                });
+            }
+
+            if (selectElement.value) {
+                applyFilter(selectElement.value);
+            }
+        })();
+    </script>
+
+{% endblock %}