<div class="modal-header">
    <button type="button" class="close closebtn" data-ng-click="cancel()" aria-hidden="true">&times;</button>
    <h1 class="modal-title">{{'People search' | translate}}</h1>
</div>
<div class="modal-body">
    <form>
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12">
                    <div class="form-group">
                        <label class="control-label">{{'Search template' | translate}}</label>
                        <wizdom365-template-picker template-url="data.searchTemplateUrl" directory-path="Phonebook/Templates/ViewTemplates/SearchTemplates"></wizdom365-template-picker>
                    </div>
                    <div class="form-group">
                        <label class="control-label">{{'Result template' | translate}}</label>
                        <wizdom365-template-picker template-url="data.resultTemplateUrl" directory-path="Phonebook/Templates/ViewTemplates/ResultTemplates"></wizdom365-template-picker>
                    </div>
                    <div class="form-group">
                        <label class="control-label">{{'Number of search results per page' | translate}}</label>
                        <input type="number" class="form-control" ng-model="data.numberOfUsersPerPage" />
                    </div>
                    <div class="form-group">
                        <label class="control-label">{{'Paging' | translate}}</label>
                        <select class="form-control" ng-model="data.paging">
                            <!--<option value="Both">{{'Both' | translate}}</option>-->
                            <option value="Top">{{'Top' | translate}}</option>
                            <option value="Bottom">{{'Bottom' | translate}}</option>
                            <option value="None">{{'None' | translate}}</option>
                        </select>
                    </div>
                    <!--<div class="form-group">
                        <label class="control-label">{{'Predefined search query' | translate}}</label>
                        <input type="text" class="form-control" ng-model="data.predefinedQuery" />
                    </div>
                    <div class="form-group">
                        <label class="control-label">{{'Select department to show' | translate}}</label>
                        <div wizdom365-departments-dropdown="" selecteddepartment="data.department"></div>
                    </div>-->

                    <div class="form-group">
                        <label class="control-label">{{'Order by' | translate}}</label>
                        <div class="input-group">
                            <input type="text" class="form-control" ng-model="newOrderProp" />
                            <span class="input-group-addon" style="cursor: pointer;" ng-click="addOrderProp();">{{'Add' | translate}}</span>
                        </div>
                        <br />
                        <ul class="list-group" ui-sortable="" ng-model="data.orderProperties">
                            <li class="list-group-item" ng-repeat="prop in data.orderProperties track by $index" style="line-height: 35px;">
                                <span style="cursor:move;">{{prop.property}}</span>
                                <span class="badge" style="cursor:pointer" ng-click="removeProp($index,data.orderProperties)">{{'Remove' | translate}}</span>
                                <div class="pull-right">
                                    <select class="form-control" ng-model="prop.orderDirection">
                                        <option value="0">{{'Descending' | translate}}</option>
                                        <option value="1">{{'Ascending' | translate}}</option>
                                    </select>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-12">
                    <div class="advancedSettingsExpander" ng-click="isAdvancedSettingsOpen = !isAdvancedSettingsOpen">
                        <span class="advancedSettingsExpanderArrow"><i class="ms-Icon" ng-class="isAdvancedSettingsOpen == true ? 'ms-Icon--ChevronDownMed' : 'ms-Icon--ChevronRightMed'"></i></span>
                        <span class="advancedSettingsExpanderText">{{'Advanced' | translate}}</span>
                    </div>
                    <div class="advancedSettingsDeviderLine" ng-show="isAdvancedSettingsOpen"></div>
                </div>
            </div>
            <!-- Advanced settings start -->
            <div class="advancedSettings" ng-show="isAdvancedSettingsOpen" id="advancedSettings">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label class="control-label">{{'Search result source (GUID)' | translate}}</label>
                            <input type="text" class="form-control" ng-model="data.resultSource" />
                        </div>
                        <div class="form-group">
                            <label class="control-label">{{'Managed properties' | translate}}</label>
                            <div class="input-group">
                                <input type="text" class="form-control" ng-model="newProp" />
                                <span class="input-group-addon" style="cursor: pointer;" ng-click="addProp();">{{'Add' | translate}}</span>
                            </div>
                            <br />
                            <ul class="list-group" ui-sortable="" ng-model="data.userProperties">
                                <li class="list-group-item" ng-repeat="prop in data.userProperties track by $index">
                                    <span style="cursor:move;">{{prop}}</span>
                                    <span class="badge" style="cursor:pointer" ng-click="removeProp($index,data.userProperties)">{{'Remove' | translate}}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<div class="modal-footer">
    <button class="btn btn-success wiz-btn-padding" ng-click="updateConfig()">{{'Save' | translate}}</button>
    <button class="btn btn-default wiz-btn-padding" ng-disabled="loading" ng-click="cancel();">{{"Cancel" | translate}}</button>
</div>