<div data-ng-controller="TwitterAnalyticsController">
    <!-- START CONTENT -->
    <section id="content">
        <!--start container-->
        <!--card widgets end-->
        <div class="row">
            <div class="col s12 m8 l8" >
                <div class="card" id="feeds" >
                    <h5 class="feeds_title blue darken-2 white-text" style="padding:20px;margin:0;font-weight:300"><i class="icon-folder"></i>Twitter Analytics</h5>
                    <ul class="collection smartinbox_slider" ng-if="nodata==false">
                        <li class="collection-item avatar" ng-repeat="notification in lstNotifications | notificationbyprofilesfileter : filterType : selectedProfiles | filter:key_search">
                            <img src="{{notification.fromProfileUrl}}" alt="{{notification.fromScreenName}}" class="circle">
                            <span ng-if="notification.type==0" class="email-title"><b>{{notification.fromScreenName}}</b> -- mention {{notification.recipientName}}</span>
                            <span ng-if="notification.type==1 && notification.fromScreenName!=''" class="email-title"><b>{{notification.fromScreenName}}</b> -- retweet {{notification.recipientName}} Post</span>
                            <span ng-if="notification.type==1 && notification.fromScreenName==''" class="email-title"><b>{{notification.fromName}}</b> -- retweet {{notification.recipientName}} Post</span>
                            <span ng-if="notification.type==6" class="email-title"><b>{{notification.fromName}}</b> -- New Follower Alert</span>
                            <span ng-if="notification.type==11" class="email-title"><b>{{notification.fromName}}</b> -- Facebook Page Notification</span>
                            <div class="row feeds_post z-depth-1 hoverable">
                                <div class="col m8">
                                    <p class="break_word ultra-small">{{notification.twitterMsg}}</p>
                                </div>
                                <!--<div class="col m4 center">
                                  <img src="{{notification.sourceUrl}}" alt="{{notification.fromScreenName}}" ng-if="notification.sourceUrl != null" class="responsive-img ">
                                </div>-->
                                <div class="col l12 smartinbox_action_icon">
                                    <a data-tooltip="Task" data-delay="50" data-position="top" href="javascript:void(0);" class="tooltipped modal-trigger" data-tooltip-id="9b92f7d1-8f4a-65f2-786e-cdcc587cd805" ng-click="taskModel(notification)">
                                        <i class="icon-pin"></i>
                                    </a>
                                    <!--<a data-tooltip="Email Message" data-delay="50" data-position="bottom" href="#EmailMessageModal" class="tooltipped modal-trigger" data-tooltip-id="736dc10b-3165-76e6-7ea5-cf4f29f23ea4">
                                        <i class="icon-envelope"></i>
                                    </a>
                                    <a data-tooltip="Reply" data-delay="50" data-position="right" href="#ReplyModal" class="tooltipped modal-trigger" data-tooltip-id="ed01e6e1-84be-88a0-8dd3-cf7c5de35c54">
                                        <i class="icon-cursor"></i>
                                    </a>-->
                                </div>
                            </div>
                            <!--<a class="tooltipped secondary-content" data-position="left" data-tooltip="{{notification.messageDate}}">{{notification.messageDate}}</a>-->
                            <label class="secondary-content">{{notification.messageDate}}</label>
                        </li>
                        <div ng-if="x!=true">
                            <br /><br /><br /><br /><br /><br /><br />
                            <div class="center">
                                <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>
                            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                        </div>
                    </ul>

                    <div ng-if="nodata==true">
                        <br /><br /><br /><br /><br /><br /><br />
                        <div class="center">
                            <h6 style="color:lightgray; font-size:24px; font-family:Calibri"><span><img style="width:60px" src="http://i.imgur.com/0MjybMu.png" /></span><br />Sorry, No analytics found<br /></h6>
                        </div>
                        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                    </div>
                </div>
            </div>
            
            <div class="col s12 m4 l4">
                <div class="card" id="feeds">
                    <h5 class="feeds_title blue darken-2 white-text" style="padding:20px;margin:0;font-weight:300"><i class="icon-folder"></i>Filter</h5>
                        <div class="section section_filter">
                            <h6>Search <a href="javascript:void(0)" class="fa fa-minus-circle red-text" ng-if="keysearch==true" title="Clear search" ng-click="clearSearch();key_search.twitterMsg=''"></a></h6>
                            <div class="row no-space">
                                <div class="input-field col s12 no-padding">
                                    <!--<input id="name_search" type="text" ng-model="name_search.fromName" ng-change="changeSearch()" class="validate">-->
                                    <input id="name_search" type="text" ng-model="name_search" ng-change="changeSearch('name_search'')" class="validate">
                                    <label for="name_search" style="left:0px;">Contact Search</label>
                                </div>
                                <div class="input-field col s12 no-padding">
                                    <input id="key_search" type="text" ng-model="key_search.twitterMsg" ng-change="changeSearch('socioboard_key_search')" class="validate">
                                    <label for="key_search" style="left:0px;">Keyword Search</label>
                                </div>
                            </div>
                        </div>
                        <div class="section section_filter">
                            <h6>PROFILES</h6>
                            <div class="smartinbox_filter_slider">
                                <!--rendering twitter profiles start-->
                                <div class="grey lighten-5 z-depth-1" ng-repeat="profile in lstProfiles | filter:{profileType:2}">
                                    <div class="row valign-wrapper">
                                        <div class="col s2">
                                            <img src="{{profile.profilePic}}" alt="{{profile.profileName}}" class="circle responsive-img">
                                        </div>
                                        <div class="col s8">
                                            <span class="black-text">
                                                {{profile.profileName}}
                                            </span>
                                        </div>
                                        <div class="col s2">
                                            <p>
                                                <input type="checkbox" value="{{profile.profileId}}" checked="checked" ng-click="toggleProfileSelection(profile.profileId)" id="test_{{profile.profileId}}" />
                                                <label for="test_{{profile.profileId}}"></label>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <!--<div class="grey lighten-5 z-depth-1" ng-repeat="profile in lstProfiles | filter:{profileType:1} | filter:{profileType:'!10'} | filter:{profileType:'!11'}">
                    <div class="row valign-wrapper">
                        <div class="col s2">
                            <img src="{{profile.profilePic}}" alt="{{profile.profileName}}" class="circle responsive-img">
                        </div>
                        <div class="col s8">
                            <span class="black-text">
                                {{profile.profileName}}
                            </span>
                        </div>
                        <div class="col s2">
                            <p>
                                <input type="checkbox" value="{{profile.profileId}}" checked="checked" ng-click="toggleProfileSelection(profile.profileId)" id="test_{{profile.profileId}}" />
                                <label for="test_{{profile.profileId}}"></label>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="grey lighten-5 z-depth-1" ng-repeat="profile in lstProfiles | filter:{profileType:2} |filter:{ProfileType:1}">
                    <div class="row valign-wrapper">
                        <div class="col s2">
                            <img src="{{profile.profilePic}}" alt="{{profile.profileName}}" class="circle responsive-img">
                        </div>
                        <div class="col s8">
                            <span class="black-text">
                                {{profile.profileName}}
                            </span>
                        </div>
                        <div class="col s2">
                            <p>
                                <input type="checkbox" value="{{profile.profileId}}" checked="checked" ng-click="toggleProfileSelection(profile.profileId)" id="test_{{profile.profileId}}" />
                                <label for="test_{{profile.profileId}}"></label>
                            </p>
                        </div>
                    </div>
                </div>-->
                                <!--rendering twitter profiles end-->

                            </div>
                        </div>
                        <!--<div class="section section_filter">
          <h6>MESSAGE TYPES</h6>
          <div class="grey lighten-5 z-depth-1" ng-repeat="filterop in filterType">
            <div class="row valign-wrapper">
              <div class="col s1">
                <i class="fa fa-facebook" ng-if="filterop=='Notifications'"></i>
                  <i class="fa fa-twitter" ng-if="filterop!='Notifications'"></i>
              </div>
              <div class="col s8">
                <span class="black-text">
                    {{filterop}}
                </span>
              </div>
              <div class="col s2">
                <p>
                  <input type="checkbox" checked="checked" name="filterType[]"  value="{{filterop}}" ng-click="toggleSelection(filterop)" ng-checked="selection.indexOf(filterop) > -1"   id="{{filterop}}" />
                  <label for="{{filterop}}"></label>
                </p>
              </div>
            </div>
          </div>

        </div>-->
                        <div class="section section_filter">
                            <h6>MESSAGE TYPES</h6>
                            <!--<div class="grey lighten-5 z-depth-1">
                <div class="row valign-wrapper">
                    <div class="col s1">
                        <i class="fa fa-facebook"></i>
                    </div>
                    <div class="col s8">
                        <span class="black-text">
                            Notifications
                        </span>
                    </div>
                    <div class="col s2">
                        <p>
                            <input type="checkbox" name="filterType[]" value="Notifications" ng-click="toggleSelection(9)" ng-checked="filterType.indexOf(9) > -1" id="Notifications" />
                            <label for="Notifications"></label>
                        </p>
                    </div>
                </div>
            </div>-->
                            <div class=" grey lighten-5 z-depth-1">
                                <div class="row valign-wrapper">
                                    <div class="col s1">
                                        <i class="fa fa-twitter"></i>
                                    </div>
                                    <div class="col s8">
                                        <span class="black-text">
                                            Mentions
                                        </span>
                                    </div>
                                    <div class="col s2">
                                        <p>
                                            <input type="checkbox" name="filterType[]" value="0" ng-click="toggleSelection(0)" ng-checked="filterType.indexOf(0) > -1" id="Mentions" />
                                            <label for="Mentions"></label>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class=" grey lighten-5 z-depth-1">
                                <div class="row valign-wrapper">
                                    <div class="col s1">
                                        <i class="fa fa-twitter"></i>
                                    </div>
                                    <div class="col s8">
                                        <span class="black-text">
                                            Retweets
                                        </span>
                                    </div>
                                    <div class="col s2">
                                        <p>
                                            <input type="checkbox" name="filterType[]" value="1" ng-click="toggleSelection(1)" ng-checked="filterType.indexOf(1) > -1" id="Retweets" />
                                            <label for="Retweets"></label>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class=" grey lighten-5 z-depth-1">
                                <div class="row valign-wrapper">
                                    <div class="col s1">
                                        <i class="fa fa-twitter"></i>
                                    </div>
                                    <div class="col s8">
                                        <span class="black-text">
                                            New Followers
                                        </span>
                                    </div>
                                    <div class="col s2">
                                        <p>
                                            <input type="checkbox" name="filterType[]" value="New Followers" ng-click="toggleSelection(6)" ng-checked="filterType.indexOf(6) > -1" id="NewFollowers" />
                                            <label for="NewFollowers"></label>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
            </div>
        </div>
        <!--end container-->
    </section>
    <!-- END CONTENT -->

    <div id="TaskModal" class="modal">
        <div class="modal-content">
            <span class="modal-action modal-close right" ng-click="closeModal()"><i class="fa fa-times fa-2x"></i></span>
            <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="taskComment" 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><br />
                            <div class="smartinbox_filter_slider">
                                <p class="grey lighten-5 z-depth-1" ng-repeat="member in groups[groupIndex].members |filter:{memberStatus:1} ">
                                    <input name="member" type="radio" id="{{member.userId}}" value="{{member.userId}}" class="with-gap task-user-member" />
                                    <label for="{{member.userId}}">{{ member.firstName}}</label>
                                </p>

                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="modal-footer">
            <a href="javascript:void(0);" class="modal-action waves-effect waves-green btn-flat" ng-click="addTask('MongoTwitterMessage')">Save</a>
            <a href="javascript:void(0);" class="modal-action modal-close waves-effect waves-green btn-flat" ng-click="closeModal()">Close</a>
        </div>
    </div>
</div>
<script>
        //function chng_btn_val() {
        //    $('#gif').show();
        //}
        debugger;
        setTimeout(function () {
            $('#gif').hide();
        }, 20000);
</script>
