<div class="modal-header">
    <button type="button" class="close closebtn" data-ng-click="cancel()" aria-hidden="true">&times;</button>
    <h1 ng-show="currentAudience.principalID<= 0" class="modal-title">{{'Create audience' | translate}}</h1>
    <h1 ng-show="currentAudience.principalID > 0" class="modal-title">{{'Edit audience' | translate}}</h1>
</div>
<div class="modal-body">
    <div wizdom365-spinner="" loading="loading"></div>
    <div ng-hide="!loadpaging && loading">
        <form name="formAudience">
            <div class="col-sm-12">
                <div class="form-group" ng-hide="isSaaS">
                    <label class="control-label">{{'Type' | translate}}</label>
                    <select class="form-control" ng-model="currentAudience.type" ng-disabled="currentAudience.principalID > 0">
                        <option ng-value="3" ng-if="!isSaaS">{{'Audience' | translate}}</option>
                        <option ng-value="4">{{'Custom Audience' | translate}}</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="control-label">{{'Name' | translate}}</label>
                    <input type="text" name="displayName" class="form-control" ng-model="currentAudience.displayName" required />
                </div>
                <div class="form-group" ng-show="currentAudience.type==3">
                    <label class="control-label">{{'Search query' | translate}}</label>
                    <textarea name="searchQuery" class="form-control" ng-model="currentAudience.searchQuery" ng-required="currentAudience.type==3"></textarea>
                </div>
                <div class="form-group" ng-show="currentAudience.type==4">
                    <label class="control-label">{{'Members' | translate}}</label>
                    <div wizdom365-principalpicker principals="principalMembers" mode="users" allowmultiple="true" class="principal-picker"
                         add-fn="addMember(principal)" remove-fn="removeMember(principal)" ></div>
                    <!-- paging content -->
                    <div class="wizdom-fullwidth text-center" ng-if="count > itemsPerPage" style="margin-top:-20px;">
                        <div class="row">
                            <pagination total-items="count"
                                        ng-change="setPage(currentPage)"
                                        ng-model="currentPage"
                                        items-per-page="itemsPerPage"
                                        max-size="maxNumberOfPages"
                                        boundary-links="false"
                                        previous-text="&lsaquo;"
                                        next-text="&rsaquo;"
                                        first-text="&laquo;"
                                        last-text="&raquo;"></pagination>
                        </div>
                    </div>
                </div>
                <div class="form-group" ng-show="currentAudience.type==3">
                    <label class="control-label" ng-if="currentAudience.principalID >0 && !currentAudience.members || currentAudience.members.length==0">{{'No member found or may not synchronized yet' | translate}}</label>
                    <label class="control-label" ng-if="currentAudience.members && currentAudience.members.length>0">{{'Synchronized Members' | translate}}</label>
                    <ul class="list-group" style="margin:0;">
                        <li class="list-group-item" ng-repeat="member in currentAudience.members">
                            {{::member.displayName }}<span ng-if="member.loginName">&nbsp;&lt;{{::member.loginName}}&gt;</span>
                        </li>
                    </ul>
                    <!-- paging content -->
                    <div class="wizdom-fullwidth text-center" ng-if="count > itemsPerPage" >
                        <div class="row">
                            <pagination total-items="count"
                                        ng-change="setPage(currentPage)"
                                        ng-model="currentPage"
                                        items-per-page="itemsPerPage"
                                        max-size="maxNumberOfPages"
                                        boundary-links="false"
                                        previous-text="&lsaquo;"
                                        next-text="&rsaquo;"
                                        first-text="&laquo;"
                                        last-text="&raquo;"></pagination>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-danger" ng-if="currentAudience.principalID> 0" ng-click="deleteAudience()">{{'Delete' | translate}}</button>
    <button class="btn btn-default" ng-click="cancel()">{{'Cancel' | translate}}</button>
    <button class="btn btn-primary" ng-disabled="!(formAudience.displayName.$valid && formAudience.searchQuery.$valid)" ng-click="saveAudience()">{{'Save' | translate}}</button>
</div>
