<div class="w365cm w365cm-participantsDialog">
    <div class="modal-header">
        <button type="button" class="close closebtn" data-ng-click="close()" aria-hidden="true">&times;</button>
        <h1 class="modal-title">{{role.roleName | translate}}</h1>
    </div>
    <div class="modal-body">
        <form>
            <div class="container-fluid">
                <div class="row" ng-if="title">
                    <div class="col-xs-12">
                        <div class="participantsDialogHeader">{{title}}</div>
                    </div>
                </div>
                <div class="row">
                    <div class="participant-search-block col-md-6 col-md-push-6">
                        <div class="input-group pull-right">
                            <input type="text" class="form-control" style="border-radius:0;" ng-model="searchText" ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 500, 'blur': 0 } }" autocomplete="off" placeholder="{{'Search participants' | translate}}">
                            <div class="input-group-btn">
                                <button class="form-control" type="button" style="margin-left:-35px; height:95%; color:#2e7cce; border:0px;">
                                    <i class="glyphicon glyphicon-search"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-md-pull-6">
                        <ul class="nav nav-tabs" style="padding-top: 8px; padding-left: 0;">
                            <li role="presentation" ng-class="{'active':currentListToShow == 'participants'}" class="active">
                                <a role="button" ng-click="showMembers()">{{'Participants'| translate}} ({{role.numberOfUser}})</a>
                            </li>
                            <li role="presentation" ng-class="{'active':currentListToShow == 'waitingList'}">
                                <a role="button" ng-click="showOnWaitingList()">{{'Waiting list'| translate}} ({{waitingList.numberOfUser}})</a>
                            </li>
                            <li role="presentation" ng-class="{'active':currentListToShow == 'attended'}" ng-show="isCourseAdmin">
                                <a role="button" ng-click="showAttended()">{{'Attended'| translate}} ({{attendedList.numberOfUser}})</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div id="CMPrintParticipants" style="display: none;" ng-if="showPrint" wizdom-include="printTemplate">
                    <!-- this is used for print participants-->
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="participants-actions-menu">
                            <ul class="nav nav-tabs pull-left">
                                <li role="presentation" ng-show="isCourseAdmin">
                                    <a role="button">
                                        <i class="ms-Icon ms-Icon--GridViewSmall" ng-class="{'selected':showUsersAsCards}" ng-click="showUsersAsCards = !showUsersAsCards" title="{{showUsersAsCards ? 'List view' : 'Card view' | translate}}"></i>
                                    </a>
                                </li>
                                <li role="presentation" ng-if="isCourseAdmin">
                                    <a ng-click="email()" style="min-width: initial" role="button">
                                        <i class="ms-Icon ms-Icon--Mail"></i>
                                        <span>{{'Email selected' | translate}}</span>
                                    </a>
                                </li>
                                <li role="presentation" ng-if="isCourseAdmin && currentListToShow == 'participants'">
                                    <a ng-disabled="changingAttended" ng-click="selectedUsersAsAttended()" style="min-width: initial" role="button">
                                        <i class="ms-Icon ms-Icon--ReminderPerson"></i>
                                        <span>{{(changingAttended ? 'Please wait': 'Mark as attended') | translate}}</span>
                                    </a>
                                </li>
                                <li role="presentation" ng-if="isCourseAdmin && currentListToShow == 'attended'">
                                    <a ng-disabled="changingAttended" ng-click="unselectedUsersAsAttended()" style="min-width: initial" role="button">
                                        <i class="ms-Icon ms-Icon--ReminderPerson"></i>
                                        <span>{{(changingAttended ? 'Please wait': 'Mark as unattended') | translate}}</span>
                                    </a>
                                </li>
                                <li role="presentation" ng-if="!isCourseAdmin">
                                    <span class="signup-btns" wizdom365-course-management-signup-buttons
                                          coursedata="{&quot;instanceId&quot;:{{instanceId}},&quot;siteId&quot;:&quot;{{siteId}}&quot;,&quot;popupSize&quot;:&quot;lg&quot;}"></span>
                                </li>
                            </ul>
                            <ul class="nav nav-tabs pull-right">
                                <li role="presentation" ng-show="isCourseAdmin">
                                    <a ng-click="export()" style="min-width: initial" role="button" title="{{'Export' | translate}}">
                                        <i class="ms-Icon ms-Icon--Download"></i>
                                        <!--<span ng-show="currentListToShow == 'attended'">{{'Export' | translate}}</span>
                                        <span ng-show="currentListToShow == 'participants'">{{'Export' | translate}}</span>
                                        <span ng-show="currentListToShow == 'waitingList'">{{'Export' | translate}}</span>-->
                                    </a>
                                </li>
                                <li role="presentation" ng-show="isCourseAdmin">
                                    <a ng-disabled="showPrint" ng-click="print()" style="min-width: initial" role="button" title="{{(showPrint ? 'Please wait': 'Print') | translate}}">
                                        <i class="ms-Icon ms-Icon--Print"></i>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <table class="table" ng-show="isCourseAdmin && !showUsersAsCards">
                    <thead>
                        <tr>
                            <th style="white-space: nowrap;width: 1px">
                                <input type="checkbox" ng-model="allSelected" ng-change="toggleAll(allSelected)" title="{{'Select all' | translate}}" />
                            </th>
                            <th>{{'Name' | translate}}</th>
                            <th>{{'Email' | translate}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="principal in currentList.principals | filter:searchText | orderBy:(currentListToShow == 'waitingList' ? 'added' : 'displayName')" ng-class="{'info':principal.selected}">
                            <td class="text-center">
                                <input type="checkbox" ng-model="principal.selected" ng-change="$parent.allSelected = false" />
                            </td>
                            <td>
                                <a ng-href="{{principal.publicUrl}}">
                                    {{principal.displayName}}
                                </a>
                            </td>
                            <td>{{principal.email}}</td>
                        </tr>
                    </tbody>
                </table>
                <div class="row" ng-if="!isCourseAdmin || showUsersAsCards">
                    <div class="col-xs-12">
                        <div class="form-group wt-role">
                            <div class="row">
                                <div ng-show="isCourseAdmin" class="col-lg-12">
                                    <div class="checkbox">
                                        <label for="selectAllCardView">
                                            <input id="selectAllCardView" type="checkbox" ng-model="allSelected" ng-change="toggleAll(allSelected)" title="{{'Select all' | translate}}" />
                                            {{'Select all' | translate}}
                                        </label>
                                    </div>
                                </div>
                                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 w365cm-users" ng-repeat="principal in currentList.principals | filter:searchText | orderBy:(currentListToShow == 'participants' ? 'displayName' : 'added')">
                                    <div class="wizdom-user">
                                        <div ng-if="principal.type == 'user'">
                                            <div class="imgColumn">
                                                <input ng-show="isCourseAdmin" type="checkbox" ng-model="principal.selected" ng-change="$parent.allSelected = false" style="position:absolute; left:60px" />
                                                <div wizdom365-presence-picture="" size="AVATAR" accountname="principal.accountName" name="principal.displayName" image="principal.pictureURL"></div>
                                            </div>

                                            <div>
                                                <h4 class="name"><a ng-href="{{principal.publicUrl}}">{{principal.displayName}}</a></h4>
                                                <section>
                                                    <div class="email" ng-show="principal.email.length"><a ng-href="mailto:{{principal.email}}">{{principal.email}}</a></div>
                                                    <div class="phone" ng-show="principal.phone.length">{{principal.phone}}</div>
                                                </section>
                                            </div>
                                        </div>
                                        <div ng-if="principal.type == 'group'">
                                            <h4 class="name">{{principal.displayName}}</h4>
                                        </div>
                                    </div>

                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button class="btn btn-default" ng-click="close()">{{'Close' | translate}}</button>
    </div>
</div>