<div ng-controller="Umbraco.Overlays.QueryBuilderController as vm">

	<div class="umb-control-group umb-querybuilder">

        <div class="row">
			<div class="query-items">
				
				<span><localize key="template_iWant">I want</localize></span>

				<div class="btn-group">

					<a class="btn btn-link dropdown-toggle" data-toggle="dropdown" href="#">
						{{vm.query.contentType.name}}
						<span class="caret"></span>
					</a>
					
					<ul class="dropdown-menu">
						<li ng-repeat="contentType in vm.contentTypes">
							<a href ng-click="vm.setContentType(contentType)">{{contentType.name}}</a>
						</li>
					</ul>

				</div>

				<span><localize key="template_from">from</localize></span>

				<a href class="btn btn-link" ng-click="vm.chooseSource(vm.query)">
					{{vm.query.source.name}}
					<span class="caret"></span>	
				</a>

			</div>

			<div class="query-items" ng-repeat="filter in vm.query.filters">

				<span ng-if="$first">
                    <localize key="template_where">where</localize>
                </span>
				<span ng-if="!$first">
                    <localize key="template_and">and</localize>
                </span>

				<div class="btn-group">

					<a class="btn btn-link dropdown-toggle" data-toggle="dropdown" href="#">
		            	{{filter.property.name}}
						<span class="caret"></span>
		            </a>

					<ul class="dropdown-menu">
						<li ng-repeat="property in vm.properties">
							<a href ng-click="vm.setFilterProperty(filter, property)">
		                    	{{property.name}}
							</a>
						</li>
					</ul>

				</div>

				<div class="btn-group" ng-if="filter.property">
					<a class="btn btn-link dropdown-toggle" data-toggle="dropdown" href="#">
						{{filter.term.name}}
						<span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
						<li ng-repeat="term in vm.getPropertyOperators(filter.property)">
							<a href ng-click="vm.setFilterTerm(filter, term)">
								{{term.name}}
							</a>
						</li>
					</ul>
				</div>

                <span ng-switch="filter.term.appliesTo[0]">

                    <!-- Filter term types  (string, int, date) -->
                    <input type="text" ng-switch-when="string" style="width:90px;" ng-model="filter.constraintValue" ng-change="vm.changeConstraintValue()" />
                    <input type="number" ng-switch-when="int" style="width:90px;" ng-model="filter.constraintValue" ng-change="vm.changeConstraintValue()" />

                    <span ng-switch-when="datetime">
                        <umb-date-time-picker options="vm.datePickerConfig"
                                              on-change="vm.datePickerChange(event, filter)">
                        </umb-date-time-picker>
                    </span>

                </span>

				
				
				<a href ng-click="vm.addFilter(vm.query)">
					<i class="icon-add"></i>
				</a>

				<a href ng-click="vm.trashFilter(vm.query, filter)">
					<i class="icon-trash"></i>
				</a>

			</div>


			<div class="query-items">

				<span><localize key="template_orderBy">order by</localize></span>

				<div class="btn-group">
					<a class="btn btn-link dropdown-toggle" data-toggle="dropdown" href="#">
						{{vm.query.sort.property.name}}
						<span class="caret"></span>
					</a>

					<ul class="dropdown-menu">
						<li ng-repeat="property in vm.properties">
							<a href ng-click="vm.setSortProperty(vm.query, property)">
				  				{{property.name}}
				  			</a>
						</li>
					</ul>

				</div>

				<a href class="btn" ng-click="vm.changeSortOrder(vm.query)">
					{{vm.query.sort.translation.currentLabel}}
				</a>

			</div>
		</div>

		<h5>{{model.result.resultCount}} <localize key="template_itemsReturned">items, returned in</localize> {{model.result.executionTime}} ms</h5>

		<ul class="nav unstyled">
			<li ng-repeat="item in model.result.sampleResults">
				<i class="icon icon-document turquoise-d1"></i> {{item.name}}
			</li>
		</ul>

		<pre>
{{model.result.queryExpression}}
        </pre>

	</div>

	<umb-overlay
		ng-if="vm.contentPickerOverlay.show"
		model="vm.contentPickerOverlay"
		view="vm.contentPickerOverlay.view"
		position="right">
	</umb-overlay>

</div>