<div class="modal-header">
    <button type="button" class="close closebtn" data-ng-click="cancel()" aria-hidden="true">&times;</button>
    <h1 class="modal-title">{{'Persons from a department' | translate}}</h1>
</div>
<div class="modal-body">
    <form>
        <div class="form-group">
            <label class="control-label">{{'Template' | translate}}</label>
            <wizdom365-template-picker template-url="data.templateUrl" directory-path="DepartmentUsers/Templates/ViewTemplates"></wizdom365-template-picker>
        </div>
        <div class="form-group">
            <label>{{'Items per page' | translate}}</label>
            <input type="number" class="form-control" ng-model="data.itemsPerPage">
        </div>
        <div class="form-group">
            <div class="radio">
                <label>
                    <input type="radio" value="true" ng-change="modeChg('udep')" ng-model="data.useUsersDepartment" />{{"User's department" | translate}}
                </label>
                <div class="wt-fieldInfo">
                    {{"Displays employees from the current users department." | translate}}
                </div>
            </div>
            <div class="radio">
                <label>
                    <input type="radio" value="true" ng-change="modeChg('dep')" ng-model="data.SelectDepartment" />{{"Select department" | translate}}
                </label>
            </div>
            <div class="form-group-inner user-surce" ng-show="data.SelectDepartment">
                <label class="control-label">{{'Department' | translate}}</label>
                <div wizdom365-departments-dropdown="" departmentwithid="true" selecteddepartment="data.department"></div>
            </div>
            <div class="radio">
                <label>
                    <input type="radio" value="true" ng-change="modeChg('man')" ng-model="data.selectPeopleManually" />
                    {{"Select people manually" | translate}}
                </label>
            </div>
            <div class="form-group-inner user-surce" ng-show="data.selectPeopleManually">
                <label class="control-label">{{"Selected people" | translate}}</label>
                <div class="checkbox pull-right">
                    <label>
                        <input type="checkbox" ng-model="data.showSelectedOrder" />
                        {{"Show in selected order" | translate}}
                    </label>
                </div>

                <input class="form-control"
                       type="text"
                       placeholder="{{'Add group or person' | translate}}"
                       ng-model="principal"
                       typeahead-on-select="addPrincipal($model);"
                       typeahead="user as (user.category? '('+user.category+') ':'')+user.displayName + (user.loginName ? ' - ' + user.loginName : '') for user in searchForPrincipal($viewValue) | limitTo:10"
                       typeahead-loading="loadingLocations"
                       typeahead-min-length="2">
                <i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
                <ul class="list-group">
                    <li class="list-group-item" ng-repeat="p in data.principals">
                        {{(p.category? '('+p.category+') ':'')}}{{ p.displayName }}<span ng-if="p.loginName">&nbsp;&lt;{{p.loginName}}&gt;</span>
                        <button type="button" style="margin-top: -3px;" class="close" ng-click="removePrincipal(p.principalID)"><span aria-hidden="true">&times;</span></button>
                            <div class="pull-left" ng-if="data.showSelectedOrder">
                                <span role="button" class="link-move-container">
                                    <a>
                                        <i class="glyphicon glyphicon-arrow-up"
                                           ng-style="$index > 0 ? {} : {'visibility':'hidden'}"
                                           ng-click="moveUp($index)">
                                        </i>
                                    </a>
                                    <a>
                                        <i class="glyphicon glyphicon-arrow-down"
                                           ng-style="$index == data.principals.length - 1 ? {'visibility':'hidden'} :  {}"
                                           ng-click="moveDown($index)">
                                        </i>
                                    </a>
                                </span>&nbsp;</div>
                    </li>
                </ul>
            </div>
            <div class="radio">
                <label>
                    <input type="radio" value="true" ng-change="modeChg('query')" ng-model="data.UseExplicitQuery" />
                    {{"Use explicit search query" | translate}}
                </label>
            </div>
            <div ng-show="data.UseExplicitQuery">
                <label>{{'Search query' | translate}}</label>
                <input type="text" class="form-control" ng-model="data.explicitQuery">
            </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>
    </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>
