<form novalidate name="contentForm"
    ng-controller="Umbraco.Dialogs.Template.QueryBuilderController"
    ng-submit="close()"
    val-form-manager>
	
	<style>
		.umb-querybuilder .row {font-size: 12px; line-height: 12px}

		.umb-querybuilder .row a.btn{font-size: 12px; background: lightyellow}

		.umb-querybuilder .row > div{
			padding: 20px;
			border-bottom: 1px solid #efefef;
		}
	</style>

	<div class="umb-panel">

		<div class="umb-panel-header">
		    <h1 class="headline" style="margin: 10px 0 0 0">Build a query</h1>
		</div>

		<div class="umb-panel-body with-footer umb-querybuilder">
			  
			  <div class="row">  
  					<div>
  						I want

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

  						    </ul>
  						</div>	

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

			      <div ng-repeat="filter in query.filters">
			          
			          <span ng-if="$first">Where</span>
			          <span ng-if="!$first">And</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 properties">
			                      <a href ng-click="filter.property = 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 getPropertyOperators(filter.property)">
			                      <a href ng-click="filter.term = term">
			                          {{term.name}}
			                      </a>
			                  </li>
			              </ul>
			          </div>

			          <input type="text" ng-if="filter.term" style="width:90px;" ng-model="filter.constraintValue" />
                 
			          <a href ng-click="addFilter(query)">
			              <i class="icon-add"></i>
			          </a>
                      
                    <a href ng-if="query.filters.length > 1" ng-click="trashFilter(query)">
                        <i class="icon-trash"></i>
                    </a>
                         
			      </div>	


					
			      <div>
						
						Order by 

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

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


						<a href class="btn" ng-click="changeSortOrder(query)">
							{{query.sort.direction}}
						</a>
					</div>
			  </div>
                    
		    
            <h4>Returns {{result.resultCount}} items in {{result.executionTime}} miliseconds</h4>
               
		    <ul class="nav unstyled">
			    <li ng-repeat="item in result.sampleResults">
		                  <i class="icon icon-document blue"></i> {{item.name}}
			          </li>
            </ul>  
			
		    <pre>{{result.queryExpression}}</pre>
		</div>	

		<div class="umb-panel-footer" >
			<div class="umb-el-wrap umb-panel-buttons">
		        <div class="btn-toolbar umb-btn-toolbar pull-right">
		            <a href ng-click="close()" class="btn btn-link">
		                <localize key="general_close">Close</localize>
		            </a>
                    
                    <a href ng-click="submit(result.queryExpression)" class="btn btn-primary">Insert</a>
		        </div>
		      </div>
			</div>
		</div>
	</div>
</form>