{namespace poi=Newland\Toubiz\Poi\Neos\ViewHelpers}

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

<f:section name="checkboxesRenderer">
    <f:if condition="{fieldSet.searchable}">
        <f:then>
            <div data-item-filter>
                <input type="text" class="mt-4" style="display: none" data-item-filter.query />
                <ul class="mt-4 list-reset" data-item-filter.item-container="list">
                    <f:render section="checkboxList" arguments="{_all}" />
                </ul>
                <ul class="list-reset">
                    <li data-item-filter.show-more style="display: none">
                        <a href="#">SHOW MORE</a>
                    </li>
                    <li data-item-filter.show-less style="display: none">
                        <a href="#">SHOW LESS</a>
                    </li>
                </ul>

                <div class="fixed pin flex justify-center items-center z-40" style="display: none;" data-item-filter.popup>
                    <div class="absolute pin bg-black opacity-50 z-1" data-item-filter.show-less></div>
                    <div class="p-6 z-50 bg-white relative">
                        <button class="absolute pin-t pin-r text-grey-dark p-2" type="button" data-item-filter.show-less>
                            &#x2a2f;
                        </button>
                        <div class="mb-4">
                            <input  type="text"
                                    placeholder="Kategorie suchen"
                                    style="display: none;"
                                    data-item-filter.query
                                    class="shadow appearance-none border border-grey-light rounded w-full py-2 px-3 bg-white text-grey-dark">
                        </div>
                        <ul class="list-reset" data-item-filter.item-container="popup"></ul>
                    </div>
                </div>
            </div>
        </f:then>
        <f:else>
            <ul class="mt-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">
        <li class="flex mt-2">
            <f:form.checkbox property="{poi:filter.name(topic: item, subPath: { attribute: 'in' })}"
                             additionalAttributes="{
                                 'data-toubiz-ajax.name': 'query{poi:filter.name(topic: item, subPath: { attribute: \'in\' }, dotNotation: false)}'
                             }"
                             value="{item.value}"
                             id="{random}__{item.identifier}"
                             class="rounded py-2 px-3 text-grey-dark flex-none mr-2"
                             data="{id: '{nodeIdentifier}_{item.identifier}'}"/>
            <label for="{random}__{item.identifier}" class="flex-1">
                {item.title}
            </label>
        </li>
    </f:for>
</f:section>

<f:section name="rangeRenderer">

    <div class="flex justify-between items-center">
        <div class="flex-none">
            <h4 class="mt-0 text-sm text-grey-dark">{item.title}</h4>
        </div>
        <div class="flex-none">
            <span class="text-grey-dark">{fieldSet.min} - {fieldSet.max} {fieldSet.unit}</span>
        </div>
    </div>
    <div class="mt-2">
        <div data-toubiz-range-slider
             data-toubiz-range-slider-options='{"start":[0, 500],"range":{"min":[{fieldSet.min}],"max":[{fieldSet.max}]},"step":{fieldSet.steps},"connect":[false,true,false]}'
             data-toubiz-range-slider-bind-input.0="#target-input-{random}__0"
             data-toubiz-range-slider-bind-input.1="#target-input-{random}__1">
        </div>
        <div class="mt-6 flex">
            <f:form.textfield property="{poi:filter.name(topic: item)}.min"
                              placeholder="{fieldSet.min}"
                              type="number"
                              id="target-input-{random}__0"
                              data="{id: '{nodeIdentifier}_{item.identifier}'}"
                              additionalAttributes="{
                                  min: fieldSet.min,
                                  max: fieldSet.max,
                                  steps: fieldSet.steps,
                                  'data-toubiz-ajax.name': 'query{poi:filter.name(topic: item, dotNotation: false)}[min]'
                              }"/>
            <f:form.textfield property="{poi:filter.name(topic: item)}.max"
                              placeholder="{fieldSet.max}"
                              type="number"
                              data="{id: '{nodeIdentifier}_{item.identifier}'}"
                                  id="target-input-{random}__1"
                                  additionalAttributes="{
                                  min: fieldSet.min,
                                  max: fieldSet.max,
                                  steps: fieldSet.steps,
                                  'data-toubiz-ajax.name': 'query{poi:filter.name(topic: item, dotNotation: false)}[max]'
                              }"/>

        </div>

    </div>

</f:section>