<div class="modal-header">
    <button type="button" class="close closebtn" data-ng-click="signupForm.close()" aria-hidden="true">&times;</button>    
    <h1 class="modal-title">{{(course.canOnlySignupToWaitingList ? 'Signup others to waiting list' : 'Signup others') | translate}}</h1>    
</div>
<div class="modal-body signup-others-form">
    <div wizdom365-spinner="" loading="signupForm.loading || signupForm.working"></div>
    <div class="w365cm" ng-hide="signupForm.loading">
        <form>
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="form-group">
                            <h2>{{course.title}}</h2>
                            <table class="course-info-table">
                                <tr>
                                    <td class="label-col"><label class="control-label">{{'Time' | translate}}:</label></td>
                                    <td>{{course.startdate | date:'short' }} - {{course.enddate | date: 'short' }}</td>
                                </tr>
                                <tr>
                                    <td><label class="control-label">{{'Number of free places' | translate}}:</label></td>
                                    <td>{{course.freeplaces}}</td>
                                </tr>
                            </table>
                        </div>

                        <div wizdom365-phonebook
                             select-deselect-fn="selectDeselectUser"
                             is-selected-fn="isSelected"
                             can-select-fn="canSelect"
                             can-deselect-fn="canDeselect"
                             get-selected-users-fn="getSelectedUsers"
                             remove-selected-users-fn="removeSelectedUsers"
                             webpart-properties="{&quot;searchTemplateUrl&quot;:&quot;Phonebook/Templates/ViewTemplates/SearchTemplates/advancedSearch.html&quot;,&quot;resultTemplateUrl&quot;:&quot;CourseManagement/Templates/ViewTemplates/FindColleague/ResultTemplates/defaultResults.html&quot;,&quot;numberOfUsersPerPage&quot;:4,&quot;orderProperties&quot;:[{&quot;property&quot;:&quot;FirstName&quot;,&quot;orderDirection&quot;:&quot;1&quot;}],&quot;userProperties&quot;:[],&quot;paging&quot;:&quot;Top&quot;}" class="ng-isolate-scope"></div>

                        <div ng-if="seletedUsersNo > 0 && course.freeplaces == 0 && !course.canOnlySignupToWaitingList" style="padding-bottom:15px;">
                            <span class="label label-info" style="font-size:12px;">
                                {{'The course will be fully booked, can not signup more than selected users' | translate}}
                            </span>
                        </div>


                        <div ng-show="!course.canOnlySignupToWaitingList" class="form-group message-to-teacher">
                            <label class="control-label">{{'Message to the teacher' | translate}}</label>
                            <textarea class="form-control" ng-model="signupForm.message" style="height:150px"
                                      validate="{between:'signupForm.validateByRegex($value, signupForm.validation.regex.between_text_only)'}"
                                      between-error-message="{{'The message must be a maximum of 1000 characters' | translate}}" />

                        </div>


                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<div class="modal-footer">
    <button ng-disabled="signupForm.working" ng-click="signupForm.close()" class="btn btn-default wiz-btn-padding">{{'Close' | translate}}</button>
    &nbsp;&nbsp;
    <button class="btn btn-success wiz-btn-padding" ng-disabled="signupForm.working || signupForm.invalid" ng-click="signupForm.signupOthers()">{{(course.canOnlySignupToWaitingList ? 'Sign up to waiting list' : 'Signup') | translate}}</button>            
</div>