<div class="conditional-directive">
	<div class="well p-0 m-0-bottom relative">
		<div class="conditionals" ng-if="kkSettings.length" ui-sortable ng-model="kkSettings">
			<div ng-repeat="(condIdx, condSetting) in kkSettings" class="conditional">
				<div class="conditional-inner">
					<div class="condition-label">
						<i ng-click="removeConditional(condSetting)" class="icon-remove-sign o-05 o-1-hover"></i>
						<div>
							<div class="condition" ng-click="toggleConditionalEquality(condSetting)">
								<strong>{{getConditionalName(condSetting)}}</strong> 
								<span class="condition-equality">{{conditionEqualityLabel(condSetting)}}</span>
							</div>
						</div>
					</div>
					<div class="condition-filter">
						<kk-propertygrid class="form" kk-model="condSetting.setting.choices" kk-model-scope="condSetting.setting.choices" kk-config="conditionals[condSetting.conditional].config"></kk-propertygrid>
					</div>
				</div>
				<div class="filter-operand" ng-click="condSetting.setting.operand = condSetting.setting.operand === 'and' ? 'or' : 'and'" ng-show="$index != kkSettings.length-1">
					<span>{{operands[condSetting.setting.operand]}}</span>
				</div>
			</div>
		</div>
		<div class="conditionals-emtpy light" ng-if="!kkSettings.length && emptyDesc" ng-bind-html="emptyDesc"></div>

		<div class="conditional-suggestions relative" ng-if="getFilteredSuggestions().length">
			<hr class="m-0" kk-if="kkSettings.length  || (!kkSettings.length && emptyDesc)"/>
			<i class="icon-lightbulb absolute" style="font-size: 78px;opacity: 0.05;left: 50%;top: 50%;transform: translate(-50%, -50%);z-index: -1;"></i>
			<h5 class="m-0 fs-11 p-15 p-1-bottom">Filtervorschläge für <a href="{{kkSuggestions.url}}" title="{{kkSuggestions.url}}" target="_blank">{{getSuggestionUrlName()}}</a></h5>
			<div class="p-15 p-0-top p-1-bottom">
				<div class="pull-left p-05-top">
					<span class="btn btn-small m-05-right" ng-repeat="suggestion in getFilteredSuggestions()" ng-click="addConditional(suggestion)"><i class="icon-filter fs-1"></i> {{ getConditionalName(suggestion) }}</span>
				</div>
				<div ng-click="addAllSuggestions()" class="btn btn-small btn-transparent m-05-top pull-right">Alle hinzufügen</div>
				<div class="clearfix"></div>
			</div>
		</div>

		<div class="center-heading fs-15 m-0" ng-if="kkSettings.length || (!kkSettings.length && emptyDesc) || getFilteredSuggestions().length"><i class="icon-plus-sign o-04" title="Füge einen neuen Darstellungsfilter hinzu"></i></div>

		<div class="filter-sections">
			<div ng-repeat="(sectionKey, section) in filterSections" class="filter-section">
				<div class="filter-section-label"><span ng-if="section.icon"><i class="{{section.icon}}"></i> </span>{{section.label}}</div>
				<div class="filter-section-filter" ng-repeat="cond in section.filters | toArray | orderBy:'sort'" ng-click="addConditional(cond.$key)" title="{{cond.description}}"><a class="">{{cond.name}}</a></div>
			</div>
		</div>
	</div>
</div>