  <!-- START MAIN -->
<div data-ng-controller="MyTaskController">
    <!-- START WRAPPER -->
    <div class="wrapper">
        <!-- START CONTENT -->
        <section id="content">
            <!--start container-->
            <div class="container">
                <div id="mail-app" class="section">
                    <div class="row">
                        <div class="col s12">
                            <nav class="blue">
                                <div class="nav-wrapper">
                                    <div class="left col s12 m5 l5">
                                        <ul>
                                            <li>
                                                <h5 class="email-type">My Task</h5>
                                            </li>
                                        </ul>
                                    </div>
                                    <div ng-init="dispbtnmark= {{dispbtnmark}}"></div>
                                    <div ng-init="dispbtndelete= {{dispbtndelete}}"></div>
                                    <div class="col s12 m7 l7 hide-on-med-and-down" ng-if="replydisp==true">
                                        <ul class="right">
                                            <li>
                                                <a ng-show="dispbtnmark" ng-click="markTaskCompleted()"><i class="icon-check"></i></a>
                                                <a ng-show="!dispbtnmark" ><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i></a>
                                            </li>
                                            <li>
                                                <a ng-show="dispbtndelete" ng-click="deleteTask()"><i class="icon-trash"></i></a>
                                                <a ng-show="!dispbtndelete"><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i></a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </nav>
                        </div>
                        <div class="col s12" ng-if="lastreached==true">
                            <div id="email-list" class="col s10 m4 l4 card-panel z-depth-1">
                                <ul class="collection" id="task_list">
                                    <li class="collection-item avatar email-unread" ng-repeat="task in userTasks" ng-click="showTask($index)">
                                        <!--<img src="https://scontent.fbom1-2.fna.fbcdn.net/v/t1.0-1/c47.0.160.160/p160x160/10354686_10150004552801856_220367501106153455_n.jpg?oh=1ee95684d33391c6a128f7fd68420032&oe=5856F349" ng-if="task.user.profilePicUrl == null || task.user.profilePicUrl == ' '" alt="" class="circle">-->
                                        <img style="width:56px" src="{{utility.getHttpsUrl(task.user.profilePicUrl)}}" ng-if="task.user.profilePicUrl != null|| task.user.profilePicUrl != ' '" alt="" class="responsive-img profilePic">
                                        <span class="email-title truncate">{{task.taskMessage}}</span>
                                        <p class="truncate grey-text ultra-small">Assigned by <span>{{task.user.firstName }}</span></p>
                                       <span class="icon-calendar" data-tooltip="{{task.tasks.cratedOn * 1000 | date:'yyyy-MM-dd HH:mm:ss'}}" ></span>
                                    </li>
                                </ul>
                            </div>
                            <div id="email-details" class="col s12 m8 l8 card-panel" ng-if="replydisp==true">
                                <div id="recent_task_list">
                                    <p class="email-subject truncate">
                                        {{selectedTask.tasks.taskMessage}}
                                    </p>
                                    <hr class="grey-text text-lighten-2">
                                    <div ng-repeat="comment in selectedTask.lstTaskComments">
                                        <div class="email-content-wrap">
                                            <div class="row">
                                                <div class="col s12 m12 l12">
                                                    <img src="{{utility.getHttpsUrl(comment.user.profilePicUrl)}}" alt="" class="responsive-img profilePic" style="width:56px"> <!--ng-if="comment.user.profilePicUrl != null|| comment.user.profilePicUrl != ' '"-->
                                                    <span class="email-title">{{comment.user.firstName}}</span>
                                                    <p class="grey-text ultra-small">{{comment.taskComments.createdOn * 1000 | date:'yyyy-MM-dd HH:mm:ss'}}</p>
                                                    <!--<ul class="collection">

                                                    <li class="collection-item avatar" ng-repeat="task in userTasks">
                                                    <img src="https://scontent.fbom1-2.fna.fbcdn.net/v/t1.0-1/c47.0.160.160/p160x160/10354686_10150004552801856_220367501106153455_n.jpg?oh=1ee95684d33391c6a128f7fd68420032&oe=5856F349" alt="" class="circle">

                                                    </li>
                                                    </ul>-->
                                                </div>
                                            </div>

                                            <div class="email-content" style="white-space:pre-wrap; line-break:auto; word-wrap:break-word">
                                                <p>{{comment.taskComments.commentText}}</p>
                                            </div>
                                        </div>
                                        <hr />
                                    </div>
                                </div>
                                <div class="email-reply">
                                    <div class="row">
                                        <div class="col s10 m10 l10 center-align">
                                            <div class="row">
                                                <div class="input-field col s12">
                                                    <textarea id="task_rply" ng-model="newComment" class="materialize-textarea"></textarea>
                                                    <label for="task_rply">Leave a comment</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div ng-init="dispbtn= {{dispbtn}}"></div>
                                        <div ng-show="dispbtn" class="col s2 m2 l2 center-align margin-top-30">
                                            <a ng-click="comment(newComment)"><i class="mdi-content-reply"></i></a>
                                            <p class="ultra-small">Reply</p>
                                        </div>
                                        <div ng-show="!dispbtn" class="col s2 m2 l2 center-align margin-top-30">
                                            <a href="javascript:;"><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                   
                    <div>
                        <br /><br /><br /><br /><br /><br /><br />
                        <div class="center">
                            <h6 style="color:lightgray; font-size:24px; font-family:Calibri" ng-if="notasks==true"><span><img style="width:60px" src="http://i.imgur.com/0MjybMu.png" /></span><br />No tasks assigned to display<br /></h6>
                        </div>
                        <br />
                        <div class="center" ng-if="lastreached!=true">
                            <div class="preloader-wrapper small active">
                                <div class="spinner-layer spinner-blue">
                                    <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 class="spinner-layer spinner-red">
                                    <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 class="spinner-layer spinner-yellow">
                                    <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 class="spinner-layer spinner-green">
                                    <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>

                </div>
            </div>
            <!--end container-->
        </section>
        <!-- END CONTENT -->
    </div>
    <!-- END WRAPPER -->
</div>
<!-- END MAIN -->
