{namespace event=Newland\Toubiz\Events\Neos\ViewHelpers}


<f:render section="{type}Renderer" arguments="{_all}"/>

<f:section name="checkboxesRenderer">
    <f:if condition="{fieldSet.searchable}">
        <f:then>
            <div data-item-filter>
                <!-- search box -->
                <div class="mb-4">
                    <div class="w-full flex items-center bg-white border border-grey-light rounded-sm focus-within:border-secondary hover:border-grey transition-all">
                        <input
                            type="text"
                            data-item-filter.query
                            placeholder="{f:translate(id: 'action.search.{name}', source: 'Views/Filter', package: 'Newland.Toubiz.Events.Neos')}"
                            class="min-w-xs flex-1 appearance-none border-0 py-4 px-3 text-sm text-grey-dark">

                        <div class="flex-no-shrink h-full px-3 text-xl text-secondary">
                            <svg class="c-icon">
                                <use xlink:href="#icon-search" />
                            </svg>
                        </div>
                    </div>
                </div>

                <!-- checkbox list -->
                <ul class="mb-4 list-reset" data-item-filter.item-container="list">
                    <f:render section="checkboxList" arguments="{_all}"/>
                </ul>

                <ul class="list-reset">
                    <li class="mt-2" data-item-filter.show-more>
                        <a href="#" class="text-secondary no-underline">
                            {f:translate(id: 'facets.showMore', package: 'Newland.Toubiz.Poi.Neos', source: 'Views/List')}
                            <svg class="c-icon">
                                <use xlink:href="#icon-angle-down" />
                            </svg>
                        </a>
                    </li>
                    <li class="mt-2" data-item-filter.show-less>
                        <a href="#" class="text-secondary no-underline">
                            {f:translate(id: 'facets.showLess', package: 'Newland.Toubiz.Poi.Neos', source: 'Views/List')}
                            <svg class="c-icon">
                                <use xlink:href="#icon-angle-up" />
                            </svg>
                        </a>
                    </li>
                </ul>
            </div>
        </f:then>
        <f:else>
            <ul class="mb-4 list-reset">
                <f:render section="checkboxList" arguments="{_all}"/>
            </ul>
        </f:else>
    </f:if>
</f:section>

<f:section name="checkboxList">
    <f:for each="{items}" as="item" iteration="iterator">
        <li class="mb-2">
            <label>
                <f:form.checkbox
                    property="{event:filter.name(topic: item)}"
                    additionalAttributes="{
                        'data-toubiz-ajax.name': 'query{event:filter.name(topic: item, dotNotation: false)}'
                    }"
                    value="{item.valueOrIdentifier}"
                    id="{random}__{item.combinedIdentifier}"
                    class="text-grey-dark mr-1"
                    data="{id: item.combinedIdentifier}" />

                {item.title}
            </label>
        </li>
    </f:for>
</f:section>

<f:section name="rangeRenderer">
    <ul class="list-reset">
        <li>
            <div class="mb-2 flex justify-between items-center whitespace-no-wrap">
                <div class="mr-4 flex-none">
                    <h4 class="mt-0 text-sm text-grey-dark">{item.title}</h4>
                </div>
                <div class="flex-none">
                    <span class="text-grey-dark">
                        <span id="target-output-{random}__min">{min * factor}</span>
                        -
                        <span id="target-output-{random}__max">{max * factor}</span>
                    {fieldSet.unit}
                    </span>
                </div>
            </div>
            <div class="mt-2 mx-2">
                <div
                    data-toubiz-range-slider
                    data-toubiz-range-slider-input.min="#target-{random}__min"
                    data-toubiz-range-slider-input.max="#target-{random}__max"
                    data-toubiz-range-slider-outputs.min="#target-output-{random}__min"
                    data-toubiz-range-slider-outputs.max="#target-output-{random}__max"
                    data-toubiz-range-slider-factor="{factor}"
                    data-toubiz-range-slider-step="{steps}">

                </div>
            </div>
            <div class="hidden">
                <f:form.textfield
                    property="{event:filter.name(topic: item, appendValueIfExists: false)}.min"
                    placeholder="{min}"
                    type="number"
                    id="target-{random}__min"
                    additionalAttributes="{
                        min: min,
                        max: max,
                        step: steps,
                        'data-toubiz-ajax.name': 'query{event:filter.name(topic: item, dotNotation: false, appendValueIfExists: false)}[min]',
                        'data-id': '{item.combinedIdentifier}'
                    }"/>

                <f:form.textfield
                    property="{event:filter.name(topic: item, appendValueIfExists: false)}.max"
                    placeholder="{max}"
                    type="number"
                    id="target-{random}__max"
                    additionalAttributes="{
                        min: min,
                        max: max,
                        step: steps,
                        'data-toubiz-ajax.name': 'query{event:filter.name(topic: item, dotNotation: false, appendValueIfExists: false)}[max]',
                        'data-id': '{item.combinedIdentifier}'
                    }"/>

            </div>
        </li>
    </ul>
</f:section>