<div class="px-fiels-wrapper">
	 
	<label class="px-filter-label-mobile"><span>{{pluginSettings.generalSettings.writing.filter}}</span></label>

	 <div class="px-field-wrapper-container">

		<span class="lscf-administrator-label" ng-if="actionSettings.initFieldsDraggable == 1">Drag to order fields</span>

		<div class="lascf-reset-filter" ng-if="pluginSettings.filterSettings.reset_button.position == 'top' && 1 == pluginSettings.filterSettings.reset_button.status ">
			<label ng-click="reset_filter()">{{pluginSettings.filterSettings.reset_button.name}}</label>
		</div>

		<div ng-repeat="field in filterFieldsTemplate.fields" 
			class="lscf-filter-field"  
			ng-class="{ 'lscf-large-field': field.group_type == 'additional_fields' || field.tax.display_as == 'px_radio_box' || field.tax.display_as == 'px_check_box' || field.display_as == 'px_radio_box' || field.display_as == 'px_check_box' }" 
			data-index="{{$index}}" >

			<div ng-switch on="field.group_type">
				
				<div ng-switch-when="additional_fields">

					<div ng-switch on="field.type">
				
						<div ng-switch-when="search"  class="pxSearchField">
						
							<div class="lscf-sidebar-heading">{{field.name}}</div>

							<input type="text" data-search-type="general-search" ajax-search ng-class="{ 'px-focus' : pxsearch != '' && pxsearch != undefined }" ng-model="pxsearch" />
							
							<hr class="silver"/> 
							
						</div>
						
						<div ng-switch-when="woo-search-default"  class="pxSearchField">
						
							<div class="lscf-sidebar-heading">{{field.name}}</div>
							
							<input data-search-type="general-search" type="text" ajax-search ng-class="{ 'px-focus' : pxsearch != '' && pxsearch != undefined }" ng-model="pxsearch" />

							<hr class="silver"/> 
							
						</div>

						<div ng-switch-when="woo-search-sku"  class="pxSearchField">
						
							<div class="lscf-sidebar-heading">{{field.name}}</div>


							<input type="text" data-search-type="woo-product-sku" ajax-search ng-class="{ 'px-focus' : pxsearch != '' && pxsearch != undefined }" ng-model="pxsearch_woo_sku" />
							
							<hr class="silver"/> 
							
						</div>

					
					</div>
					
				</div>

				<div ng-switch-when="taxonomies" class="lscf-taxonomies-fields" data-type="checkbox_post_terms" >

					<div ng-switch on="field.tax.display_as">
			
						<div ng-switch-when="px_select_box" class="px_capf-field px_tax-field pxSelectField px-select-box" data-filter-as="checkbox_post_terms" data-id="{{field.ID}}" >

							<h4 class="lscf-sidebar-heading" ng-bind="field.tax.name"></h4>

							<select class="custom-select">
								
								<option value="0">{{pluginSettings.generalSettings.writing.select}}</option>
								<option ng-repeat="term in field.tax.terms" value="{{term.data.value}}" ng-bind-html="term.data.name"></option>
								
							</select>
							
						</div>
						
						<div ng-switch-when="px_radio_box" class="px_capf-field px_tax-field pxRadioField" data-filter-as="checkbox_post_terms" data-id="{{field.ID}}">
							
							<h4 class="lscf-sidebar-heading" ng-bind="field.tax.name"></h4>

							<div class="px_checkboxesList">
								
								<div class="px_checkbox-li">
									<input class="pxRadioInput" id="{{'px-radiobox-' + field.ID}}" type="radio" name="{{field.ID}}" value="0"/>
									<label class="pxRadioLabel" for="{{'px-radiobox-' + field.ID}}"><span>{{pluginSettings.generalSettings.writing.any}}</span></label>
								</div>
								
								<div ng-class="{ 'px-hidden-opt' : $index > 4 }" class="px_checkbox-li" ng-repeat="term in field.tax.terms">
									<input class="pxRadioInput" id="{{term.data.value}}" type="radio" name="{{field.ID}}" value="{{term.data.value}}"/>
									<label class="pxRadioLabel" for="{{term.data.value}}"><span ng-bind-html="term.data.name"></span></label>   
								</div>
								
								<strong class="lscf-see-more" ng-if="field.tax.terms.length > 5"> {{pluginSettings.generalSettings.see_more}} </strong>

							</div> 
							
						</div>
						
						<div ng-switch-when="px_check_box" class="px_capf-field px_tax-field pxCheckField" data-type="checkbox_post_terms" data-filter-as="checkbox_post_terms" data-id="{{field.ID}}">

							<h4 class="lscf-sidebar-heading" ng-bind="field.tax.name"></h4>
							<div class="px_checkboxesList">
								
								<div ng-class="{ 'px-hidden-opt' : $index > 5 }"  class="px_checkbox-li" ng-repeat="term in field.tax.terms">
									<input class="px_checkboxInput" id="{{field.ID+$index}}" type="checkbox" name="{{field.ID}}" value="{{term.data.value}}">
									<label class="px_checkbox" for="{{field.ID+$index}}"></label>
									<span ng-bind-html="term.data.name"></span>
								</div>

								<strong class="lscf-see-more" ng-if="field.tax.terms.length > 6"> {{pluginSettings.generalSettings.see_more}} </strong>
								
							</div>
							
						</div>
						
						<div ng-switch-when="default" class="px_capf-field px_tax-field pxSelectField px-select-box" data-filter-as="checkbox_post_terms" data-id="{{field.ID}}" >

							<h4 class="lscf-sidebar-heading" ng-bind="field.tax.name"></h4>

							<select class="custom-select">
								
								<option value="0">{{pluginSettings.generalSettings.writing.select}}</option>
								<option ng-repeat="term in field.tax.terms" value="{{term.data.value}}" ng-bind-html="term.data.name"></option>
								
							</select>
							
						</div>
						
					</div>
					

				</div>

			<!--</div>

		</div>-->

				<hr ng-if="field.tax.terms" class="silver"/> 

				<div ng-switch-when="custom_field">

					<div ng-switch on="field.display_as">
					
						<div ng-switch-when="px_date" class="px_capf-field pxDateField" data-filter-as="{{field.type}}" data-id="{{field.ID}}">
							
							<div class="lscf-sidebar-heading">{{field.name}}</div>
							
							<label class="px-date-label">
								<input class="initCalendar" type="text" name="date" value="" placeholder="{{field.name}}"/>
							</label> 
							
						</div>
						
						<div ng-switch-when="px_select_box" class="px_capf-field pxSelectField px-select-box" data-filter-as="{{field.type}}" data-id="{{field.ID}}">
							
							<div class="lscf-sidebar-heading">{{field.name}}</div>
							
							<select class="custom-select">
								
								<option value="0">{{pluginSettings.generalSettings.writing.select}}</option>
								<option ng-repeat="option in field.options" ng-if="option.value" value="{{option.value}}">{{option.opt}}</option>
								
								<option ng-repeat="option in field.options" ng-if="!option.value" value="{{option.opt}}" ng-bind-html="option.opt"></option>

							</select>
							
						</div>
						
						<div ng-switch-when="px_radio_box" class="px_capf-field pxRadioField" data-filter-as="{{field.type}}" data-id="{{field.ID}}">
							
							<div class="lscf-sidebar-heading">{{field.name}}</div>
							
							<div class="px_checkboxesList">
								
								<div class="px_checkbox-li">
									<input class="pxRadioInput" id="{{'px-radiobox-' + field.ID}}" type="radio" name="{{field.ID}}" value="0"/>
									<label class="pxRadioLabel" for="{{'px-radiobox-' + field.ID}}"><span>{{pluginSettings.generalSettings.writing.any}}</span></label>
								</div>
								
								<div ng-class="{ 'px-hidden-opt' : $index > 4 }" class="px_checkbox-li" ng-repeat="option in field.options">
									
									<input class="pxRadioInput" id="{{field.ID+$index}}" type="radio" ng-if="option.value" name="{{field.ID}}" value="{{option.value}}"/>
									
									<input class="pxRadioInput" id="{{field.ID+$index}}" type="radio" ng-if="!option.value" name="{{field.ID}}" value="{{option.opt}}"/>
									
									<label class="pxRadioLabel" for="{{field.ID+$index}}"><span ng-bind-html="option.opt"></span></label>                
								</div>
								
								<strong class="lscf-see-more" ng-if="field.options.length > 5"> {{pluginSettings.generalSettings.see_more}} </strong>

							</div>
							
						</div>
						
						<div ng-switch-when="px_check_box" class="px_capf-field pxCheckField" data-filter-as="{{field.type}}" data-type="checkbox" data-id="{{field.ID}}">
							
							<div class="lscf-sidebar-heading">{{field.name}}</div>
							
							<div class="px_checkboxesList">
								
								<div ng-class="{ 'px-hidden-opt' : $index > 5 }" class="px_checkbox-li" ng-repeat="option in field.options">
									
									<input class="px_checkboxInput" id="{{field.ID+$index}}" type="checkbox" ng-if="option.value" name="{{field.ID}}" value="{{option.value}}">
									
									<input class="px_checkboxInput" id="{{field.ID+$index}}" type="checkbox" ng-if="!option.value" name="{{field.ID}}" value="{{option.opt}}">
									
									<label class="px_checkbox" for="{{field.ID+$index}}"></label>
									<span ng-bind-html="option.opt"></span>
									
								</div>
								
								<strong class="lscf-see-more" ng-if="field.options.length > 6"> {{pluginSettings.generalSettings.see_more}} </strong>

							</div>
							
						</div>
						
						<div ng-switch-when="px_icon_check_box" class="px_capf-field pxCheckField" data-filter-as="{{field.type}}" data-type="px_icon_check_box" data-id="{{field.ID}}">
							
							<div class="lscf-sidebar-heading">{{field.name}}</div>
						
							<div class="px_checkboxesList">
								
								<div ng-class="{ 'px-hidden-opt' : $index > 5 }" class="px_checkbox-li" ng-repeat="option in field.options">
									<input class="px_checkboxInput" id="{{field.ID+$index}}" type="checkbox" name="{{field.ID}}" value="{{option.opt}}">
									<label class="px_checkbox" for="{{field.ID+$index}}"></label>
									<span>{{option.opt}}</span>
									
								</div>

								<strong class="lscf-see-more" ng-if="field.options.length > 6"> {{pluginSettings.generalSettings.see_more}} </strong>

							</div>
							
						</div>

					</div>    
					
					<hr class="silver"/> 
						
				</div>

		</div>

	</div>


	<div class="lascf-reset-filter"ng-if="pluginSettings.filterSettings.reset_button.position == 'bottom' && 1 == pluginSettings.filterSettings.reset_button.status ">
			<label ng-click="reset_filter()">{{pluginSettings.filterSettings.reset_button.name}}</label>
	</div>

</div>    