<div data-ng-controller="YoutubeSearchController">
    <!-- START CONTENT -->
    <section id="content">
        <!--start container-->
        <div class="row">
            <div class="col l5 s12">
                <h4>Youtube Search</h4>
            </div>
            <form>
                <div class="col l5 s10">
                    <div class="input-field">
                        <input placeholder="Search here" ng-model="searchkeyword" type="text" class="validate">
                    </div>
                </div>
                <div class="col l2 s2 center">
                    <button type="submit" class="btn red darken-3 btn_round margin-top-20" ng-click="searchytdata(searchkeyword)"><i class="fa fa-search fa-fw"></i></button>
                </div>
            </form>
        </div>
        <!--card widgets end-->
        <div class="row" ng-repeat="youtubeitems in searchdata | limitTo:limit">
            <div class="col l12 s12">
                <a ng-click="openM(youtubeitems.ytVideoId, youtubeitems.searchType)">
                    <div class="card hoverable">
                        <div class="row">
                            <div class="col l3 m3 s12">
                                <img ng-if="youtubeitems.searchType=='video'" style="margin-top:19px" id="img" class="style-scope yt-img-shadow" width="246" src="{{youtubeitems.vdoImage}}">
                                <img ng-if="youtubeitems.searchType=='playlist'" style="margin-top:19px" id="img" class="style-scope yt-img-shadow" width="246" src="{{youtubeitems.vdoImage}}">
                                <img ng-if="youtubeitems.searchType=='channel'" style="margin-top:19px" id="img" class="style-scope yt-img-shadow circle" width="246" src="{{youtubeitems.vdoImage}}">
                            </div>
                            <div class="col l9 m9 s12" style="margin-top:18px">
                                <h6 class="grey-text text-darken-4"><b>{{youtubeitems.vdoTitle}}</b></h6>
                                <h6 ng-if="youtubeitems.searchType=='playlist'" class="grey-text text-darken-2"><b>Playlist</b></h6>
                                <h6 ng-if="youtubeitems.searchType=='channel'" class="grey-text text-darken-2"><b>Channel</b></h6>
                                <a href="{{youtubeitems.channelUrl}}" class="grey-text text-darken-1" target="_blank">{{youtubeitems.channelTitle}}</a> | <span>{{youtubeitems.vdoPublishDate}}</span>
                                <p class="truncate">{{youtubeitems.vdoDescription}}</p>
                                <div ng-if="youtubeitems.searchType=='video'">
                                    <a>&nbsp;</a><img src="/contents/socioboard/images/YoutubeLogo.png" /> <a href="{{youtubeitems.vdoUrl}}" style="font-weight:500" class="watchYt" target="_blank">&nbspWatch on Youtube</a>
                                </div>
                                <div ng-if="youtubeitems.searchType=='playlist'">
                                    <a>&nbsp;</a><img src="/contents/socioboard/images/YoutubeLogo.png" /> <a href="{{youtubeitems.playlistUrl}}" style="font-weight:500" class="watchYt" target="_blank">&nbspView on Youtube</a>
                                </div>
                                <div ng-if="youtubeitems.searchType=='channel'">
                                    <a>&nbsp;</a><img src="/contents/socioboard/images/YoutubeLogo.png" /> <a href="{{youtubeitems.channelUrl}}" style="font-weight:500" class="watchYt" target="_blank">&nbspView on Youtube</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        </div>

        <div class="row center">
            <a class="btn btn_style btn_round white-text red darken-4"  ng-click="limitClk();loadmoreextra()" ng-class="loadmore"><i class="fa fa-refresh white-text"></i><b> Load more</b></a>
            <br />
        </div>        
        <!--end container-->


        <div id="ComposePostModal" class="modal">
            <div class="modal-content">
                <div class="center">
                    <iframe width="600" height="360" src="{{urlEmbedded | youtubeEmbedUrl}}" frameborder="0" gesture="media" allowfullscreen></iframe>
                </div>
            </div>
        </div>

    </section>
    <div ng-if="loader==true" class="center">
        <br /><br /><br />
        <div class="lds-css ng-scope"  style="display: inline-block;" >
            <div style="width:100%;height:100%" class="lds-dual-ring">
                <div></div>
            </div>
        </div>
    </div>
    <div ng-if="label==true" class="center">
        <br /><br /><br />
        <h1 class="grey-text">{{keywordsearchkey}}</h1>
    </div>

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

<style>
    a.watchYt:hover, a.watchYt:active {color: #e21212 !important;}
    a.watchYt {color: #808080 !important;}


@keyframes lds-dual-ring {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes lds-dual-ring {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.lds-dual-ring {
  position: relative;
}
.lds-dual-ring div {
  position: absolute;
  width: 112px;
  height: 112px;
  top: 44px;
  left: 44px;
  border-radius: 50%;
  border: 12px solid #000;
  border-color: #c80000 transparent #c80000 transparent;
  -webkit-animation: lds-dual-ring 2.8s linear infinite;
  animation: lds-dual-ring 2.8s linear infinite;
}
.lds-dual-ring {
  width: 140px !important;
  height: 140px !important;
  -webkit-transform: translate(-70px, -70px) scale(0.7) translate(70px, 70px);
  transform: translate(-70px, -70px) scale(0.7) translate(70px, 70px);
}

</style>


