[{if $oView->d3HasjQuerySlider()}]
    [{block name="d3_cfg_extsearch_alist_jqsliderscript"}]
        [{include file="d3_ext_search_slider.tpl"}]
        [{assign var="sCssInc" value=$oViewConf->getModuleUrl('d3_extsearch', 'out/src/css/d3_ext_search_slider.css')}]
        [{oxstyle include=$sCssInc}]
    [{/block}]
[{/if}]

[{block name="d3_cfg_extsearch_alist_filters"}]
    <form action="[{$oViewConf->getSelfActionLink()}]" method="post" id="d3searchfilterform" autocomplete="off">
        [{$oViewConf->getHiddenSid()}]
        <input type="hidden" name="cl" value="[{$oViewConf->getActiveClassName()}]">
        <input type="hidden" name="searchparam" value="[{$oView->getSearchParamForHtml()}]">
        <input type="hidden" name="fnc" value="">
        [{foreach from=$oView->getNavigationParams() key="keyname" item="value"}]
            [{if $keyname != 'searchcnid' && $keyname != 'searchvendor' && $keyname != 'searchmanufacturer'}]
                <input type="hidden" name="[{$keyname}]" value="[{$value}]">
            [{/if}]
        [{/foreach}]
        <input type="hidden" name="isextsearch" value="alist">
        [{assign var="d3HasFilter" value=false}]

        <div class="listFilter js-fnSubmit clear">
            [{block name="d3_inc_ext_search__filter"}]

                [{if $oView->d3getCategoryList()|count || $sSelectedCategoryId}]

                    [{oxscript add="function toggleMultiCategory(blChecked) {
                        if (blChecked) {
                            document.getElementById('d3searchcategory__multi').style.display = 'block';
                            document.getElementById('searchcategory').style.display = 'none';
                            document.getElementById('d3searchcategory__multiselector').style.display = 'none';
                        }
                    }"}]

                    [{block name="d3_inc_ext_search__filter_category"}]
                        <div class="item category">
                            <label for="searchcategory">
                                [{oxmultilang ident="D3_EXTSEARCH_EXT_CATEGORIES"}]
                            </label><br>
                            <SELECT id="searchcategory" name="searchcnid" onchange="d3_extsearch_popup.popup.load(); this.form.submit();">
                                [{if $sSelectedCategoryId}]
                                    <OPTION class="desc" value="">[{oxmultilang ident="D3_EXTSEARCH_EXT_SEARCHINCATEGORIES"}]</OPTION>
                                    <OPTION value="[{$sSelectedCategoryId}]" selected="selected">[{$sSelectedCategory}]</OPTION>
                                [{else}]
                                    <OPTION class="desc" value="" selected="selected">[{oxmultilang ident="D3_EXTSEARCH_EXT_CHOOSECAT"}]</OPTION>
                                    [{foreach from=$oView->d3getCategoryList() item="category"}]
                                        <OPTION value="[{$category->getId()}]">[{$category->oxcategories__oxtitle->getRawValue()}][{if $category->getFieldData('counter')}] ([{$category->getFieldData('counter')}])[{/if}]</OPTION>
                                    [{/foreach}]
                                [{/if}]
                            </SELECT>

                            <div id="d3searchcategory__multi" style="display: none;">
                                [{foreach from=$oView->d3getCategoryList() name=attrvalues key=valuekey item=oAttrValue}]
                                    <input name="d3searchcategorymulti[[{$oAttrValue->getId()}]]" type="hidden" value="">
                                    <input name="d3searchcategorymulti[[{$oAttrValue->getId()}]]" type="checkbox" value="[{$oAttrValue->getId()}]" id="cb[{$key}][{$oAttrValue->getId()}]" [{if $oAttrValue->selected || $oAttrValue->getId() == $sSelectedCategoryId}] checked[{/if}]>
                                    <label for="cb[{$key}][{$oAttrValue->getId()}]">
                                        [{$oAttrValue->getTitle()}] [{if $oAttrValue->getFieldData('counter')}]([{$oAttrValue->getFieldData('counter')}])[{/if}]
                                    </label><br>
                                [{/foreach}]
                                <button type="submit" class="submitButton largeButton" onclick="d3_extsearch_popup.popup.load();">[{oxmultilang ident="D3_EXTSEARCH_EXT_ASSIGNFILTER"}]</button>

                                <button id="d3searchcategory__multiclear__[{$sIdKey}]" type="submit" class="submitButton largeButton" onclick="d3_extsearch_popup.popup.load();">[{oxmultilang ident="D3_EXTSEARCH_EXT_UNASSIGNFILTER"}]</button>
                                [{oxscript add="$('#d3searchcategory__multiclear__$sIdKey').click(function(){
                                    $(this).parent().children('input:checkbox').each(function() {
                                        $(this).removeAttr('checked');
                                    });
                                });"}]
                            </div>

                            <div id="d3searchcategory__multiselector">
                                <input type="checkbox" name="d3searchcategorymultiselector" id="d3searchcategorymultiselector" onclick="toggleMultiCategory(this.checked);">
                                <label for="d3searchcategorymultiselector">
                                    [{assign var="categorytranslation" value="CATEGORY"|oxmultilangassign}]
                                    [{$oView->d3GetMultipleSelectionTranslation($categorytranslation)}]
                                </label>
                            </div>

                            [{if $oView->d3CategoryFilterUseMultipleValues()}]
                                [{assign var="sToggleScript" value="toggleMultiCategory(true); document.getElementById('d3searchcategorymultiselector').checked = 'checked';"}]
                                [{oxscript add=$sToggleScript}]
                            [{/if}]
                        </div>
                        [{assign var="d3HasFilter" value=true}]
                    [{/block}]
                [{/if}]

                [{if $oView->d3getVendorList()|count || $sSelectedVendorId}]

                    [{oxscript add="function toggleMultiVendor(blChecked) {
                        if (blChecked) {
                            document.getElementById('d3searchvendor__multi').style.display = 'block';
                            document.getElementById('searchvendor').style.display = 'none';
                            document.getElementById('d3searchvendor__multiselector').style.display = 'none';
                        }
                    }"}]

                    [{block name="d3_inc_ext_search__filter_vendor"}]
                        <div class="item vendor">
                            <label for="searchvendor">
                                [{oxmultilang ident="D3_EXTSEARCH_EXT_VENDORS"}]
                            </label><br>
                            <SELECT id="searchvendor" name="searchvendor" onchange="d3_extsearch_popup.popup.load(); this.form.submit();">
                                [{if $sSelectedVendorId}]
                                    <OPTION class="desc" value="">[{oxmultilang ident="D3_EXTSEARCH_EXT_SEARCHINVENDORS"}]</OPTION>
                                    <OPTION value="[{$sSelectedVendorId}]" selected="selected">[{$sSelectedVendor}]</OPTION>
                                [{else}]
                                    <OPTION class="desc" value="" selected="selected">[{oxmultilang ident="D3_EXTSEARCH_EXT_CHOOSEVENDOR"}]</OPTION>
                                    [{foreach from=$oView->d3getVendorList() item="vendor"}]
                                        <OPTION value="[{$vendor->getId()}]">[{$vendor->oxvendor__oxtitle->getRawValue()}][{if $vendor->getFieldData('counter')}] ([{$vendor->getFieldData('counter')}])[{/if}]</OPTION>
                                    [{/foreach}]
                                [{/if}]
                            </SELECT>

                            <div id="d3searchvendor__multi" style="display: none;">
                                [{foreach from=$oView->d3getVendorList() name=attrvalues key=valuekey item=oAttrValue}]
                                    <input name="d3searchvendormulti[[{$oAttrValue->getId()}]]" type="hidden" value="">
                                    <input name="d3searchvendormulti[[{$oAttrValue->getId()}]]" type="checkbox" value="[{$oAttrValue->getId()}]" id="cb[{$key}][{$oAttrValue->getId()}]" [{if $oAttrValue->selected || $oAttrValue->getId() == $sSelectedVendorId}] checked[{/if}]>
                                    <label for="cb[{$key}][{$oAttrValue->getId()}]">
                                        [{$oAttrValue->getTitle()}] [{if $oAttrValue->getFieldData('counter')}]([{$oAttrValue->getFieldData('counter')}])[{/if}]
                                    </label><br>
                                [{/foreach}]
                                <button type="submit" class="submitButton largeButton" onclick="d3_extsearch_popup.popup.load();">[{oxmultilang ident="D3_EXTSEARCH_EXT_ASSIGNFILTER"}]</button>

                                <button id="d3searchvendor__multiclear__[{$sIdKey}]" type="submit" class="submitButton largeButton" onclick="d3_extsearch_popup.popup.load();">[{oxmultilang ident="D3_EXTSEARCH_EXT_UNASSIGNFILTER"}]</button>
                                [{oxscript add="$('#d3searchvendor__multiclear__$sIdKey').click(function(){
                                    $(this).parent().children('input:checkbox').each(function() {
                                        $(this).removeAttr('checked');
                                    });
                                });"}]
                            </div>

                            <div id="d3searchvendor__multiselector">
                                <input type="checkbox" name="d3searchvendormultiselector" id="d3searchvendormultiselector" onclick="toggleMultiVendor(this.checked);">
                                <label for="d3searchvendormultiselector">
                                    [{assign var="vendortranslation" value="VENDOR"|oxmultilangassign}]
                                    [{$oView->d3GetMultipleSelectionTranslation($vendortranslation)}]
                                </label>
                            </div>

                            [{if $oView->d3VendorFilterUseMultipleValues()}]
                                [{assign var="sToggleScript" value="toggleMultiVendor(true); document.getElementById('d3searchvendormultiselector').checked = 'checked';"}]
                                [{oxscript add=$sToggleScript}]
                            [{/if}]
                        </div>
                        [{assign var="d3HasFilter" value=true}]
                    [{/block}]
                [{/if}]

                [{if $oView->d3getManufacturerList()|count || $sSelectedManufacturerId}]

                    [{oxscript add="function toggleMultiManufacturer(blChecked) {
                        if (blChecked) {
                            document.getElementById('d3searchmanufacturer__multi').style.display = 'block';
                            document.getElementById('searchmanufacturer').style.display = 'none';
                            document.getElementById('d3searchmanufacturer__multiselector').style.display = 'none';
                        }
                    }"}]

                    [{block name="d3_inc_ext_search__filter_manufacturer"}]
                        <div class="item manufacturer">
                            <label for="searchmanufacturer">
                                [{oxmultilang ident="D3_EXTSEARCH_EXT_MANUFACTURERS"}]
                            </label><br>
                            <SELECT id="searchmanufacturer" name="searchmanufacturer" onchange="d3_extsearch_popup.popup.load(); this.form.submit();">
                                [{if $sSelectedManufacturerId}]
                                    <OPTION class="desc" value="">[{oxmultilang ident="D3_EXTSEARCH_EXT_SEARCHINMANUFACTURERS"}]</OPTION>
                                    <OPTION value="[{$sSelectedManufacturerId}]" selected="selected">[{$sSelectedManufacturer}]</OPTION>
                                [{else}]
                                    <OPTION class="desc" value="" selected="selected">[{oxmultilang ident="D3_EXTSEARCH_EXT_CHOOSEMANUFACTURER"}]</OPTION>
                                    [{foreach from=$oView->d3getManufacturerList() item="manufacturer"}]
                                        <OPTION value="[{$manufacturer->getId()}]">[{$manufacturer->oxmanufacturers__oxtitle->getRawValue()}][{if $manufacturer->getFieldData('counter')}] ([{$manufacturer->getFieldData('counter')}])[{/if}]</OPTION>
                                    [{/foreach}]
                                [{/if}]
                            </SELECT>

                            <div id="d3searchmanufacturer__multi" style="display: none;">
                                [{foreach from=$oView->d3getManufacturerList() name=attrvalues key=valuekey item=oAttrValue}]
                                    <input name="d3searchmanufacturermulti[[{$oAttrValue->getId()}]]" type="hidden" value="">
                                    <input name="d3searchmanufacturermulti[[{$oAttrValue->getId()}]]" type="checkbox" value="[{$oAttrValue->getId()}]" id="cb[{$key}][{$oAttrValue->getId()}]" [{if $oAttrValue->selected || $oAttrValue->getId() == $sSelectedManufacturerId}] checked[{/if}]>
                                    <label for="cb[{$key}][{$oAttrValue->getId()}]">
                                        [{$oAttrValue->getTitle()}] [{if $oAttrValue->getFieldData('counter')}]([{$oAttrValue->getFieldData('counter')}])[{/if}]
                                    </label><br>
                                [{/foreach}]
                                <button type="submit" class="submitButton largeButton" onclick="d3_extsearch_popup.popup.load();">[{oxmultilang ident="D3_EXTSEARCH_EXT_ASSIGNFILTER"}]</button>

                                <button id="d3searchmanufacturer__multiclear__[{$sIdKey}]" type="submit" class="submitButton largeButton" onclick="d3_extsearch_popup.popup.load();">[{oxmultilang ident="D3_EXTSEARCH_EXT_UNASSIGNFILTER"}]</button>
                                [{oxscript add="$('#d3searchmanufacturer__multiclear__$sIdKey').click(function(){
                                    $(this).parent().children('input:checkbox').each(function() {
                                        $(this).removeAttr('checked');
                                    });
                                });"}]
                            </div>

                            <div id="d3searchmanufacturer__multiselector">
                                <input type="checkbox" name="d3searchmanufacturermultiselector" id="d3searchmanufacturermultiselector" onclick="toggleMultiManufacturer(this.checked);">
                                <label for="d3searchmanufacturermultiselector">
                                    [{assign var="manufacturertranslation" value="MANUFACTURERS"|oxmultilangassign}]
                                    [{$oView->d3GetMultipleSelectionTranslation($manufacturertranslation)}]
                                </label>
                            </div>

                            [{if $oView->d3ManufacturerFilterUseMultipleValues()}]
                                [{assign var="sToggleScript" value="toggleMultiManufacturer(true); document.getElementById('d3searchmanufacturermultiselector').checked = 'checked';"}]
                                [{oxscript add=$sToggleScript}]
                            [{/if}]
                        </div>
                        [{assign var="d3HasFilter" value=true}]
                    [{/block}]
                [{/if}]

                [{oxscript add="function toggleMultiAttrib(blChecked, sId) {
                        if (blChecked) {
                            document.getElementById('d3searchattrib__multi__' + sId).style.display = 'block';
                            document.getElementById('d3searchattrib__' + sId).style.display = 'none';
                            document.getElementById('d3searchattrib__multiselector__' + sId).style.display = 'none';
                        }
                    }"}]

                [{if $oView->d3GetAttributeList()}]
                    [{foreach from=$oView->d3GetAttributeList() name=search key=key item=oAttribute}]
                        [{assign var="sIdKey" value=$key|replace:".":""}]
                        [{block name="d3_inc_ext_search__filter_attribute"}]
                            <div class="item attribute" id="atid_[{$key}]">
                                <label for="d3searchattrib__[{$key}]">
                                    [{$oAttribute->title}]:
                                </label><br>
                                <SELECT id="d3searchattrib__[{$key}]" name="d3searchattrib[[{$key}]]" onchange="d3_extsearch_popup.popup.load(); this.form.submit();">
                                    [{if $oAttribute->selected}]
                                        <OPTION class="desc" value="[{$oView->d3GetDeselectValue()}]">[{oxmultilang ident="D3_EXTSEARCH_EXT_ATTRIBSDESELECT1"}] [{$oAttribute->title}] [{oxmultilang ident="D3_EXTSEARCH_EXT_ATTRIBSDESELECT2"}]</OPTION>
                                    [{else}]
                                        <OPTION class="desc" value="" selected="selected">[{oxmultilang ident="D3_EXTSEARCH_EXT_ATTRIBSNOSELECTION1"}] [{$oAttribute->title}] [{oxmultilang ident="D3_EXTSEARCH_EXT_ATTRIBSNOSELECTION2"}]</OPTION>
                                    [{/if}]
                                    [{foreach from=$oAttribute->_aList name=attrvalues key=valuekey item=oAttrValue}]
                                        <OPTION class="[{if $oAttrValue->highlighted}]highlight [{/if}]" value="[{$oAttrValue->rawvalue}]" [{if $oAttrValue->selected}] selected[{/if}] [{if false == $oAttrValue->isSelectable}] disabled[{/if}]>[{$oAttrValue->value}] [{if $oAttrValue->count}]([{$oAttrValue->count}])[{/if}]</OPTION>
                                    [{/foreach}]
                                </SELECT>

                                <div id="d3searchattrib__multi__[{$key}]" style="display: none;">
                                    [{foreach from=$oAttribute->_aList name=attrvalues key=valuekey item=oAttrValue}]
                                        <input name="d3searchattribmulti[[{$key}]][[{$oAttrValue->rawvalue}]]" type="hidden" value="[{$oView->d3GetDeselectValue()}]">
                                        <input name="d3searchattribmulti[[{$key}]][[{$oAttrValue->rawvalue}]]" type="checkbox" value="[{$oAttrValue->rawvalue}]" id="cb[{$key}][{$oAttrValue->rawvalue}]" [{if $oAttrValue->selected}] checked[{/if}] [{if false == $oAttrValue->isSelectable}] disabled[{/if}]>
                                        <label for="cb[{$key}][{$oAttrValue->rawvalue}]">
                                            [{$oAttrValue->value}] [{if $oAttrValue->count}]([{$oAttrValue->count}])[{/if}]
                                        </label><br>
                                    [{/foreach}]
                                    <button type="submit" class="submitButton largeButton" onclick="d3_extsearch_popup.popup.load();">[{oxmultilang ident="D3_EXTSEARCH_EXT_ASSIGNFILTER"}]</button>

                                    <button id="d3searchattrib__multiclear__[{$sIdKey}]" type="submit" class="submitButton largeButton" onclick="d3_extsearch_popup.popup.load();">[{oxmultilang ident="D3_EXTSEARCH_EXT_UNASSIGNFILTER"}]</button>
                                    [{oxscript add="$('#d3searchattrib__multiclear__$sIdKey').click(function(){
                                            $(this).parent().children('input:checkbox').each(function() {
                                                $(this).removeAttr('checked');
                                            });
                                        });"}]
                                </div>

                                <div id="d3searchattrib__multiselector__[{$key}]">
                                    <input type="checkbox" name="d3searchattribmultiselector[[{$key}]]" id="d3searchattribmultiselector[[{$key}]]" onclick="toggleMultiAttrib(this.checked, '[{$key}]');">
                                    <label for="d3searchattribmultiselector[[{$key}]]">
                                        [{$oView->d3GetMultipleSelectionTranslation($oAttribute->title)}]
                                    </label>
                                </div>

                                [{if $oView->d3AttributeFilterUseMultipleValues($key)}]
                                    [{assign var="sToggleScript" value="toggleMultiAttrib(true, '"|cat:$key|cat:"'); document.getElementById('d3searchattribmultiselector["|cat:$key|cat:"]').checked = 'checked';"}]
                                    [{oxscript add=$sToggleScript}]
                                [{/if}]
                            </div>
                            [{assign var="d3HasFilter" value=true}]
                        [{/block}]
                    [{/foreach}]
                [{/if}]

                [{if $oView->d3getPriceSteps() || $sSelectedPriceStep}]
                    [{block name="d3_inc_ext_search__filter_price"}]
                        [{assign var="currency" value=$oView->getActCurrency()}]
                        <div class="item priceselector">
                            <label for="priceselector">
                                [{oxmultilang ident="D3_EXTSEARCH_EXT_PRICECATS"}]:
                            </label><br>
                            [{if $oView->d3HasjQuerySlider()}]
                                <div style="text-align: center; display: none;" id="d3extsearchpriceinfo">
                                        <span id="d3extsearch_priceinfomin">
                                            [{$oView->d3GetPriceSliderInfoMinValue()}]
                                        </span> [{$currency->sign}] - <span id="d3extsearch_priceinfomax">
                                            [{$oView->d3GetPriceSliderInfoMaxValue()}]
                                        </span> [{$currency->sign}]</div>
                                <div style="display: block;" id="d3extsearchpricefields">
                                    <input type="hidden" name="d3psov[min]" value="[{$oView->d3GetPriceSliderOriginalMinValue()}]">
                                    <input type="hidden" name="d3psov[max]" value="[{$oView->d3GetPriceSliderOriginalMaxValue()}]">
                                    <input size="10" maxlength="20" type="text" name="priceselector[min]" value="[{$oView->d3GetPriceSliderInputMinValue()}]" id="d3extsearch_pricefieldmin" style="width: 50px;"> [{$currency->sign}] -
                                    <input size="10" maxlength="20" type="text" name="priceselector[max]" value="[{$oView->d3GetPriceSliderInputMaxValue()}]" id="d3extsearch_pricefieldmax" style="width: 50px;"> [{$currency->sign}]
                                </div>
                                <script type="text/javascript">document.getElementById('d3extsearchpriceinfo').style.display = 'block'; document.getElementById('d3extsearchpricefields').style.display = 'none';</script>
                                <div id="d3extsearch_priceslider" class="ui-slider">
                                    <div class="ui-slider-handle" id="d3extsearch_priceslider1"></div>
                                    <div class="ui-slider-handle" id="d3extsearch_priceslider2" style="left:230px;"></div>
                                </div>
                            [{else}]
                                <SELECT id="priceselector" name="priceselector" onchange="d3_extsearch_popup.popup.load(); this.form.submit();">
                                    <OPTION value="[{$sSelectedPriceStep}]" class="desc" selected="selected">[{oxmultilang ident="D3_EXTSEARCH_EXT_CHOOSEPRICE"}]</OPTION>
                                    [{foreach from=$oView->d3getPriceSteps() item="price"}]
                                        <OPTION value="[{$price->addParam}]">[{oxmultilang ident="D3_EXTSEARCH_EXT_PRICEFROM"}] [{$price->iFMin}] [{$currency->sign}] [{oxmultilang ident="D3_EXTSEARCH_EXT_PRICETO"}] [{$price->iFMax}] [{$currency->sign}][{if $price->iCount != ''}] ([{$price->iCount}])[{/if}]</OPTION>
                                    [{/foreach}]
                                    [{if $sSelectedPriceStep}]
                                        <OPTION value="" class="desc">[{oxmultilang ident="D3_EXTSEARCH_EXT_DESELECTPRICE"}]</OPTION>
                                    [{/if}]
                                </SELECT>
                            [{/if}]
                        </div>
                        [{assign var="d3HasFilter" value=true}]
                    [{/block}]
                [{/if}]

                <noscript>
                    <div class="fullitem">
                            <span class="btn">
                                <input type="submit" value="[{oxmultilang ident="D3_EXTSEARCH_EXT_START_SEARCH"}]">
                            </span>
                    </div>
                </noscript>

                [{if $d3HasFilter}]
                    [{block name="d3_inc_ext_search__filter_clear"}]
                        <div class="fullitem">
                            <button type="submit" class="submitButton largeButton" onclick="document.getElementById('d3searchfilterform').isextsearch.value = false; document.getElementById('d3searchfilterform').fnc.value = 'd3ClearFilter'; d3_extsearch_popup.popup.load();">[{oxmultilang ident="D3_EXTSEARCH_EXT_CLEARFILTER"}]</button>
                        </div>
                    [{/block}]
                [{/if}]
            [{/block}]
        </div>
    </form>
[{/block}]