<style>
   button:focus {
  outline: 2px solid #000;
  outline-offset: 1px;
}
</style>    
<div data-ng-controller="SentMessagesController">
            <!-- START CONTENT -->
            <section id="content">
                <!--start container-->
                        <!--card widgets end-->
                        <div class="row">
                            <div class="col s12 m10 l10">
                                <div class="card" id="feeds">
                                    <h5 class="feeds_title blue darken-2 white-text"><i class="icon-folder"></i>Sent Messages</h5>
                                    <ul class="collection smartinbox_slider">
                                        <li class="collection-item avatar" ng-repeat="sentmessage in lstsentessage ">
                                          <img src="{{sentmessage.picUrl}}" alt="{{sentmessage.socialprofileName}}" class="circle">
                                          <span class="email-title">{{sentmessage.socialprofileName}}</span>
                                          <div class="row feeds_post z-depth-1 hoverable">
                                            <div class="col m8">
                                              <p class="break_word ultra-small">{{sentmessage.shareMessage}}</p>
                                            </div>
                                            <!--<div class="col m4 center" ng-if="sentmessage.url">
                                              <img src="{{sentmessage.url}}" class="responsive-img ">
                                            </div>-->
                                            <div class="col m4 center" ng-if="sentmessage.url">
                                                <img src="{{getProperURL(sentmessage.url)}}" class="responsive-img ">
                                            </div>
                                          </div>                                         
                                          <!--<a class="tooltipped secondary-content" data-position="left"  data-tooltip="{{sentmessage.scheduleTime}}">{{sentmessage.scheduleTime}}</a>-->
                                            <label class="secondary-content">{{sentmessage.scheduleTime}}</label>
                                        </li>
                                        <br /><br /><br /><br /><br /><br />
                                        <div class="center" ng-if="lastreach!=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>
                                    </ul>
                                </div>
                            </div>  
                            <div class="col s12 m2 l2">
                              <div class="card" id="feeds">
                                <h5 class="feeds_title blue darken-2 white-text"><i class="icon-folder"></i>Filter</h5>
                                <div class="section section_filter">
                                    <!--<div class="row valign-wrapper">
                                      <div class="col s12 btn teal lighten-2">
                                        <a class="waves-effect waves-light ">Export to CSV</a>
                                      </div>
                                    </div>-->
                                    <div class="row valign-wrapper">
                                        <button id="submitButton" type="submit" class="col s12 btn waves-effect waves-light" ng-click="LoadSentmsgByDay('0')">Today</button>
                                      <!--<div class="col s12 btn waves-effect waves-light">
                                        <a class="" ng-click="LoadSentmsgByDay('0')">Today</a>
                                      </div>-->
                                    </div>
                                    <div class="row valign-wrapper">
                                        <button id="submitButton" type="submit" class="col s12 btn waves-effect waves-light" ng-click="LoadSentmsgByDay('1')">Yesterday</button>
                                      <!--<div class="col s12 btn waves-effect waves-light">
                                        <a class="" ng-click="LoadSentmsgByDay('1')">Yesterday</a>
                                      </div>-->
                                    </div>
                                    <div class="row valign-wrapper">
                                        <button id="submitButton" type="submit" class="col s12 btn waves-effect waves-light" ng-click="LoadSentmsgByDays('7')">Last 7 Days</button>
                                      <!--<div class="col s12 btn waves-effect waves-light">
                                        <a class="" ng-click="LoadSentmsgByDays('7')">Last 7 Days</a>
                                      </div>-->
                                    </div>
                                    <div class="row valign-wrapper">
                                        <button id="submitButton" type="submit" class="col s12 btn waves-effect waves-light" ng-click="LoadSentmsgByDays('30')">Last 30 Days</button>
                                      <!--<div class="col s12 btn waves-effect waves-light">
                                        <a class="" ng-click="LoadSentmsgByDays('30')">Last 30 Days</a>
                                      </div>-->
                                    </div>
                                    <div class="row valign-wrapper">
                                        <button id="submitButton" type="submit" class="col s12 btn waves-effect waves-light" ng-click="LoadSentmsgByMonth('0')">This Month</button>
                                      <!--<div class="col s12 btn waves-effect waves-light">
                                        <a class="" ng-click="LoadSentmsgByMonth('0')">This Month</a>
                                      </div>-->
                                    </div>
                                    <div class="row valign-wrapper">
                                        <button id="submitButton" type="submit" class="col s12 btn waves-effect waves-light" ng-click="LoadSentmsgByMonth('1')">Last Month</button>
                                      <!--<div class="col s12 btn waves-effect waves-light">
                                        <a class="" ng-click="LoadSentmsgByMonth('1')">Last Month</a>
                                      </div>-->
                                    </div>                                    
                                    <!--<div class="row valign-wrapper">
                                      <div class="col s12 btn waves-effect waves-light">
                                        <a class="">Custom Range</a>
                                        <input type="date" class="datepicker">
                                      </div>

                                    </div>-->
                                </div>
                              </div>
                            </div>                                
                        </div>
                <!--end container-->

              


            <!-- add profile -->
            <div id="addprofile" class="modal">
                <div class="modal-content">
                  <h4>Adding Profiles</h4>
                    <div class="row">
                        <div class="col s12">
                          <ul class="tabs tab-demo z-depth-1">
                            <li class="tab col s1"><a class="active" href="#twitter"><i class="fa fa-twitter fa-fw fa-2x"></i></a></li>
                            <li class="tab col s1"><a href="#facebook"><i class="fa fa-facebook fa-fw fa-2x"></i></a></li>
                            <li class="tab col s1"><a href="#google"><i class="fa fa-google-plus fa-fw fa-2x"></i></a></li>
                            <li class="tab col s1"><a href="#linkedin"><i class="fa fa-linkedin fa-fw fa-2x"></i></a></li>
                            <li class="tab col s1"><a href="#instagram"><i class="fa fa-instagram fa-fw fa-2x"></i></a></li>
                            <li class="tab col s1"><a href="#tumblr"><i class="fa fa-tumblr fa-fw fa-2x"></i></a></li>
                            <li class="tab col s1"><a href="#youtube"><i class="fa fa-youtube fa-fw fa-2x"></i></a></li>
                            <li class="tab col s1"><a href="#ganalytics"><i class="fa fa-line-chart fa-fw fa-2x"></i></a></li>
                          </ul>
                        </div>
                        <div id="twitter" class="col s12">
                            <div class="center-align">
                                <p>Please make sure you are logged in with the proper account when you authorize Socioboard.</p>
                                <a class="waves-effect waves-light btn"><i class="fa fa-twitter fa-fw"></i>Add a Twitter Profile</a>
                                <p>
                                  <input type="checkbox" id="Follow1" />
                                  <label for="Follow1">Follow Socioboard on twitter for update &amp; announcements</label>
                                </p>
                            </div>
                        </div>
                        <div id="facebook" class="col s12">
                            <div class="center-align">
                                <p>Socioboard needs permission to access and publish content to Facebook on your behalf. To grant permission, you must be an admin for your brand’s Facebook page.</p>
                                <a class="waves-effect waves-light btn"><i class="fa fa-facebook fa-fw"></i>Add a Facebook Profile</a>
                            </div>
                        </div>
                        <div id="google" class="col s12">
                            <div class="center-align">
                                <p>Allow Socioboard access to your Google+ account, you must first give authorization from the Google website</p>
                                <a class="waves-effect waves-light btn"><i class="fa fa-google-plus fa-fw"></i>Add a Google+ Profile</a>
                            </div>
                        </div>
                        <div id="linkedin" class="col s12">
                            <div class="center-align">
                                <p>Grant access to your profile to share updates and view your feed.</p>
                                <a class="waves-effect waves-light btn"><i class="fa fa-linkedin fa-fw"></i>Add Linkedin Profile</a>
                                <a class="waves-effect waves-light btn"><i class="fa fa-linkedin fa-fw"></i>Add Linkedin Company Page</a>
                            </div>
                        </div>
                        <div id="instagram" class="col s12">
                            <div class="center-align">
                                <p>To allow Socioboard access to your Instagram account, you must first give authorization from the Instagram website</p>
                                <a class="waves-effect waves-light btn"><i class="fa fa-instagram fa-fw"></i>Add Instagram Profile</a>
                            </div>
                        </div>
                        <div id="tumblr" class="col s12">
                            <div class="center-align">
                                <p>To allow Socioboard access to your Tumblr account, you must first give authorization from the Tumblr website</p>
                                <a class="waves-effect waves-light btn"><i class="fa fa-instagram fa-fw"></i>Add a tumblr Profile</a>
                            </div>
                        </div>
                        <div id="youtube" class="col s12">
                            <div class="center-align">
                                <p>To allow Socioboard access to your Youtube account, you must first give authorization from the Youtube website</p>
                                <a class="waves-effect waves-light btn"><i class="fa fa-youtube fa-fw"></i>Connect your personal youtube</a>
                            </div>
                        </div>
                        <div id="ganalytics" class="col s12">
                            <div class="center-align">
                                <p>Add your Google Analytics Account to see how your website traffic correlates with your social media activity.</p>
                                <a class="waves-effect waves-light btn"><i class="fa fa-line-chart fa-fw"></i>Connect your personal GoogleAnalytics</a>
                            </div>
                        </div>
                  </div>             
                </div>
            </div>

            <!-- Task Modal -->
            <div id="TaskModal" class="modal">
              <div class="modal-content">
                <h4>Create Task</h4>
                <p></p>
                <div class="row">
                  <form class="col s12">
                    <div class="row">
                      <div class="input-field col s8">
                        <i class="icon-pencil prefix"></i>
                        <textarea id="LeaveComment" class="materialize-textarea" placeholder="Your comment (viewable only to team members)"></textarea>
                        <label for="LeaveComment">LEAVE A COMMENT</label>
                      </div>
                      <div class="col s4">
                        <span>ASSIGN TASK TO</span>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
              <div class="modal-footer">
                <a href="#!" class=" modal-action waves-effect waves-green btn-flat">Save</a>
                <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
              </div>
            </div>

            <!-- Email Message Modal -->
            <div id="EmailMessageModal" class="modal modal-fixed-footer">
              <div class="modal-content">
                <h4>Email Message</h4>
                <div class="row">
                  <form class="col s12">
                    <div class="row">
                      <div class="input-field col s12">
                        <input disabled value="Chanchal Santra" id="first_name" type="text" class="validate">
                        <label for="first_name">From</label>
                      </div>
                    </div>
                    <div class="row">                      
                      <div class="input-field col s12">
                        <i class="icon-pencil prefix"></i>
                        <input id="emailid" type="text" class="validate">
                        <label for="emailid">To</label>
                      </div>
                    </div>
                    <div class="row">
                      <div class="input-field col s12">
                        <i class="icon-globe prefix"></i>
                        <textarea id="LeaveComment" class="materialize-textarea" ></textarea>
                        <label for="LeaveComment">Subject<span style="margin-left:10px;" class="grey-text text-darken-4">New Follower Alert forwarded by chanchal santra</span></label>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
              <div class="modal-footer">
                <a href="#!" class=" modal-action waves-effect waves-green btn-flat">Save</a>
                <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
              </div>
            </div>

            <!-- Reply Modal -->
            <div id="ReplyModal" class="modal">
              <div class="modal-content">
                <h4>Public Reply</h4>
                <div class="row">
                  <div class="input-field col s12">
                        <i class="icon-pencil prefix"></i>
                        <textarea id="reply" class="materialize-textarea" placeholder="ur text"></textarea>
                        <label for="reply">Reply</label>
                      </div>
                </div>
              </div>
              <div class="modal-footer">
                <a href="#!" class="modal-action waves-effect waves-green btn-flat">Reply</a>
              </div>
            </div>



            </section>
            <!-- END CONTENT -->   
    </div>
