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

	<umb-editor-view>

		<umb-editor-header
            name="model.title"
            name-locked="true"
            hide-alias="true"
            hide-icon="true"
            hide-description="true">
		</umb-editor-header>

		<umb-editor-container>

			<umb-box>
				<umb-box-content>

                    <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">

                                    <umb-button type="button"
                                                button-style="outline"
                                                action="vm.contentTypeSelectOpen = !vm.contentTypeSelectOpen"
                                                label="{{vm.query.contentType.name}}"
                                                show-caret="true">
                                    </umb-button>

                                    <umb-dropdown ng-if="vm.contentTypeSelectOpen" on-close="vm.contentTypeSelectOpen = false">
                                        <umb-dropdown-item ng-repeat="contentType in vm.contentTypes">
                                            <button type="button" class="btn-reset" ng-click="vm.setContentType(contentType); vm.contentTypeSelectOpen = false;">
                                                {{contentType.name}}
                                            </button>
                                        </umb-dropdown-item>
                                    </umb-dropdown>

                                </div>

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

                                <umb-button type="button"
                                            button-style="outline"
                                            action="vm.chooseSource(vm.query)"
                                            label="{{vm.query.source.name}}">
                                </umb-button>

                            </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">

                                    <umb-button type="button"
                                                button-style="outline"
                                                action="vm.propertyFilterOpen[$index] = !vm.propertyFilterOpen[$index]"
                                                label="{{filter.property.name}}"
                                                show-caret="true">
                                    </umb-button>

                                    <umb-dropdown ng-if="vm.propertyFilterOpen[$index]" on-close="vm.propertyFilterOpen[$index] = false">
                                        <umb-dropdown-item ng-repeat="property in vm.properties">
                                            <button type="button" class="btn-reset" ng-click="vm.setFilterProperty(filter, property); vm.propertyFilterOpen[$parent.$parent.$index] = false;">
                                                {{property.name}}
                                            </button>
                                        </umb-dropdown-item>
                                    </umb-dropdown>

                                </div>

                                <div class="btn-group" ng-if="filter.property">

                                    <umb-button type="button"
                                                button-style="outline"
                                                action="vm.termFilterOpen[$index] = !vm.termFilterOpen[$index]"
                                                label="{{filter.term.name}}"
                                                show-caret="true">
                                    </umb-button>

                                    <umb-dropdown ng-if="vm.termFilterOpen[$index]" on-close="vm.termFilterOpen[$index] = false">
                                        <umb-dropdown-item ng-repeat="term in vm.getPropertyOperators(filter.property)">
                                            <button type="button" class="btn-reset" ng-click="vm.setFilterTerm(filter, term); vm.termFilterOpen[$parent.$parent.$index] = false;">
                                                {{term.name}}
                                            </button>
                                        </umb-dropdown-item>
                                    </umb-dropdown>

                                </div>

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

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

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

                                </span>

                                <button type="button" class="btn-reset" ng-click="vm.addFilter(vm.query)">
                                    <umb-icon icon="icon-add"></umb-icon>
                                </button>

                                <button type="button" class="btn-reset" ng-click="vm.trashFilter(vm.query, filter)">
                                    <umb-icon icon="icon-trash"></umb-icon>
                                </button>

                            </div>

                            <div class="query-items">

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

                                <div class="btn-group">

                                    <umb-button type="button"
                                                button-style="outline"
                                                action="vm.sortPropertyOpen = !vm.sortPropertyOpen"
                                                label="{{vm.query.sort.property.name}}"
                                                show-caret="true">
                                    </umb-button>

                                    <umb-dropdown ng-if="vm.sortPropertyOpen" on-close="vm.sortPropertyOpen = false">
                                        <umb-dropdown-item ng-repeat="property in vm.properties">
                                            <button type="button" class="btn-reset" ng-click="vm.setSortProperty(vm.query, property); vm.sortPropertyOpen = false;">
                                                {{property.name}}
                                            </button>
                                        </umb-dropdown-item>
                                    </umb-dropdown>

                                </div>

                                <umb-button ng-show="vm.query.sort.property.name"
                                            type="button"
                                            button-style="outline"
                                            action="vm.changeSortOrder(vm.query)"
                                            label="{{vm.query.sort.translation.currentLabel}}">
                                </umb-button>

                            </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">
                                <umb-icon icon="{{item.icon}}" class="icon turquoise-d1"></umb-icon> {{item.name}}
                            </li>
                        </ul>

                        <umb-code-snippet language="'csharp'">{{model.result.queryExpression}}</umb-code-snippet>

                    </div>

				</umb-box-content>
			</umb-box>

		</umb-editor-container>

		<umb-editor-footer>

			<umb-editor-footer-content-right>

				<umb-button
					type="button"
					button-style="link"
					label-key="general_close"
				    shortcut="esc"
					action="vm.close()">
				</umb-button>

				<umb-button
					type="button"
					button-style="success"
					label-key="general_submit"
					action="vm.submit(model)">
				</umb-button>

			</umb-editor-footer-content-right>

		</umb-editor-footer>

	</umb-editor-view>

</div>
