<div data-ng-controller="DraftMessageController">
    <!-- Page name -->
    <div class="container">
        <div class="col m12">
            <h4>Draft</h4>
        </div>
    </div>


    <!-- START CONTENT -->
    <section id="content">
        <!-- Compose Email Structure -->
        <div class="row">
            <div class="col s12 m12">
                <table id="DraftTable" class="display responsive-table striped" cellspacing="0" width="100%">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th class="center">User</th>
                            <th class="center">Message</th>
                            <th class="center" style="width: 10%">Edit</th>
                            <th class="center" style="width: 10%">Delete</th>
                            <th class="center" style="width: 10%">Schedule</th>
                        </tr>
                    </thead>
                    <!--<tfoot>
                        <tr>
                            <th>User</th>
                            <th>Message</th>
                            <th>Edit</th>
                            <th>Delete</th>
                            <th>Schedule</th>
                        </tr>
                    </tfoot>-->
                    <tbody>
                        <tr ng-repeat="draft in lstdraftmessage | orderBy:'scheduleTime':true ">
                            <td>{{$index +1}}</td>
                            <td class="center">
                                <div class="col s12">
                                    <img src="{{utility.getHttpsUrl(user.ProfilePicUrl)}}" class="responsive-img profilePic"/>
                                </div>
                                <div class="col s12">
                                    <span>
                                        {{user.FirstName}}<br>
                                        <span>{{draft.scheduleTime}}</span>
                                    </span>
                                </div>
                            </td>
                            <td class="center">
                                <span style="white-space:pre-line; line-break:auto">
                                    {{draft.shareMessage}}
                                </span>
                                <br>
                                <img ng-if="draft.mediaType==1" src="{{getProperURL(draft.picUrl)}}" class="responsive-img" style="width:200px">
                                <video ng-if="draft.mediaType==2" style="width:200px" controls>
                                    <source src="{{getProperURL(draft.picUrl) | Url}}" type="video/mp4">
                                </video>
                            </td>
                            <td>
                                <a class="waves-effect waves-light btn modal-trigger yellow  btn_style btn_round black-text" ng-click="editdraft(draft.shareMessage,draft.id)"><i class="fa fa-pencil"></i></a>
                            </td>
                            <td>
                                <a class="waves-effect waves-light btn red btn_style btn_round" ng-click="deleteMsg(draft.id)"><i class="fa fa-times"></i></a>
                            </td>
                            <td>
                                <a class="waves-effect waves-light btn green btn_style btn_round" ng-click="scheduledraft(draft)"><i class="fa fa-check"></i></a>
                            </td>
                        </tr>

                    </tbody>
                </table>
            </div>
            <br /><br /><br /><br /><br /><br /><br /><br />
            <div class="center">
                <h6 style="color:lightgray; font-size:24px; font-family:Calibri" ng-if="nomessages==true"><span><img style="width:60px" src="http://i.imgur.com/0MjybMu.png" /></span><br />No Draft messages saved to display<br /></h6>
            </div>
            <br />
            <div class="center" ng-if="lastreach!=true">
                <div class="preloader-wrapper small active">
                    <div class="spinner-layer spinner-green-only">
                        <div class="circle-clipper left">
                            <div class="circle"></div>
                        </div><div class="gap-patch">
                            <div class="circle"></div>
                        </div><div class="circle-clipper right">
                            <div class="circle"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- END CONTENT -->

   

    <!-- Modal Structure -->
    <!--<script id="editdraftModalContent.html" type="text/ng-template">-->
        <div id="EditDraftModal" class="modal">
            <div class="modal-content">
                <span class="modal-action modal-close right"><i class="fa fa-times fa-2x"></i></span>
                <h5>Edit Message</h5>
                <div class="row center">
                    <div class="input-field col s12">
                        <textarea id="editdraftScheduleMsg" class="materialize-textarea" length="500" value=""></textarea>
                        <!--<label for="ScheduleMsg">Edit Message Here</label>-->
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <a class="modal-action modal-close waves-effect waves-green btn grey" ng-click="saveditdraft()">Save</a>
            </div>
        </div>
    <!--</script>-->


</div>
