<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/ApacheSolrForTypo3/Solr/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 panel-collapse collapse" data-facet-name="{facet.name}" data-facet-label="{facet.label}" id="facet{facet.name}">
        <s:facet.options.group.prefix.labelPrefixes options="{facet.options}" length="1" sortBy="alpha">

            <!-- build tabs-->
            <ul class="nav nav-tabs prefixgroup-tabs" role="tablist">
                <f:for each="{prefixes}" iteration="iteration"  as="prefix">
                        <li role="presentation" class="{f:if(condition:'{iteration.index} == 0', then:'active')}"><a href="#tab_{prefix}" aria-controls="tab_{prefix}" role="tab" data-toggle="tab">{prefix}</a></li>
                </f:for>
             </ul>

            <!-- build tab contents -->
            <div class="tab-content">
                <f:for each="{prefixes}" iteration="iteration" as="prefix">
                    {key}
                    <div role="tabpanel" class="tab-pane panel{f:if(condition:'{iteration.index} == 0', then:' active')}" id="tab_{prefix}">
                        <s:facet.options.group.prefix.labelFilter options="{facet.options}" prefix="{prefix}">
                            <div class="list-group">
                                <f:for each="{filteredOptions}" as="option">
                                    <div class="facet-option list-group-item" data-facet-item-value="{option.value}">
                                        <a class="facet solr-ajaxified" href="{s:uri.facet.addFacetItem(facet: facet, facetItem: option)}">{option.label}</a>
                                        <span class="facet-result-count badge">
                                            {option.documentCount}
                                        </span>
                                    </div>
                                </f:for>
                            </div>
                        </s:facet.options.group.prefix.labelFilter>
                    </div>
                </f:for>
            </div>

        </s:facet.options.group.prefix.labelPrefixes>
    </div>
</div>

</html>
