<div class="ffasn-container col-12 border-top border-bottom py-2" id="asn-filter">
    <div class="text-center py-2" data-toggle="collapse" href="#collapseASN" aria-expanded="false" aria-controls="collapseASN">
        <h3 class="mb-0 cursor-pointer">
					<i class="fal fa-filter text-black-50 mr-3"></i>
					[{oxmultilang ident="ASN_FILTER_PRODUCTS"}]
	        <div class="pull-right text-right pr-0"><span class="far fa-angle-down text-darkgrey"></span></div>
				</h3>
    </div>
    <div class="collapse" id="collapseASN">
        <div class="ff-asn">
            <ff-asn align="horizontal" class="row mx-2" unresolved>
                <ff-asn-group class="facet col-12 col-md-4 col-lg-3 mb-2">
                    <div slot="groupCaption" class="groupCaption ">
                        <span class="h4 facet-title hidden-sm-down ml-3">{{group.name}}</span>
                        <span class="far fa-angle-down text-darkgrey ml-3 pull-right mr-2"></span>
                    </div>
                    <ff-asn-group-element>
                        <div slot="selected">
			                    <span class="custom-checkbox d-flex ml-3 p-1">
		                        <input type="checkbox" class="asnCheckbox" checked />
		                        <span class="filterName ml-2 fz-14px font-weight-bold">{{element.name}}</span>
			                    </span>
                        </div>
                        <div slot="unselected">
                    <span class="custom-checkbox d-flex ml-3 p-1">
                        <input type="checkbox" class="asnCheckbox" />
                        <span class="filterName ml-2 fz-14px font-weight-bold">{{element.name}}</span>
                    </span>
                        </div>
                    </ff-asn-group-element>
                </ff-asn-group>

                <ff-asn-group-slider class="facet clearfix">
                    <div slot="groupCaption" class="groupCaption">
                        <p class="h4 facet-title hidden-sm-down">{{group.name}}</p>
                    </div>
                </ff-asn-group-slider>
            </ff-asn>
        </div>
    </div>
</div>
<section class="col-12">
    <ff-filter-cloud class="pull-left pt-3 clearfix w-100" unresolved>
        <span class="fc-header pull-left mr-3 mt-2 p-1">[{oxmultilang ident="ASN_ACTIVE_FILTERS"}]</span>
        <div class="fc-container row">
            <span data-template="filter" class="fc-filter-item mb-2 p-2 col-12 col-md-auto"><span class="fc-filter-item-name"><b>{{group.name}}:</b> {{element.name}}</span> <span class="fc-btn-deselect fas fa-times"></span></span>
        </div>
    </ff-filter-cloud>
</section>
