Replace SlimSelect with Tom Select in event filter

contao/dca/tl_module.php

@@ -3,6 +3,7 @@
 declare(strict_types=1);
 
 use Contao\Database;
+use Contao\Controller;
 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';
@@ -157,3 +158,15 @@ $GLOBALS['TL_DCA']['tl_module']['fields']['eventListDomId'] = [
     'eval' => ['includeBlankOption' => true, 'chosen' => true, 'tl_class' => 'w50'],
     'sql' => ['type' => 'string', 'length' => 128, 'default' => ''],
 ];
+
+if (isset($GLOBALS['TL_DCA']['tl_module']['fields']['list_layout'])) {
+    $GLOBALS['TL_DCA']['tl_module']['fields']['list_layout']['options_callback'] = static function (): array {
+        $options = Controller::getTemplateGroup('list_');
+
+        if (!isset($options['list_default_organisationen'])) {
+            $options['list_default_organisationen'] = 'list_default_organisationen';
+        }
+
+        return $options;
+    };
+}

contao/templates/frontend/event_filter.html.twig

@@ -68,12 +68,12 @@
         pointer-events: none;
     }
 
-    #eventfilters .widget-select.active .ss-main {
+    #eventfilters .widget-select.active .ts-control {
         outline: 2px solid currentColor;
         outline-offset: 2px;
     }
 
-    #eventfilters .ss-main:focus-visible {
+    #eventfilters .ts-control:focus-within {
         outline: 2px solid currentColor;
         outline-offset: 2px;
     }
@@ -81,10 +81,14 @@
     #eventfilters .eventfilter-reset[hidden] {
         display: none;
     }
+
+    #eventfilters .ts-dropdown-content {
+        overscroll-behavior: contain;
+    }
 </style>
 
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slim-select@3/dist/slimselect.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/css/tom-select.css">
-<script src="https://cdn.jsdelivr.net/npm/slim-select@3/dist/slimselect.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/js/tom-select.complete.min.js"></script>
 
 <script type="module">
     const filters = document.getElementById('eventfilters');
@@ -117,25 +121,27 @@
     let currentFilter = { type: 'all', value: 'all' };
     let suppressedChangeEvents = 0;
 
-    const initSlimSelect = (selectElement) => {
+    const initTomSelect = (selectElement) => {
-        if (!selectElement || 'undefined' === typeof window.SlimSelect) {
+        if (!selectElement || 'undefined' === typeof window.TomSelect) {
             return null;
         }
 
-        return new window.SlimSelect({
+        return new window.TomSelect(selectElement, {
-            select: selectElement,
+            create: false,
-            settings: {
+            maxItems: 1,
-                showSearch: false,
+            closeAfterSelect: true,
-                allowDeselect: false,
+            allowEmptyOption: true,
-            },
+            searchField: [],
+            controlInput: null,
+            dropdownParent: selectElement.closest('.widget-select') || undefined,
         });
     };
 
-    const tagSlim = initSlimSelect(tagSelect);
+    const tagTom = initTomSelect(tagSelect);
-    const locationSlim = initSlimSelect(locationSelect);
+    const locationTom = initTomSelect(locationSelect);
-    const orgSlim = initSlimSelect(orgSelect);
+    const orgTom = initTomSelect(orgSelect);
 
-    const setSelectValue = (selectElement, slimInstance, value) => {
+    const setSelectValue = (selectElement, tomInstance, value) => {
         if (!selectElement) {
             return;
         }
@@ -147,8 +153,8 @@
         suppressedChangeEvents += 1;
 
         try {
-            if (slimInstance) {
+            if (tomInstance) {
-                slimInstance.setSelected(value);
+                tomInstance.setValue(value, true);
             } else {
                 selectElement.value = value;
             }
@@ -280,8 +286,8 @@
 
         const selectedValue = tagSelect.value;
 
-        setSelectValue(locationSelect, locationSlim, 'all');
+        setSelectValue(locationSelect, locationTom, 'all');
-        setSelectValue(orgSelect, orgSlim, 'all');
+        setSelectValue(orgSelect, orgTom, 'all');
 
         applyFilter(
             selectedValue === 'all'
@@ -297,8 +303,8 @@
 
         const selectedValue = locationSelect.value;
 
-        setSelectValue(tagSelect, tagSlim, 'all');
+        setSelectValue(tagSelect, tagTom, 'all');
-        setSelectValue(orgSelect, orgSlim, 'all');
+        setSelectValue(orgSelect, orgTom, 'all');
 
         applyFilter(
             selectedValue === 'all'
@@ -314,8 +320,8 @@
 
         const selectedValue = orgSelect.value;
 
-        setSelectValue(tagSelect, tagSlim, 'all');
+        setSelectValue(tagSelect, tagTom, 'all');
-        setSelectValue(locationSelect, locationSlim, 'all');
+        setSelectValue(locationSelect, locationTom, 'all');
 
         applyFilter(
             selectedValue === 'all'
@@ -325,12 +331,114 @@
     });
 
     resetButton?.addEventListener('click', () => {
-        setSelectValue(tagSelect, tagSlim, 'all');
+        setSelectValue(tagSelect, tagTom, 'all');
-        setSelectValue(locationSelect, locationSlim, 'all');
+        setSelectValue(locationSelect, locationTom, 'all');
-        setSelectValue(orgSelect, orgSlim, 'all');
+        setSelectValue(orgSelect, orgTom, 'all');
 
         applyFilter({ type: 'all', value: 'all' });
     });
 
+    const getDropdownFromTarget = (target) => {
+        if (!(target instanceof Element)) {
+            return null;
+        }
+
+        return target.closest('.ts-dropdown-content, .ts-dropdown');
+    };
+
+    const getScrollContainer = (targetDropdown) => {
+        if (!targetDropdown) {
+            return null;
+        }
+
+        if (targetDropdown.scrollHeight > targetDropdown.clientHeight) {
+            return targetDropdown;
+        }
+
+        const dropdownContent = targetDropdown.classList.contains('ts-dropdown-content')
+            ? targetDropdown
+            : targetDropdown.querySelector('.ts-dropdown-content');
+
+        if (dropdownContent && dropdownContent.scrollHeight > dropdownContent.clientHeight) {
+            return dropdownContent;
+        }
+
+        return null;
+    };
+
+    const shouldBlockBoundaryScroll = (scrollContainer, delta) => {
+        if (!scrollContainer || delta === 0) {
+            return false;
+        }
+
+        const top = scrollContainer.scrollTop;
+        const height = scrollContainer.clientHeight;
+        const scrollHeight = scrollContainer.scrollHeight;
+
+        const atTop = top <= 0;
+        const atBottom = top + height >= scrollHeight - 1;
+
+        return (atTop && delta < 0) || (atBottom && delta > 0);
+    };
+
+    let lastTouchY = null;
+
+    document.addEventListener('wheel', (event) => {
+        const dropdown = getDropdownFromTarget(event.target);
+        if (!dropdown) {
+            return;
+        }
+
+        const scrollContainer = getScrollContainer(dropdown);
+
+        if (shouldBlockBoundaryScroll(scrollContainer, event.deltaY)) {
+            event.preventDefault();
+        }
+
+        event.stopPropagation();
+    }, { passive: false, capture: true });
+
+    document.addEventListener('touchstart', (event) => {
+        const dropdown = getDropdownFromTarget(event.target);
+        if (!dropdown || event.touches.length === 0) {
+            lastTouchY = null;
+            return;
+        }
+
+        lastTouchY = event.touches[0].clientY;
+    }, { passive: true, capture: true });
+
+    document.addEventListener('touchmove', (event) => {
+        const dropdown = getDropdownFromTarget(event.target);
+        if (!dropdown || event.touches.length === 0 || lastTouchY === null) {
+            return;
+        }
+
+        const scrollContainer = getScrollContainer(dropdown);
+
+        if (!scrollContainer) {
+            return;
+        }
+
+        const currentTouchY = event.touches[0].clientY;
+        const delta = lastTouchY - currentTouchY;
+
+        if (shouldBlockBoundaryScroll(scrollContainer, delta)) {
+            event.preventDefault();
+        }
+
+        event.stopPropagation();
+
+        lastTouchY = currentTouchY;
+    }, { passive: false, capture: true });
+
+    document.addEventListener('touchend', () => {
+        lastTouchY = null;
+    }, { passive: true, capture: true });
+
+    document.addEventListener('touchcancel', () => {
+        lastTouchY = null;
+    }, { passive: true, capture: true });
+
     applyFilter(currentFilter);
 </script>

src/EventListener/OrganizationListingTemplateDataListener.php

@@ -10,12 +10,14 @@ use Contao\Template;
 use Doctrine\DBAL\ArrayParameterType;
 use Doctrine\DBAL\Connection;
 use Doctrine\DBAL\ParameterType;
+use Psr\Log\LoggerInterface;
 
 #[AsHook('parseTemplate', method: 'onParseTemplate')]
 class OrganizationListingTemplateDataListener
 {
     public function __construct(
         private readonly Connection $connection,
+        private readonly ?LoggerInterface $logger = null,
     ) {
     }
 
@@ -49,26 +51,76 @@ class OrganizationListingTemplateDataListener
             return;
         }
 
-        $organizationTagMap = $this->fetchOrganizationTagMap(array_values(array_unique(array_values($rowToOrganizationIdMap))));
+        $organizationIds = array_values(array_unique(array_values($rowToOrganizationIdMap)));
-        $organizationLogoUuidMap = $this->fetchOrganizationLogoUuidMap(array_values(array_unique(array_values($rowToOrganizationIdMap))));
+        $organizationTagMap = $this->fetchOrganizationTagMap($organizationIds);
+        $organizationLogoUuidMap = $this->fetchOrganizationLogoUuidMap($organizationIds);
+
+        $organizationTagLabelMap = [];
+        $rowTagIdsList = [];
+
+        foreach ($organizationTagMap as $tagData) {
+            foreach (($tagData['ids'] ?? []) as $index => $tagId) {
+                $label = trim((string) (($tagData['labels'][$index] ?? '') ?: ''));
+
+                if ('' !== $tagId && '' !== $label && !isset($organizationTagLabelMap[(string) $tagId])) {
+                    $organizationTagLabelMap[(string) $tagId] = $label;
+                }
+            }
+        }
 
         foreach ($rowToOrganizationIdMap as $rowIndex => $organizationId) {
-            $tagData = $organizationTagMap[$organizationId] ?? ['labels' => [], 'slugs' => []];
-            $logoUuid = $organizationLogoUuidMap[$organizationId] ?? '';
-
             if (!isset($tbody[$rowIndex]) || !\is_array($tbody[$rowIndex])) {
                 continue;
             }
 
-            $tbody[$rowIndex]['tag_labels']['content'] = implode(', ', $tagData['labels']);
+            $tagData = $organizationTagMap[$organizationId] ?? ['ids' => [], 'labels' => []];
-            $tbody[$rowIndex]['tag_slugs']['content'] = implode(',', $tagData['slugs']);
+            $logoUuid = $organizationLogoUuidMap[$organizationId] ?? '';
-            $tbody[$rowIndex]['tags']['content'] = implode(', ', $tagData['labels']);
+            $tagIdsCsv = implode(',', $tagData['ids']);
+            $tagLabelsCsv = implode(', ', $tagData['labels']);
+
+            $tbody[$rowIndex]['tag_ids']['content'] = $tagIdsCsv;
+            $tbody[$rowIndex]['tag_labels']['content'] = $tagLabelsCsv;
+            $tbody[$rowIndex]['tags']['content'] = $tagLabelsCsv;
 
             if ('' !== $logoUuid) {
                 $tbody[$rowIndex]['logo_uuid']['content'] = $logoUuid;
             }
         }
 
+        foreach ($tbody as $rowIndex => $row) {
+            if (!\is_array($row)) {
+                $rowTagIdsList[] = '';
+                continue;
+            }
+
+            $organizationId = $rowToOrganizationIdMap[(int) $rowIndex] ?? 0;
+            $rowTagIdsList[] = ($organizationId > 0 && isset($organizationTagMap[$organizationId]))
+                ? implode(',', $organizationTagMap[$organizationId]['ids'] ?? [])
+                : '';
+        }
+
+        if (null !== $this->logger) {
+            $rowsWithoutTagIds = 0;
+
+            foreach ($rowToOrganizationIdMap as $organizationId) {
+                if (!isset($organizationTagMap[$organizationId]) || [] === ($organizationTagMap[$organizationId]['ids'] ?? [])) {
+                    ++$rowsWithoutTagIds;
+                }
+            }
+
+            if ($rowsWithoutTagIds > 0) {
+                $this->logger->warning('Organization listing enrichment found rows without tag IDs.', [
+                    'template' => (string) $template->getName(),
+                    'totalRows' => \count($tbody),
+                    'mappedRows' => \count($rowToOrganizationIdMap),
+                    'rowsWithoutTagIds' => $rowsWithoutTagIds,
+                ]);
+            }
+        }
+
+        $template->organization_tag_label_map = $organizationTagLabelMap;
+        $template->organization_row_tag_ids_list = $rowTagIdsList;
+
         $template->tbody = $tbody;
     }
 
@@ -76,6 +128,10 @@ class OrganizationListingTemplateDataListener
     private function extractOrganizationId(array $row): int
     {
         foreach (['id', 'organization_id', 'org_id'] as $fieldName) {
+            if (isset($row[$fieldName]) && \is_scalar($row[$fieldName]) && ctype_digit((string) $row[$fieldName])) {
+                return (int) $row[$fieldName];
+            }
+
             $value = $this->extractRowFieldContent($row, $fieldName);
 
             if ('' !== $value && ctype_digit($value)) {
@@ -83,27 +139,21 @@ class OrganizationListingTemplateDataListener
             }
         }
 
-        $urlCandidates = [];
-
         foreach ($row as $column) {
             if (!\is_array($column)) {
                 continue;
             }
 
-            if (isset($column['url']) && \is_scalar($column['url'])) {
+            foreach (['url', 'href'] as $urlField) {
-                $urlCandidates[] = (string) $column['url'];
+                if (!isset($column[$urlField]) || !\is_scalar($column[$urlField])) {
-            }
+                    continue;
+                }
 
-            if (isset($column['href']) && \is_scalar($column['href'])) {
+                $organizationId = $this->extractIdFromUrl((string) $column[$urlField]);
-                $urlCandidates[] = (string) $column['href'];
-            }
-        }
 
-        foreach ($urlCandidates as $url) {
+                if ($organizationId > 0) {
-            $organizationId = $this->extractIdFromUrl($url);
+                    return $organizationId;
-
+                }
-            if ($organizationId > 0) {
-                return $organizationId;
             }
         }
 
@@ -113,7 +163,15 @@ class OrganizationListingTemplateDataListener
     /** @param array<string, mixed> $row */
     private function extractRowFieldContent(array $row, string $fieldName): string
     {
-        if (!isset($row[$fieldName]) || !\is_array($row[$fieldName])) {
+        if (!isset($row[$fieldName])) {
+            return '';
+        }
+
+        if (\is_scalar($row[$fieldName])) {
+            return trim((string) $row[$fieldName]);
+        }
+
+        if (!\is_array($row[$fieldName])) {
             return '';
         }
 
@@ -152,7 +210,7 @@ class OrganizationListingTemplateDataListener
     }
 
     /** @param list<int> $organizationIds
-     *  @return array<int, array{labels: list<string>, slugs: list<string>}>
+     *  @return array<int, array{ids: list<string>, labels: list<string>}>
      */
     private function fetchOrganizationTagMap(array $organizationIds): array
     {
@@ -161,11 +219,27 @@ class OrganizationListingTemplateDataListener
         }
 
         $rows = $this->connection->executeQuery(
-            'SELECT r.pid AS organization_id, r.tag_id, t.tag AS label FROM tl_tags_rel r INNER JOIN tl_tags t ON t.id = r.tag_id WHERE r.ptable = ? AND r.field = ? AND r.pid IN (?) ORDER BY r.pid ASC, r.tag_id ASC',
+            'SELECT r.pid AS organization_id, r.tag_id, t.tag AS label
+             FROM tl_tags_rel r
+             INNER JOIN tl_tags t ON t.id = r.tag_id
+             WHERE r.ptable = ? AND r.field = ? AND r.pid IN (?)
+             ORDER BY r.pid ASC, r.tag_id ASC',
             ['tl_organization', 'tags', $organizationIds],
             [ParameterType::STRING, ParameterType::STRING, ArrayParameterType::INTEGER],
         )->fetchAllAssociative();
 
+        if ([] === $rows) {
+            $rows = $this->connection->executeQuery(
+                'SELECT r.pid AS organization_id, r.tag_id, t.tag AS label
+                 FROM tl_tags_rel r
+                 INNER JOIN tl_tags t ON t.id = r.tag_id
+                 WHERE r.ptable = ? AND r.pid IN (?)
+                 ORDER BY r.pid ASC, r.tag_id ASC',
+                ['tl_organization', $organizationIds],
+                [ParameterType::STRING, ArrayParameterType::INTEGER],
+            )->fetchAllAssociative();
+        }
+
         $map = [];
         $seen = [];
 
@@ -174,27 +248,18 @@ class OrganizationListingTemplateDataListener
             $tagId = (int) ($row['tag_id'] ?? 0);
             $label = trim((string) ($row['label'] ?? ''));
 
-            if ($organizationId <= 0 || $tagId <= 0 || '' === $label) {
+            if ($organizationId <= 0 || $tagId <= 0 || '' === $label || isset($seen[$organizationId][$tagId])) {
-                continue;
-            }
-
-            if (isset($seen[$organizationId][$tagId])) {
                 continue;
             }
 
             $seen[$organizationId][$tagId] = true;
+            $map[$organizationId]['ids'][] = (string) $tagId;
             $map[$organizationId]['labels'][] = $label;
-
-            $slug = $this->slugify($label);
-
-            if ('' !== $slug) {
-                $map[$organizationId]['slugs'][] = $slug;
-            }
         }
 
         foreach ($map as $organizationId => $tagData) {
+            $map[$organizationId]['ids'] = array_values(array_unique($tagData['ids'] ?? []));
             $map[$organizationId]['labels'] = array_values(array_unique($tagData['labels'] ?? []));
-            $map[$organizationId]['slugs'] = array_values(array_unique($tagData['slugs'] ?? []));
         }
 
         return $map;
@@ -258,24 +323,4 @@ class OrganizationListingTemplateDataListener
         return '';
     }
 
-    private function slugify(string $value): string
-    {
-        $value = trim(mb_strtolower($value));
-
-        if ('' === $value) {
-            return '';
-        }
-
-        $value = strtr($value, [
-            'ä' => 'ae',
-            'ö' => 'oe',
-            'ü' => 'ue',
-            'ß' => 'ss',
-        ]);
-
-        $value = preg_replace('/[^a-z0-9]+/u', '-', $value) ?? '';
-        $value = trim($value, '-');
-
-        return $value;
-    }
 }

templates/list_default_organisationen.html.twig

@@ -1,258 +0,0 @@
-{% 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 %}