{% 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 %}