@extends('layouts.front')

@section('content')
<style>
	.bg-btn {
		/* background: linear-gradient(50deg, rgb(115,80,199) 0%, rgb(236,74,99) 100%); */

		padding: 10px 0;
		color: #fff;
		border-radius: 2px;
	}

	#myTab li {
		text-align: center;
		font-size: 20px;

	}

	#myTab li a {
		padding: 12px;
	}

	/* .nav-item .active{
		color: "{{MyFunctions::getTopbarColor()}}";
	
	} */
	.tag {
		border: 1px solid;
		padding: 6px;
		display: inline-block;
		border-radius: 4px;
		text-align: center;
		min-width: 100%;
		font-size: 20px;
		background: #656464;
		color: #fefefe;
		border-color: #656464;
		margin: 5px 0px;
	}

	.card {
		padding-top: 10px;
	}

	#peopleResult .card .card-img-top,
	.allPeople .card .card-img-top {
		width: 100px;
		margin: auto;
		border-radius: 50%;
	}

	.follow_btn {
		padding: 10px 16px 7px 16px;
		font-size: 14px;
	}

	#peopleResult .card,
	#videoResult .card,
	.allVideo .card {
		background: #ebeaea;
	}

	#videoResult .video-thumb,
	.allVideo .video-thumb {
		height: 350px;
		border-bottom: 1px solid #ccc;
	}

	#videoResult .video-thumb img,
	.allVideo .video-thumb img {
		height: 100%;
		object-fit: cover;
	}

	#videoResult .card-body p,
	.allVideo .card-body p {
		margin-bottom: .25rem !important;
	}

	.viewMore {
		padding: 6px 10px;
		display: inline-block;
		margin-top: 12px;
		color: #007bff !important;
		cursor: pointer;
	}

	.loadMoreResult {
		padding: 7px 14px;
		border: 0px;
		background: #c8cdcd;
		border-radius: 4px;
		cursor: pointer;
	}

	.loadMoreResult:focus {
		border: 0px;
		outline: none;
	}

	.moreVideo .card-body {
		min-height: 100px;
	}

	/* .video-container,.video-section{
		width: 100%;
		min-height: 440px;
		height: 440px;
		object-fit: fill;
		cursor: pointer;
	} */
	.video_title {
		max-height: 140px;
		overflow-y: scroll;
	}

	@media only screen and (min-width: 1200px) {
		#leukeVideos1 .video-container {
			height: 275px;
			margin-bottom: 0;
		}
	}

	#leukeVideos1 .video-container {
		position: relative;
		width: 100%;
		height: 300px;
		/* or any fixed height you want */
		overflow: hidden;
		border-radius: 2px;
	}

	#leukeVideos1 .video-container video {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		background-color: #000;
		border-radius: 2px;
	}

	#leukeVideos1 {
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		display: grid;
		gap: 8px;
	}
</style>

<section class="pt-4 vh-94">
	<div class="container-fluid">
		<div class="row align-items-center">
			<div class="col-xl-2 col-lg-2 col-md-2">
				@include('includes.leftSidebar')
			</div>

			<div class="col-xl-10 col-lg-10 col-md-10 m-auto">
				<div class="right-container m-auto">
					<div class="right-container m-auto">

						<div class="container-fluid">
							<div class="row">
								<div class="col-md-12">
									<h3 class="mt-2">{{'#'.$search}}</h3>
								</div>
							</div>
							<div class="mt-2 moreVideo" id="leukeVideos1">
								@php
								$count=0;
								$x = 1;
								@endphp
								@if($videos)
								@foreach ($videos as $video)
								@include("partials.userVideo")
								@php
								$count++;
								$x++;
								@endphp
								@endforeach

								@else
								<div class="col-md-12">
									<h6 class="mt-2">
										No Video Found...
									</h6>
								</div>
								@endif
							</div>

							@if($loadedVideos < $totalVideos)
								<!-- <div class="col-12 text-center">
								<button class="loadMoreResult m-2">Load More..</button>
						</div> -->
						@endif
					</div>
				</div>
			</div>
		</div>

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


	<!-- Modal -->
@include('partials.leukeModal')

</section><!-- about -->
@include('includes.modalVideoJs')
@endsection