<div class="row" ng-include="'app-content/header.html?ver=133'" style=" margin:0 0 50px; "></div>		


<section class="pt-5 mt-5">
	<div class="container-fluid">
		<div class="row mx-0 ">
			<div class="dashboard col-lg-3 col-md-1 px-0">
				<div class="nav mt-lg-5 flex-md-column flex-row justify-content-between nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
					<a class="nav-link " ng-class="{'active': vm.search.cat_id==''}" href="javascript:;" ng-click="vm.changeTab('');"><span class="flaticon-home mr-lg-3"></span> Dashboard</a>
					<a class="nav-link" ng-class="{'active': vm.search.cat_id=='Case study'}" href="javascript:;"  ng-click="vm.changeTab('Case study');"><span class="flaticon-knowledge mr-lg-3"></span> Case Study</a>
					<a class="nav-link" ng-class="{'active': vm.search.cat_id=='Testimonial'}" href="javascript:;"  ng-click="vm.changeTab('Testimonial');"><span class="flaticon-rating mr-lg-3"></span> Testimonials</a>
					<a class="nav-link" ng-class="{'active': vm.search.cat_id=='Cost Saving'}" href="javascript:;"  ng-click="vm.changeTab('Cost Saving');"><span class="flaticon-money mr-lg-3"></span> Cost Saving</a>
					<a class="nav-link" ng-class="{'active': vm.search.cat_id=='Montage'}" href="javascript:;"  ng-click="vm.changeTab('Montage');"><span class="flaticon-journey mr-lg-3"></span> Montage</a>
					<a class="nav-link" ng-class="{'active': vm.search.cat_id=='Client Advice'}" href="javascript:;"  ng-click="vm.changeTab('Client Advice');"><span class="flaticon-value mr-lg-3"></span> Client Advice</a>
					<a href="javascript:;" class="fs0" ng-model="collapse" ng-click="collapse=!collapse"><span class="flaticon-more mr-lg-3"></span> More</a>
					<div id="more-videos" class="more-videos " ng-class="{'collapse':!collapse}">
							<a class="nav-link " ng-class="{'active': vm.search.cat_id=='Short Case Studies'}" href="javascript:;"  ng-click="vm.changeTab('Short Case Studies');">
								Short Case Studies
							</a>
							<a class="nav-link " ng-class="{'active': vm.search.cat_id=='Inhouse'}" href="javascript:;"  ng-click="vm.changeTab('Inhouse');">
								InHouse
							</a>
							<a class="nav-link " ng-class="{'active': vm.search.cat_id=='Client Stories'}" href="javascript:;"  ng-click="vm.changeTab('Client Stories');">
								Client Stories
							</a>
							<a class="nav-link " ng-class="{'active': vm.search.cat_id=='Events'}" href="javascript:;"  ng-click="vm.changeTab('Events');">
								Events
							</a>
							<a class="nav-link " ng-class="{'active': vm.search.cat_id=='VE in the News'}" href="javascript:;"  ng-click="vm.changeTab('VE in the News');">
								VE in the News
							</a>
							<a class="nav-link " ng-class="{'active': vm.search.cat_id=='Video Ad'}" href="javascript:;"  ng-click="vm.changeTab('Video Ad');">
								Video Ad
							</a>
					</div>
			</div>
		</div>
		    <!--div class="col-lg-9 col-md-11 p-xl-5 p-4 bg-light height-vh">
			{{vm.tree.nodes}}
			</div-->
			<div class="col-lg-9 col-md-11 p-xl-5 p-4 bg-light height-vh">
				<div class="tab-content" id="v-pills-tabContent">
					<div class="tab-pane fade " ng-class="{'show active':vm.search.cat_id==''}"  id="v-pills-home" >
						<div class="row">
							<div class="col-xl-3 col-lg-4 video-box d-flex flex-column">
								<h2 class="h3 font-weight-bold mb-4">Recent Uploads</h2>
									<a href="#" data-toggle="modal" data-target="#dataModal" class="text-white h5 mb-0 text-center text-lg-left shadow h-100 box bg-primary text-white rounded-xl p-4 d-flex flex-column justify-content-between">
										<span class="flaticon-graphic mx-auto mx-lg-0 mb-4 mb-lg-0"></span>
										<div class="">
											<span class="font-weight-bold h1">{{recentData.length}}</span>
											<span class="d-block font-weight-light">Recently Uploaded Videos</span>
										</div>
								</a>
								
							</div>
							<div class="col-xl-9 col-lg-8">
								<h2 class="h3 font-weight-bold mb-4 mt-lg-0 mt-4">Stats </h2>
								<div class="box bg-white shadow rounded-xl py-4 px-xl-5 px-lg-4 px-4">
									<div class="row align-items-center">
										<div class="col-12">
											<h5 class="font-weight-bold h5" >Category Stats </h5>
										</div>
										<div class="col-md-5 box-left">
											<div class="tab-content">
												<div id="circle-tab-1" class="p-0 tab-pane mt-xl-4 box-new" ng-class="{'active':activeCircle=='1'}">
													<div class="percent">
														<svg>
															<circle cx="70" cy="70" r="70"></circle>
															<circle cx="70" cy="70" r="70" style="stroke-dashoffset: {{440 - (440 * ((vm.tree.nodes | filter:cat_name='Case study').length)/(vm.tree.nodes.length)*100 | number : 0) / 100}};"></circle>
														</svg>
														<div class="number">
														<h2>{{((vm.tree.nodes | filter:cat_name='Case study').length)/(vm.tree.nodes.length)*100 | number : 0}}<span>%</span></h2>
														</div>
													</div>
												</div>
												<div id="circle-tab-2" class="p-0 tab-pane mt-xl-4 box-new" ng-class="{'active':activeCircle=='2'}">
													<div class="percent">
														<svg>
															<circle cx="70" cy="70" r="70"></circle>
															<circle cx="70" cy="70" r="70" style="stroke-dashoffset: {{440 - (440 * ((vm.tree.nodes | filter:cat_name='Testimonial').length)/(vm.tree.nodes.length)*100 | number : 0) / 100}};"></circle>
														</svg>
														<div class="number">
															<h2>{{((vm.tree.nodes | filter:cat_name='Testimonial').length)/(vm.tree.nodes.length)*100 | number : 0}}<span>%</span></h2>
														</div>
													</div>
												</div>
												<div id="circle-tab-3" class="p-0 tab-pane  mt-xl-4 box-new" ng-class="{'active':activeCircle=='3'}">
													<div class="percent">
														<svg>
															<circle cx="70" cy="70" r="70"></circle>
															<circle cx="70" cy="70" r="70" style="stroke-dashoffset: {{440 - (440 * ((vm.tree.nodes | filter:cat_name='Cost Saving').length)/(vm.tree.nodes.length)*100 | number : 0) / 100}};"></circle>
														</svg>
														<div class="number">
														<h2>{{((vm.tree.nodes | filter:cat_name='Cost Saving').length)/(vm.tree.nodes.length)*100 | number : 0}}<span>%</span></h2>
														</div>
													</div>
												</div>
												<div id="circle-tab-4" class="p-0 tab-pane  mt-xl-4 box-new" ng-class="{'active':activeCircle=='4'}">
													<div class="percent">
														<svg>
															<circle cx="70" cy="70" r="70"></circle>
															<circle cx="70" cy="70" r="70" style="stroke-dashoffset: {{440 - (440 * (100-((vm.tree.nodes | filter:cat_name='Case study').length)/(vm.tree.nodes.length)*100-((vm.tree.nodes | filter:cat_name='Testimonial').length)/(vm.tree.nodes.length)*100-((vm.tree.nodes | filter:cat_name='Cost Saving').length)/(vm.tree.nodes.length)*100 | number : 0)) / 100}};"></circle>
														</svg>
														<div class="number">
														<h2 >{{100-((vm.tree.nodes | filter:cat_name='Case study').length)/(vm.tree.nodes.length)*100-((vm.tree.nodes | filter:cat_name='Testimonial').length)/(vm.tree.nodes.length)*100-((vm.tree.nodes | filter:cat_name='Cost Saving').length)/(vm.tree.nodes.length)*100 | number : 0}}<span>%</span></h2>
														</div>
													</div>
												</div>
											</div>
										</div>

										<div class="col-md-7 p-xl-0 mt-xl-4 box-right">
										    
											<input type="hidden" ng-model="activeCircle" ng-init="activeCircle='1'" value="" />
											<ul class="list-unstyled nav nav-pills" role="tablist" >
												<li class="nav-item py-2 w-100">
													<a class="nav-link active d-flex justify-content-between" href="javascript:;" ng-click="activeCircle='1';" ng-init="count=0"><span class="text-left">Case Study </span>
													<span class="text-right font-weight-bold">{{((vm.tree.nodes | filter:cat_name='Case study').length)/(vm.tree.nodes.length)*100 | number : 0}} %</span></a>
												</li>
												<li class="nav-item py-2 w-100">
													<a class="nav-link d-flex justify-content-between" href="javascript:;" ng-click="activeCircle='2'"><span class="text-left">Testimonials</span>
													<span class="text-right font-weight-bold">{{((vm.tree.nodes | filter:cat_name='Testimonial').length)/(vm.tree.nodes.length)*100 | number : 0}}%</span></a>
												</li>
												<li class="nav-item py-2 w-100">
													<a class="nav-link d-flex justify-content-between" href="javascript:;" ng-click="activeCircle='3'"><span class="text-left">Cost Saving</span>
													<span class="text-right font-weight-bold">{{((vm.tree.nodes | filter:cat_name='Cost Saving').length)/(vm.tree.nodes.length)*100 | number : 0}}%</span></a>
												</li>
												<li class="nav-item py-2 w-100">
													<a class="nav-link d-flex justify-content-between" href="javascript:;" ng-click="activeCircle='4'"><span class="text-left">Others</span>
													<span class="text-right font-weight-bold">{{100-((vm.tree.nodes | filter:cat_name='Case study').length)/((vm.tree.nodes).length)*100-((vm.tree.nodes | filter:cat_name='Testimonial').length)/((vm.tree.nodes).length)*100-((vm.tree.nodes | filter:cat_name='Cost Saving').length)/((vm.tree.nodes).length)*100 | number : 0}}%</span></a>
												</li>
											</ul>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="row mt-5">
							<div class="col-12">
								<div class="heading-sec d-flex justify-content-between flex-md-row flex-column">
									<h2 class="h3 font-weight-bold mb-4">Recently Uploaded</h2>
											<div class="filter-sec d-flex">
											 <div class="form-group mr-4 d-flex align-items-center">
												<label for="sel1">Sort By</label>
												<select class="form-control" ng-model="vm.orderByField">
												  <option value="client_name">Name</option>
												  <option value="domain_name">Domain</option>
												  <option value="average_rating">Ratings</option>
												  <option value="uploaded_at">Upload Date</option>
												</select>
											  </div>
											  <div class="form-group mr-4 d-flex align-items-center">
												<select class="form-control" ng-model="vm.reverseSort">
												  <option value="1">Desc</option>
												  <option value="0">Asc</option>
												</select>
											  </div>
											  <div class="form-group d-flex align-items-center">
												<label for="sel1">Show</label>
												<select class="custom-select w-auto custom-select-sm form-control form-control-sm " ng-model="vm.pageSize" name="pageSize" id="pageSize">
												<option value="5">5</option>
												<option value="10">10</option>
												<option value="25">25</option>
												<option value="50">50</option>
												<option value="10000000">All</option>
												
												</select>
											</div>
										</div>
								</div>
									<div class="table-box table-responsive">
										<table class="table ">
											<tbody>
											<tr ng-repeat="data in recentData = (vm.tree.nodes | thisMonth | orderBy:vm.orderByField:(vm.reverseSort == 1? true:false))  | startFrom:vm.currentPage*vm.pageSize | limitTo: vm.pageSize ">
												<td>
														<div class="s_num" ng-click="vm.screen='add_video'; vm.video=data; vm.selectVideoIndex=data.id">{{vm.currentPage * vm.pageSize + $index + 1}}</div>
														<div class="img-box">
															<a href="javascript:;" ng-click="vm.openRatingModel(data.id, 'video')"><img ng-src="https://img.youtube.com/vi/{{data.youtube_video_id}}/0.jpg" alt="thumb" /></a>
														</div>
														<span class="title-sec">
														    <!-- New -->
															<span class="title font-weight-bold" ng-bind-html="data.client_name + ', ' + data.designation+' ('+data.company_name+')'"></span>
															<span class="title font-weight-bold" ng-bind-html="data.quote"></span>
															<span class="title font-weight-bold" ng-bind-html="data.quote_long"></span>
															<!-- New -->
															<span class="content-client">
																<span class="country"><span class="flaticon-placeholder"></span> <span ng-bind-html="data.state + ', '+data.country"></span></span>
																<span class="joined"><span class="flaticon-date"></span> {{ data.creation_date }}</span>
																<span class="domain"><span class="flaticon-globe"></span> <span ng-bind-html="data.domain_name"></span></span>
															</span>
														</span>
													</td>
													<td>
														<span  class="rating-sec">
															<span class="ratings">  
																<span class="flaticon-star " ng-class="{'active':data.average_rating > 0}"></span>
																<span class="flaticon-star  " ng-class="{'active':data.average_rating > 1}"></span>
																<span class="flaticon-star  " ng-class="{'active':data.average_rating > 2}"></span>
																<span class="flaticon-star  " ng-class="{'active':data.average_rating > 3}"></span>
																<span class="flaticon-star  " ng-class="{'active':data.average_rating > 4}"></span>
															</span>
															<a href="javascript:;" class="submit-rating"  ng-click="vm.openRatingModel(data.id, 'rating')">Submit Your Ratings</a>
	
														</span>
													</td>
											</tr>
											
											</tbody>
										</table>
									</div>
										<ul class="pagination justify-content-center" ng-if="filterData.length">
											
											<li class="page-item"><button class="page-link"  ng-disabled="vm.currentPage <= 0" ng-click="vm.currentPage=(vm.currentPage-1)"><span class="flaticon-down-arrow rotate-left"></span></button></li>
											
											<li class="page-item" ng-repeat="page in vm.GetPager(recentData.length, vm.currentPage, vm.pageSize).pages" >
												<a ng-click="vm.currentPage=page-1" href="javascript:;" class="page-link" ng-class="{active:vm.currentPage == page-1}">{{page}}</a>
											</li>
											
											<li class="page-item"><button class="page-link"  class="page-link"  ng-disabled="vm.currentPage >= filterData.length/vm.pageSize - 1" ng-click="vm.currentPage=(vm.currentPage+1)"><span class="flaticon-down-arrow rotate-right"></span></a></li>
										  </ul>
								</div>
							</div>
						</div>
					<div class="tab-pane fade" ng-class="{'show active':vm.search.cat_id != ''}" id="v-pills-study" >
							<div class="row">
								<div class="box form-box bg-white rounded-xl w-100 px-lg-4 py-lg-4 py-4 px-2">
								<div class="col-12">
									<div class="d-flex align-items-center mb-3">
										<input type="text" class="form-control mr-2" placeholder="Enter Client Name" ng-change="vm.currentPage = 0" ng-model="vm.search.client_name">
										<div class="input-group-append">
											<button class="btn btn-primary btn-search d-flex align-items-center rounded-lg"><span class="flaticon-search"></span> Search</button>
										</div>
									</div>
								</div> 
								<div class="col-12 mt-4 d-flex justify-content-between">
									<p class="h6 font-weight-bold">Advanced Search</p>
									<a href="javascript:;" ng-click="hideAdvanceSearch=!hideAdvanceSearch"><span class="flaticon-down-arrow"></span></a>
								</div>
								<div class="collapse  w-100 mt-4" id="demo" ng-class="{'show':!hideAdvanceSearch}">
								<div class="col-12 d-flex justify-content-between flex-wrap flex-md-nowrap">
									<div class="form-group">
										<label for="">Domain</label>
										<select class="form-control" ng-model="vm.search.domain">
											<option value="">Select All</option>  
											<option ng-repeat="dom in vm.tree.domains" ng-value="dom.id" class="ng-binding ng-scope" ng-bind="dom.name"></option>
										</select>
									</div>
									<div class="form-group">
										<label for="">Country</label>
										<select class="form-control" ng-model="vm.search.country">
											<option value="">Select All</option>
											<option value="USA">USA</option>
											<option value="UK">UK</option>
											<option value="Australia">Australia</option>
											<option value="Belgium">Belgium</option>
											<option value="Cyprus">Cyprus</option>
											<option value="Spain">Spain</option>
											<option value="New Zealand">New Zealand</option>
											<option value="France">France</option>
											<option value="Switzerland">Switzerland</option>
											<option value="Israel">Israel</option>											
											<option value="Singapore">Singapore</option>
											<option value="Canada">Canada</option>
											<option value="Netherlands">Netherlands</option>
											<option value="Denmark">Denmark</option>
											<option value="ScotLand">ScotLand</option>											
											<option value="Norway">Norway</option>
											<option value="Holland">Holland</option>
											<option value="Germany">Germany</option>
											<option value="Mexico">Mexico</option>
											<option value="Iceland">Iceland</option>
										</select>
									</div>
									<div class="form-group">
										<label for="">Ratings</label>
										<select class="form-control" ng-model="vm.search.rating">
											<option  value="">Select All</option>
											<option  value="4">4 Star or Above</option>
											<option  value="3">3 Star</option>
											<option  value="2">2 Star</option>
											<option  value="1">1 Star</option>
											<option  value="-1">Not Rated</option>
										</select>
									</div>
									<div class="form-group">
										<label for="">Tags</label>
										<select class="form-control" ng-model="vm.search.tags">
											<option  value="">Select All</option>
											<option  ng-repeat="tag in vm.tree.tags" ng-value="tag.id" class="ng-binding ng-scope" ng-bind="tag.title"></option>
										</select>
									</div>
									<div class="form-group">
										<label for="">Year</label>
										<select class="form-control" ng-model="vm.search.creation_date">
											<option value="">Select All</option>
											<option value="2021">2021</option>
											<option value="2020">2020</option>
											<option value="2019">2019</option>
											<option value="2018">2018</option>
											<option value="2017">2017</option>
											<option value="2016">2016</option>
											<option value="2015">2015</option>
											<option value="2014">2014</option>
											<option value="2013">2013</option>
											<option value="2012">2012</option>
											<option value="2011">2011</option>
											<option value="2010">2010</option>
											<option value="2009">2009</option>
											
										</select>
									</div>
								</div>
							</div>
							</div>
							</div>
							<div class="row mt-5">
								<div class="col-12">
									<div class="heading-sec d-flex justify-content-between flex-md-row flex-column">
										<h2 class="h3 font-weight-bold mb-4" >{{vm.search.cat_id}} ({{filterData.length}})</h2>
										<div class="filter-sec d-flex">
											 <div class="form-group mr-4 d-flex align-items-center">
												<label for="sel1">Sort By</label>
												<select class="form-control" ng-model="vm.orderByField">
												  <option value="client_name">Name</option>
												  <option value="domain_name">Domain</option>
												  <option value="average_rating">Ratings</option>
												  <option value="uploaded_at">Upload Date</option>
												</select>
											  </div>
											  <div class="form-group mr-4 d-flex align-items-center">
												<select class="form-control" ng-model="vm.reverseSort">
												  <option value="1">Desc</option>
												  <option value="0">Asc</option>
												</select>
											  </div>
											  <div class="form-group d-flex align-items-center">
												<label for="sel1">Show</label>
												<select class="custom-select w-auto custom-select-sm form-control form-control-sm " ng-model="vm.pageSize" name="pageSize" id="pageSize">
												<option value="5">5</option>
												<option value="10">10</option>
												<option value="25">25</option>
												<option value="50">50</option>
												<option value="10000000">All</option>
												
												</select>
											</div>
										</div>
									</div>
										<div class="table-box table-responsive">
											<table class="table ">
												<tbody>												
												<tr ng-repeat="data in filterData = (vm.tree.nodes | filter: vm.ratingCheck('average_rating', vm.search.rating) | filter: vm.tagsChecker('tags', vm.search.tags) | filter:vm.search.cat_id:(vm.search.cat_id == ''? false:true) | filter : {domain:vm.search.domain} : vm.search.domain?true:false | filter:vm.search.country:(vm.search.country == ''? false:true) | filter : {client_name:vm.search.client_name, creation_date:vm.search.creation_date} | orderBy:vm.orderByField:(vm.reverseSort == 1? true:false))  | startFrom:vm.currentPage*vm.pageSize | limitTo: vm.pageSize ">
													<td>
														<div class="s_num" ng-click="vm.screen='add_video'; vm.video=data; vm.selectVideoIndex=data.id">{{vm.currentPage * vm.pageSize + $index + 1}}</div>
														<div class="img-box">
															<a href="javascript:;" ng-click="vm.openRatingModel(data.id, 'video')"><img ng-src="https://img.youtube.com/vi/{{data.youtube_video_id}}/0.jpg" alt="thumb" /></a>
														</div>
														<span class="title-sec">
															<!-- New -->
															<span class="title font-weight-bold" ng-bind-html="data.client_name + ', ' + data.designation+' ('+data.company_name+')'"></span>
															<span class="title font-weight-bold" ng-bind-html="data.quote"></span>
															<span class="title font-weight-bold" ng-bind-html="data.quote_long"></span>
															<!-- New -->
															<span class="content-client">
																<span class="country"><span class="flaticon-placeholder"></span> <span ng-bind-html="data.state + ', '+data.country"></span></span>
																<span class="joined"><span class="flaticon-date"></span> {{ data.creation_date }}</span>
																<span class="domain"><span class="flaticon-globe"></span> <span ng-bind-html="data.domain_name"></span></span>
															</span>
														</span>
													</td>
													<td>
														<span  class="rating-sec">
															<span class="ratings">
																<span class="flaticon-star " ng-class="{'active':data.average_rating > 0}"></span>
																<span class="flaticon-star  " ng-class="{'active':data.average_rating > 1}"></span>
																<span class="flaticon-star  " ng-class="{'active':data.average_rating > 2}"></span>
																<span class="flaticon-star  " ng-class="{'active':data.average_rating > 3}"></span>
																<span class="flaticon-star  " ng-class="{'active':data.average_rating > 4}"></span>
															</span>
															<a href="javascript:;" class="submit-rating" ng-click="vm.openRatingModel(data.id, 'rating')">Submit Your Ratings</a>
														</span>
													</td>
												</tr>
												
												</tbody>
											</table>
										</div>
										<h1  ng-if="!filterData.length">No Record Found</h1	>
										<ul class="pagination justify-content-center" ng-if="filterData.length">
											
											<li class="page-item"><button class="page-link"  ng-disabled="vm.currentPage <= 0" ng-click="vm.currentPage=(vm.currentPage-1)"><span class="flaticon-down-arrow rotate-left"></span></button></li>
											
											<li class="page-item" ng-repeat="page in vm.GetPager(filterData.length, vm.currentPage, vm.pageSize).pages" >
												<a ng-click="vm.currentPage=page-1" href="javascript:;" class="page-link" ng-class="{active:vm.currentPage == page-1}">{{page}}</a>
											</li>											
											
											<li class="page-item"><button class="page-link"  class="page-link"  ng-disabled="vm.currentPage >= filterData.length/vm.pageSize - 1" ng-click="vm.currentPage=(vm.currentPage+1)"><span class="flaticon-down-arrow rotate-right"></span></a></li>
										  </ul>
									</div>
							</div>
						</div>
					
					<div class="tab-pane fade" id="v-pills-ad" role="tabpanel" aria-labelledby="v-pills-ad-tab">						
						<h1 class="display-2">No Record Found for Video Ad</h1>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

<div class="modal d-block" ng-if="vm.openedVideo!=false" id="ratingModal">
	<div class="modal-dialog" ng-class="{'modal-lg':vm.openedVideo.type!='rating'}">
	  <div class="modal-content">
  
		<!-- Modal Header -->
		<div class="modal-header border-0 p-0">
		  <button type="button" class="close" ng-click="vm.openRatingModel(false, 'video')">&times;</button>
		</div>
  
		<div class="embed-responsive embed-responsive-16by9" ng-if="vm.openedVideo.type!='rating'">
		  <iframe class="embed-responsive-item" ng-src="{{vm.trustSrc(vm.openedVideo.youtube_video_url)}}"></iframe>
		</div>  
  
		<!-- Modal body -->
		<div class="modal-body pt-5 text-center" ng-if="vm.openedVideo.type=='rating'">
		  <div class="img-sec">
			  <img ng-src="https://img.youtube.com/vi/{{vm.openedVideo.youtube_video_id}}/0.jpg" alt="thumb" />
		  </div>
		  <h3 class="font-weight-bold mt-4 h3">Liked it?</h3>
		  <p  class="h6 px-5">If you like our video, Please take<br/> a moment to rate it</p>
		</div>
		<div class="ratings-footer text-center" ng-if="vm.openedVideo.type=='rating'">
			<a href="javascript:;" ng-click="vm.openedVideo.user_rating = 1"><span class="flaticon-star " ng-class="{'active':vm.openedVideo.user_rating > 0}"></span></a>
			<a href="javascript:;" ng-click="vm.openedVideo.user_rating = 2"><span class="flaticon-star " ng-class="{'active':vm.openedVideo.user_rating > 1}"></span></a>
			<a href="javascript:;" ng-click="vm.openedVideo.user_rating = 3"><span class="flaticon-star " ng-class="{'active':vm.openedVideo.user_rating > 2}"></span></a>
			<a href="javascript:;" ng-click="vm.openedVideo.user_rating = 4"><span class="flaticon-star " ng-class="{'active':vm.openedVideo.user_rating > 3}"></span></a>
			<a href="javascript:;" ng-click="vm.openedVideo.user_rating = 5"><span class="flaticon-star " ng-class="{'active':vm.openedVideo.user_rating > 4}"></span></a>
			
		</div>
		<!-- Modal footer -->
		<div class="modal-footer justify-content-between p-0" ng-if="vm.openedVideo.type=='rating'">
			<button type="button" class="btn btn-default m-0 w-50 text-center rounded-0" ng-click="vm.openRatingModel(false, 'video')">Cancel</button>
			<button type="button" class="btn btn-primary m-0 w-50 text-center rounded-0" ng-click="vm.saveRating(vm.openedVideo.user_rating)">Submit</button>
		</div>
  
	  </div>
	</div>
  </div>
<div class="modal-backdrop show" ng-if="vm.openedVideo!=false"></div>
  
<div class="modal" id="dataModal">
	<div class="modal-dialog modal-xl">
		<div class="modal-content">

		<!-- Modal Header -->
		<div class="modal-header">
			<h3 class="modal-title font-weight-bold h4">54 Videos Uploaded this Month</h3>
			<button type="button" class="close" data-dismiss="modal">&times;</button>
		</div>

		<!-- Modal body -->
		<div class="modal-body domain pt-4 text-center">
			<div class="row">
				<div class="col-md-4">
					<div class="rounded-xl bg-white shadow w-100">
						<h5 class="h5 px-4 py-2 border-bottom text-left d-flex align-items-center"><span class="flat-icons flaticon-money mr-3"></span>Cost Savings</h5>
						<ul class="list-unstyled domain-list">
							<li>
								<span class="left-text">PHP</span>
								<span class="left-right font-weight-bold">11</span>
							</li>
							<li>
								<span class="left-text">Data Entry</span>
								<span class="left-right font-weight-bold">8</span>
							</li>
							<li>
								<span class="left-text">Java</span>
								<span class="left-right font-weight-bold">3</span>
							</li>
							<li>
								<span class="left-text">Virtual Assistant</span>
								<span class="left-right font-weight-bold">2</span>
							</li>
						</ul>
					</div>
				</div>
				<div class="col-md-4 my-lg-0 my-3">
					<div class="rounded-xl bg-white shadow w-100">
						<h5 class="h5 px-4 py-2 border-bottom text-left d-flex align-items-center"><span class="flat-icons flaticon-knowledge mr-3"></span>Case Study</h5>
						<ul class="list-unstyled domain-list">
							<li>
								<span class="left-text">PHP</span>
								<span class="left-right font-weight-bold">11</span>
							</li>
							<li>
								<span class="left-text">Data Entry</span>
								<span class="left-right font-weight-bold">8</span>
							</li>
							<li>
								<span class="left-text">Java</span>
								<span class="left-right font-weight-bold">3</span>
							</li>
							<li>
								<span class="left-text">Virtual Assistant</span>
								<span class="left-right font-weight-bold">2</span>
							</li>
						</ul>
					</div>
				</div>
				<div class="col-md-4">
					<div class="rounded-xl bg-white shadow w-100">
						<h5 class="h5 px-4 py-2 border-bottom text-left d-flex align-items-center"><span class="flat-icons flaticon-rating mr-3"></span>Testimonials</h5>
						<ul class="list-unstyled domain-list">
							<li>
								<span class="left-text">PHP</span>
								<span class="left-right font-weight-bold">11</span>
							</li>
							<li>
								<span class="left-text">Data Entry</span>
								<span class="left-right font-weight-bold">8</span>
							</li>
							<li>
								<span class="left-text">Java</span>
								<span class="left-right font-weight-bold">3</span>
							</li>
							<li>
								<span class="left-text">Virtual Assistant</span>
								<span class="left-right font-weight-bold">2</span>
							</li>
						</ul>
					</div>
				</div>
			</div>
			
			<div class="row mt-5">
				<div class="col-12">
					<div class="heading-sec d-flex justify-content-between flex-md-row flex-column">
						<h2 class="h3 font-weight-bold mb-4">Cost Savings</h2>
						<div class="filter-sec d-flex">
							 <div class="form-group mr-4 d-flex align-items-center">
								<label for="sel1">Sort By</label>
								<select class="form-control" id="sel1">
								  <option>Name</option>
								  <option>Domain</option>
								  <option>Ratings</option>
								</select>
							  </div>
							  <div class="form-group d-flex align-items-center">
								<label for="sel1">Show</label>
								<select class="form-control" id="sel1">
								<option>5</option>
								<option>10</option>
								<option>15</option>
								</select>
							</div>
						</div>
					</div>
						<div class="table-box table-responsive">
							<table class="table ">
								<tbody>
								<tr>
									<td>
										<div class="img-box">
											<img src="img/thumb.png" alt="thumb" />
										</div>
										<span class="title-sec">
											<span class="title font-weight-bold">Larry Spencer, VP (Sceris)</span>
											<span class="content-client">
												<span class="country"><span class="flaticon-placeholder"></span> California, USA</span>
												<span class="joined"><span class="flaticon-date"></span> June 2010</span>
												<span class="domain"><span class="flaticon-globe"></span> PHP</span>
											</span>
										</span>
									</td>
									<td>
										<span  class="rating-sec">
											<span class="ratings">
												<span class="flaticon-star active"></span>
												<span class="flaticon-star active"></span>
												<span class="flaticon-star active"></span>
												<span class="flaticon-star active"></span>
												<span class="flaticon-star active"></span>
											</span>

										</span>
									</td>
								</tr>
								<tr>
									<td>
										<div class="img-box">
											<img src="img/thumb-2.png" alt="thumb" />
										</div>
										<span class="title-sec">
											<span class="title font-weight-bold">Glenn Innis, CEO (Giioo)</span>
											<span class="content-client">
												<span class="country"><span class="flaticon-placeholder"></span> London, United Kingdom</span>
												<span class="joined"><span class="flaticon-date"></span> Jan 2009</span>
												<span class="domain"><span class="flaticon-globe"></span> Dot Net</span>
											</span>
										</span>
									</td>
									<td>
										<span  class="rating-sec">
											<span class="ratings">
												<span class="flaticon-star active"></span>
												<span class="flaticon-star active"></span>
												<span class="flaticon-star active"></span>
												<span class="flaticon-star active"></span>
												<span class="flaticon-star"></span>
											</span>

										</span>
									</td>
								</tr>
								<tr>
									<td>
										<div class="img-box">
											<img src="img/thumb-3.png" alt="thumb" />
										</div>
										<span class="title-sec">
											<span class="title font-weight-bold">Keith Duarte, CEO (Datafrenzy)</span>
											<span class="content-client">
												<span class="country"><span class="flaticon-placeholder"></span> California, USA</span>
												<span class="joined"><span class="flaticon-date"></span> July 2015</span>
												<span class="domain"><span class="flaticon-globe"></span> Data Entry</span>
											</span>
										</span>
									</td>
									<td>
										<span  class="rating-sec">
											<span class="ratings">
												<span class="flaticon-star active"></span>
												<span class="flaticon-star active"></span>
												<span class="flaticon-star active"></span>
												<span class="flaticon-star active"></span>
												<span class="flaticon-star"></span>
											</span>

										</span>
									</td>
								</tr>
								<tr>
									<td>
										<div class="img-box">
											<img src="img/thumb-4.png" alt="thumb" />
										</div>
										<span class="title-sec">
											<span class="title font-weight-bold">Brian Taylor, Supervisor (Supplycor)</span>
											<span class="content-client">
												<span class="country"><span class="flaticon-placeholder"></span> New York, US</span>
												<span class="joined"><span class="flaticon-date"></span> June 2010</span>
												<span class="domain"><span class="flaticon-globe"></span> Virtual Assistant</span>
											</span>
										</span>
									</td>
									<td>
										<span  class="rating-sec">
											<span class="ratings">
												<span class="flaticon-star active"></span>
												<span class="flaticon-star active"></span>
												<span class="flaticon-star active"></span>
												<span class="flaticon-star"></span>
												<span class="flaticon-star"></span>
											</span>

										</span>
									</td>
								</tr>
								<tr>
									<td>
										<div class="img-box">
											<img src="img/thumb-5.png" alt="thumb" />
										</div>
										<span class="title-sec">
											<span class="title font-weight-bold">Simon McCaroll, Director  (Printbots)</span>
											<span class="content-client">
												<span class="country"><span class="flaticon-placeholder"></span> Cardiff, UK</span>
												<span class="joined"><span class="flaticon-date"></span> June 2015</span>
												<span class="domain"><span class="flaticon-globe"></span> Dot Net</span>
											</span>
										</span>
									</td>
									<td>
										<span  class="rating-sec">
											<span class="ratings">
												<span class="flaticon-star active"></span>
												<span class="flaticon-star active"></span>
												<span class="flaticon-star active"></span>
												<span class="flaticon-star"></span>
												<span class="flaticon-star"></span>
											</span>
										</span>
									</td>
								</tr>
								</tbody>
							</table>
						</div>
						<ul class="pagination justify-content-center">
							<li class="page-item"><a class="page-link" href="javascript:void(0);"><span class="flaticon-down-arrow rotate-left"></span></a></li>
							<li class="page-item"><a class="page-link active" href="javascript:void(0);">1</a></li>
							<li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
							<li class="page-item"><a class="page-link" href="javascript:void(0);">3</a></li>
							<li class="page-item"><a class="page-link" href="javascript:void(0);">4</a></li>
							<li class="page-item"><a class="page-link" href="javascript:void(0);"><span class="flaticon-down-arrow rotate-right"></span></a></li>
						  </ul>
					</div>
				</div>
		</div>
		</div>
	</div>
</div>
