<div>
<div ng-if="done">
    <center><h2>User Messaging Form</h2></center>
	<p style="color:orange;"><strong>{{result}}</strong></p>

    <button ng-show="vm.userTypeNew == 'Pi/CoPi'" id="searchbutton" type="button" style= "width: 180px;" name="answer" class="btn btn-primary" ng-click="vm.ShowDiv()"/>{{vm.SearchMessage}}</button><br><br>
        <div id="vlad_new" class="row" style="display:none;">
            <div class="col-md-4 panel panel-default" style="height: 420px;">

            <table class="table">
            <tr>
                <th>
                    <b>Filter Users:
                    <p><input type="checkbox" ng-model="usertype">UserType:<select class="form-control" ng-model="selectedusertype" ng-options="typerank as typerank.name for typerank in vm.typeranks" value="{{vm.getRank(selectedusertype)}}"></select></input></p>
                    <p><input type="checkbox" ng-model="userrank">UserRank:<select class="form-control" ng-model="selecteduserrank" ng-options="rank for rank in vm.filteredrank"></select></input></p>
                    <p><input type="checkbox" ng-model="userproject">Project:<select class="form-control" ng-model="selecteduserproject" ng-options="projects as projects.title for projects in vm.projects" value="{{vm.getStudents(SelectedProject)}}"></select></input></p>
                    <p><input type="checkbox" ng-model="unconfirmed">Unconfirmed Email</input></p>
                    <p><input type="checkbox" ng-model="gmail">Gmail Login</input></p>
                    <p><input type="checkbox" ng-model="mentor">Mentor</input></p>
                    <p><input type="checkbox" ng-model="multiple">Multiple Projects</input></p>
                </th>
            </tr>
            <tr>
            <th>
            <button style= "text-align: center;" class="btn btn-primary" ng-click="vm.filterUsers(usertype,userrank,unconfirmed,gmail,mentor,multiple,selectedusertype,selecteduserrank, selecteduserproject, userproject)">Lookup</button>
            <button style= "text-align: center;" class="btn btn-primary" ng-click="vm.messageAllUsers()">Message All</button>
            <button style= "text-align: center;" class="btn btn-primary" ng-click="vm.clearUsers()">Clear Recipients</button>
            </th>
            </tr>
            </table>
            
            </div>

            <div class="col-md-4 panel panel-default"  style="height: 392px; overflow:scroll;">
        
                <table class="table">
                <tr>
                    <th>
                        <b>List of Users (Click to View their Profile):
                    </th>
                    <tr ng-repeat="user in vm.filteredusers track by $index">
                    <td><button class="btn btn-info btn-block" ng-click="vm.currentview(user)">{{user.firstName + " " +user.lastName}}</button></td>
                </tr>
                
                </table>
        
            </div>
            <div class="col-md-4 panel panel-default" style="height: 392px;">
        
            <table class="table">
            <tr>
                <th>
                    <b>Detailed User Info:</b>
                </th>
            </tr>
            <tr >
                <th ng-if="!vm.currentuserview"><center><h1>No User Selected</h1></center></th>
                <th ng-repeat="user in vm.currentuserview">
                    <p><b>Name: {{user.firstName}} {{user.lastName}} </b></p>	
                    <p><b>Gender: {{user.gender}} </b></p>
                    <p><b>UserType: {{user.userType}} </b></p>
                    <p><b>UserRank: {{user.userRank}} </b></p>
                    <p><b>Email: {{user.email}} </b></p>	
                    <p><b>Department: {{user.department}} </b></p>	
                    <p><b>College: {{user.college}} </b></p>	
                    <p><b>Project: {{user.project}} </b></p>
                    <button class="btn btn-info btn-block" ng-click="vm.updateUsers(user.email)">Message {{user.firstName}} {{user.lastName}}</button>
                </th>
            </tr>
            </table>
        
        </div>
    </div>
    
    <form role="form">
        <div class="form-group2">
            <label>*User(s) to Message</label>
            <input type="text" id="usersmsg" class="form-control" placeholder="" ng-model="usersToMessage" required="True">
        </div>

        <div class="form-group2">
            <label>*Message Subject</label>
            <input type="text" id="msgsubject" class="form-control" placeholder="" ng-model="MessageSubject" required="True">
        </div>

        <div class="form-group2">
            <label>*Message Body:</label>
            <!-- <div text-angular ng-model="project.description"></div> -->
            <textarea ng-model="MessageBody" id="msgbody" name="" class="form-control" rows="10" required="True">    
            </textarea>
        </div>

        <button style ="margin-top: 5px;" type="submit" class="btn btn-primary" ng-click="vm.sendMessage(usersToMessage, MessageSubject, MessageBody)">Send Message</button>
        <br>
        <br>
        <p><strong>* : required fields</strong></p>
    </form>
</div>
</div>