{% trans_default_domain 'admin' %}

{% set routeParameters = routeParameters ?? app.request.get('_route_params') %}

{{ form_start(filter, {
    attr: {
        'data-action': 'live#action:prevent',
        'data-live-action-param': 'filter'
    }
}) }}
<div class="divide-y divide-gray-200 dark:divide-gray-800">
            {% for section, filterNames in this.filtersGrouped %}
                <div class="py-6 space-y-4 first:pt-0 last:pb-0">
                    {% for filterName in filterNames %}
                        {% set widget = filter.children[filterName] ?? null %}
                        {% if widget and filterName not in routeParameters|keys %}
                            <div>
                                {% if widget.vars.section|default == 'toggles' %}
                                    <div class="flex items-center justify-between">
                                        <label for="{{ widget.vars.id }}" class="text-sm font-medium text-gray-700 dark:text-gray-300">
                                            {{ widget.vars.label|trans }}
                                        </label>
                                        <div class="group relative inline-flex h-5 w-10 shrink-0 items-center justify-center rounded-full outline-offset-2 outline-primary-600 has-focus-visible:outline-2">
                                            <span class="absolute mx-auto h-4 w-9 rounded-full bg-gray-200 inset-ring inset-ring-gray-900/5 transition-colors duration-200 ease-in-out group-has-checked:bg-primary-600 dark:bg-gray-800 dark:inset-ring-white/10"></span>
                                            <span class="absolute left-0 size-5 rounded-full border border-gray-300 bg-white shadow-xs transition-transform duration-200 ease-in-out group-has-checked:translate-x-5 dark:border-gray-600 dark:bg-gray-700"></span>
                                            <input type="checkbox"
                                                   id="{{ widget.vars.id }}"
                                                   name="{{ widget.vars.full_name }}"
                                                   value="{{ widget.vars.value|default('1') }}"
                                                   {% if widget.vars.checked|default(widget.vars.data) %}checked="checked"{% endif %}
                                                   {% for attrname, attrvalue in widget.vars.attr|filter((v, k) => k != 'class') %}
                                                       {{ attrname }}="{{ attrvalue }}"
                                                   {% endfor %}
                                                   class="absolute inset-0 size-full appearance-none focus:outline-hidden cursor-pointer {{ widget.vars.attr.class|default('') }} bg-transparent border-none focus:ring-0 bg-none" />
                                        </div>

                                    </div>
                                {% elseif filterName in ['offerStatus', 'paymentStatus', 'consentStatus', 'attendanceStatus'] %}
                                    <label class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 block">
                                        {{ widget.vars.label|trans }}
                                    </label>
                                    <div class="space-y-2">
                                        {% for child in widget.children %}
                                            <label class="flex items-center justify-between group cursor-pointer">
                                                <div class="flex items-center">
                                                    <input type="checkbox"
                                                           name="{{ child.vars.full_name }}"
                                                           value="{{ child.vars.value }}"
                                                           {% if child.vars.checked %}checked="checked"{% endif %}
                                                           class="size-4 rounded border-gray-300 text-primary-600 focus:ring-primary-600 dark:border-white/10 dark:bg-white/5" />
                                                    <span class="ml-3 text-sm text-gray-700 dark:text-gray-300">{{ child.vars.label|trans }}</span>
                                                </div>
                                                <span class="size-5">
                                                    {% set icon_mapping = {
                                                        offerStatus: {
                                                            draft: ['ph:plus-circle', 'text-orange-600'],
                                                            published: ['ph:check-circle-fill', 'text-green-600'],
                                                            reviewed: ['ph:shield-check', 'text-green-600'],
                                                            finalized: ['ph:check-circle', 'text-green-600'],
                                                            cancelled: ['ph:x-circle-fill', 'text-red-600'],
                                                            completed: ['ph:check-circle-fill', 'text-blue-600'],
                                                        },
                                                        paymentStatus: {
                                                            created: ['ph:plus-circle', 'text-orange-600'],
                                                            paid: ['ph:check-circle-fill', 'text-green-600'],
                                                            abandoned: ['ph:stop-circle', 'text-gray-500'],
                                                            failed: ['ph:x-circle-fill', 'text-red-600'],
                                                        },
                                                        consentStatus: {
                                                            signed: ['ph:check-circle-fill', 'text-green-600'],
                                                            rejected: ['ph:x-circle-fill', 'text-red-600'],
                                                            revoked: ['ph:prohibit', 'text-orange-600'],
                                                        },
                                                        attendanceStatus: {
                                                            confirmed: ['ph:check-circle-fill', 'text-green-600'],
                                                            waiting: ['ph:plus-circle', 'text-orange-600'],
                                                            waitlisted: ['ph:list-numbers', 'text-blue-600'],
                                                            withdrawn: ['ph:user-minus', 'text-gray-500'],
                                                            rejected: ['ph:x-circle-fill', 'text-red-600'],
                                                            participated: ['ph:check-circle', 'text-green-600'],
                                                            noshow: ['ph:user-focus', 'text-red-600'],
                                                            unfulfilled: ['ph:warning-circle', 'text-orange-600'],
                                                        }
                                                    } %}
                                                    {% set icon = icon_mapping[filterName][child.vars.value] ?? null %}
                                                    {% if icon %}
                                                        <span class="{{ icon[1] }}"><twig:ux:icon name="{{ icon[0] }}" class="size-5" /></span>
                                                    {% endif %}
                                                </span>
                                            </label>
                                        {% endfor %}
                                    </div>
                                {% else %}
                                    {{ form_row(widget, {
                                        label_attr: { class: 'text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 block' },
                                        attr: {
                                            class: 'block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6 dark:bg-white/5 dark:text-white dark:ring-white/10 dark:focus:ring-primary-500',
                                        }
                                    }) }}
                                {% endif %}
                            </div>
                        {% endif %}
                    {% endfor %}
                </div>
            {% endfor %}
        </div>
{{ form_end(filter, { render_rest: false }) }}

{% if pagination is defined %}
    <p class="mt-6 text-sm text-gray-500 dark:text-gray-400 text-center"
       data-ferienpass--admin-list-target="totalCount">
        {{ 'list.totalResults'|trans({count: pagination.numResults}) }}
    </p>
{% endif %}
