<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"
>

	<f:variable name="facetOptionLimit">{f:if(condition: '{settings.faceting.limit}', then: '{settings.faceting.limit}', else: 10)}</f:variable>

	<div class="card">
		<div class="card-header facet-label">
				<span class="bi bi-filter"></span>
				<a data-bs-toggle="collapse" href="#facet{facet.name}" role="button" aria-expanded="false" aria-controls="facet{facet.name}">{facet.label}</a>
		</div>
		<ul class="list-group list-group-flush facet-option-list facet-type-options fluidfacet collapse show" data-facet-name="{facet.name}" data-facet-label="{facet.label}" id="facet{facet.name}">
			<f:for each="{facet.options}" as="option" iteration="iteration">
				<li class="list-group-item facet-option {f:if(condition:'!({iteration.index} < {facetOptionLimit})', then:' tx-solr-facet-hidden')}" data-facet-item-value="{option.value}">
					<div class="d-flex justify-content-between">
						<a class="facet solr-ajaxified" href="{s:uri.facet.addFacetItem(facet: facet, facetItem: option)}">{option.label}</a> <span class="facet-result-count badge bg-info">{option.documentCount}</span>
					</div>
				</li>
			</f:for>

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

</html>