<html xmlns="http://www.w3.org/1999/xhtml" lang="en"
      xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
      xmlns:s="http://typo3.org/ns/WapplerSystems/Meilisearch/ViewHelpers"
      data-namespace-typo3-fluid="true"
>

    <div class="panel">
        <div class="panel-heading">
            <h3 class="facet-label panel-title">
                <span class="glyphicon glyphicon-filter"></span>
                <a data-toggle="collapse" data-parent="#facet-accordion{facet.name}" href="#facet{facet.name}">{facet.label}</a>
            </h3>
        </div>
        <div class="facet-option-list facet-type-options fluidfacet list-group panel-collapse collapse" data-facet-name="{facet.name}" data-facet-label="{facet.label}" id="facet{facet.name}">
            <f:for each="{facet.options}" as="option" iteration="iteration">
                <f:if condition="{option.selected}">
                    <f:then>
                        <div class="list-group-item facet-option{f:if(condition:'{iteration.index} > 9', then:' tx-meilisearch-facet-hidden')}" data-facet-item-value="{option.value}">
                            <a class="facet meilisearch-ajaxified active" href="{s:uri.facet.removeFacetItem(facet: facet, facetItem: option)}">{option.label}</a>
                            <span class="facet-result-count badge">{option.documentCount}</span>
                        </div>
                    </f:then>
                    <f:else>
                        <div class="list-group-item facet-option{f:if(condition:'{iteration.index} > 9', then:' tx-meilisearch-facet-hidden')}" data-facet-item-value="{option.value}">
                            <a class="facet meilisearch-ajaxified" href="{s:uri.facet.addFacetItem(facet: facet, facetItem: option)}">{option.label}</a>
                            <span class="facet-result-count badge">{option.documentCount}</span>
                        </div>
                    </f:else>
                </f:if>

            </f:for>
            <f:if condition="{facet.options -> f:count()} > 10">
                <div class="list-group-item">
                    <a href="#" class="tx-meilisearch-facet-show-all" data-label-more="{s:translate(key:'faceting_showMore', extensionName:'meilisearch')}" data-label-less="{s:translate(key:'faceting_showFewer', extensionName:'meilisearch')}">
                        <s:translate key="faceting_showMore" extensionName="meilisearch">Show more</s:translate>
                    </a>
                </div>
            </f:if>
        </div>
    </div>
</html>