    <div data-ng-controller="YoutubeallreportController">
        <!-- Page name -->
        <div class="row" ng-class="loadedYAData">

            <div class="col m8 margin-top-20">
                <div class="input-field">
                    <h5 class="grey-text text-darken-1" style="font-size:24px">Showing last {{lastxDays}} days report ({{fromDate | date}} - {{toDate | date}})</h5>
                </div>
            </div>                       
        </div>

        <div class="row" ng-class="loadedYAData">

            <div class="col s12 m12 l12">
                
                <div class="card" id="feeds">
                    <h5 class="feeds_title red darken-4 white-text">
                        <i class="fa fa-bar-chart"></i>&nbsp Youtube Report Stats</span>
                    </h5>
                    <div class="collection">
                        <div class="row">
                            <div class="col l12">
                                <blockquote style="border-left-color:#1e8e12" class="groupbox_padding grey lighten-1">
                                    <h5>Subscribers . {{totalSubscriberss}}</h5>
                                </blockquote>
                                <div id="Subscriber" class="charts" style="height: 250px;"></div>
                            </div>

                            <div class="col l12">
                                <blockquote style="border-left-color:#1e8e12" class="groupbox_padding grey lighten-1">
                                    <h5>Views . {{totalViewss}}</h5>
                                </blockquote>
                                <div id="chartdiv_view" class="charts" style="height: 250px;"></div>
                            </div>
                            <div class="col l12">
                                <blockquote style="border-left-color:#E55B00" class="groupbox_padding grey lighten-1">
                                    <h5>Likes . {{totalLikess}}</h5>
                                </blockquote>
                                <div id="chartdiv_like" class="charts" style="height: 250px;"></div>
                            </div>
                            <div class="col l12">
                                <blockquote style="border-left-color:#2a63bf" class="groupbox_padding grey lighten-1">
                                    <h5>Comments . {{totalCommentss}}</h5>
                                </blockquote>
                                <div id="chartdiv_comment" class="charts" style="height: 250px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="col s12 m12 l12">
                <div class="card" id="feeds">
                    <h5 class="feeds_title red darken-4 white-text">
                        <i class="fa fa-youtube-play white-text"></i>&nbspYoutube STATS</span>
                    </h5>
                    <div class="collection">
                        <div class="row">
                            <div class="col l12">
                                <blockquote class="groupbox_padding grey lighten-1">
                                    <h5>Channel statistics</h5>
                                    <!--<h1 class="grey-text text-darken-4">Raj Dotnet</h1>-->
                                </blockquote>

                                <table id="channeldetailss" class="display responsive-table" cellspacing="0" width="100%">
                                    <thead>
                                        <tr>
                                            <th width="1%">S.No</th>
                                            <th width="70%">Channel</th>
                                            <th width="10%">Subscribers</th>
                                            <th width="10%">Videos</th>
                                            <th width="10%">Views</th>
                                        </tr>
                                    </thead>
                                    <!--<tfoot>
                                        <tr>
                                            <th width="70%">Channel</th>
                                            <th width="10%">Subscribers</th>
                                            <th width="10%">Videos</th>
                                            <th width="10%">Views</th>
                                        </tr>
                                    </tfoot>-->
                                    <tbody>
                                        <tr ng-repeat="channels in tableCData" my-repeat-video-tab-directives>
                                            <td style="width: 1%;">{{$index+1}}</td>
                                            <td>
                                                <div class="row">
                                                    <!--<a href="{{channels.websiteUrl}}" target="_blank">-->
                                                    <div class="col m2 l1">
                                                        <img src="{{channels.channelpicUrl}}" class="circle responsive-img activator card-profile-image">
                                                    </div>
                                                    <div class="col m10 l11">
                                                        <h6 class="grey-text text-darken-4"><a href="https://www.youtube.com/channel/{{channels.ytubeChannelId}}" target="_blank">{{channels.ytubeChannelName}}</a></h6>
                                                        <!--<h6 class="grey-text text-darken-4">Raj Software Developer</h6>
                                                        </div>channelId
                                                    <!--</a>-->
                                                    </div>
                                                    </div>
                                            </td>
                                            <td>{{channels.subscribersCount}}</td>
                                            <td>{{channels.videosCount}}</td>
                                            <td>{{channels.viewsCount}}</td>
                                        </tr>
                                        <!--<tr>
                                        <td>
                                            Channel name
                                        </td>
                                        <td>0</td>
                                        <td>0</td>
                                        <td>0</td>
                                    </tr>
                                    <tr>
                                        <td>
                                            Channel name
                                        </td>
                                        <td>0</td>
                                        <td>0</td>
                                        <td>0</td>
                                    </tr>-->
                                    </tbody>

                                </table>
                            </div>



                            <div class="col l12">
                                <blockquote class="groupbox_padding grey lighten-1">
                                    <h5>Video statistics</h5>
                                </blockquote>

                                <table id="all_video_table" class="display nowrap" cellspacing="0" width="100%">
                                    <thead>
                                        <tr>
                                            <th width="1%">S.No</th>
                                            <th width="50%">Videos</th>
                                            <th width="20%">Channel Name</th>
                                            <th width="10%">Likes</th>
                                            <th width="10%">Comments</th>
                                            <th width="10%">Views</th>
                                        </tr>
                                    </thead>
                                    <!--<tfoot>
                                        <tr>
                                            <th width="50%">Videos</th>
                                            <th width="20%">Channel Name</th>
                                            <th width="10%">Likes</th>
                                            <th width="10%">Comments</th>
                                            <th width="10%">Views</th>
                                        </tr>
                                    </tfoot>-->
                                    <tbody>
                                        <tr ng-repeat="videos in tableVData" my-repeat-video-tab-directive>
                                            <td style="width: 1%;">{{$index+1}}</td>
                                            <td>
                                                <div class="row">
                                                    <!--<a href="{{videos.watchUrl}}" target="_blank">-->
                                                    <div class="col m2 l1">
                                                        <img src="{{videos.vdoImageUrl}}" class="responsive-img" style="margin-top:8px; max-width: 25px">
                                                    </div>
                                                    <div class="col m10 l11">
                                                        <h6 class="grey-text text-darken-4">&nbsp;<a href="{{videos.watchUrl}}" target="_blank">{{videos.title}}</a></h6>
                                                        <!--<span class="grey-text text-darken-1 truncate">{{videos.description}}</span>-->
                                                        <!--<h6 class="grey-text text-darken-4">Raj Dotnet</h6>-->
                                                    </div>
                                                    <!--</a>-->
                                                </div>
                                            </td>
                                            <td><a href="https://www.youtube.com/channel/{{videos.channelId}}" target="_blank">{{videos.channelTitle}}</a></td>
                                            <td>{{videos.likeCount}}</td>
                                            <td>{{videos.commentCount}}</td>
                                            <td>{{videos.viewCount}}</td>
                                        </tr>

                                        <!--<tr>
                                        <td>
                                            <div class="row">
                                                <div class="col m2 l1">
                                                    <img src="http://graph.facebook.com/226587747673015/picture?type=small" class="responsive-img" >
                                                </div>
                                                <div class="col m10 l11">
                                                    <a href="javascript:;">
                                                        <h6 class="grey-text text-darken-4">Heading</h6>
                                                        <h6 class="grey-text text-darken-1">Desc</h6>
                                                    </a>
                                                </div>
                                            </div>
                                        </td>
                                        <td>0</td>
                                        <td>0</td>
                                        <td>0</td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="row">
                                                <div class="col m2 l1">
                                                    <img src="http://graph.facebook.com/226587747673015/picture?type=small" class="responsive-img" >
                                                </div>
                                                <div class="col m10 l11">
                                                    <a href="javascript:;">
                                                        <h6 class="grey-text text-darken-4">Heading</h6>
                                                        <h6 class="grey-text text-darken-1">Desc</h6>
                                                    </a>
                                                </div>
                                            </div>
                                        </td>
                                        <td>0</td>
                                        <td>0</td>
                                        <td>0</td>
                                    </tr>-->
                                    </tbody>

                                </table>
                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </div>

        <div ng-class="loadingYAData">
            <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            <div class="center">
                <div class="preloader-wrapper small active">
                    <div class="spinner-layer spinner-red-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>
                <br />
                <h6 style="color:gray; font-size:18px; font-family:Calibri;">Please wait for the analytics data to be generated</h6>

            </div>
        </div>

    </div>


