@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;
		/* background:#000; */
	}
	.video_title{
		max-height: 140px;
		overflow-y: scroll;
	}
</style>
@include('includes.topbar')
	<section class="h4-about s-padding ">
		
		<div class="container">
			<div class="row align-items-center">

				<div class="col-lg-12">
					<div class="about-content">
					
					<div class="container-fluid">
						<div class="row">
							<div class="col-lg-12">
							
							<ul class="nav nav-tabs row" id="myTab" role="tablist">		
									<li class="nav-item col-md-3 col-6">
										<a class="nav-link " id="all_tab" data-bs-toggle="tab" href="#allResult" role="tab" aria-controls="allResult" aria-selected="true"> All</a>
									</li>
									<li class="nav-item col-md-3 col-6">
										<a class="nav-link " id="tags_tab" data-bs-toggle="tab" href="#tagResult" role="tab" aria-controls="tagResult" aria-selected="true"> Tags</a>
									</li>
									<li class="nav-item col-md-3 col-6">
										<a class="nav-link " id="people_tab" data-bs-toggle="tab" href="#peopleResult" role="tab" aria-controls="peopleResult" aria-selected="true"> People</a>
									</li>
									<li class="nav-item col-md-3 col-6">
										<a class="nav-link " id="video_tab" data-bs-toggle="tab" href="#videoResult" role="tab" aria-controls="videoResult" aria-selected="true"> Video</a>
									</li>
									
								</ul>
							</div>
						</div>
						<div class="row">
							<div class="tab-content col-md-12" id="myTabContent">
								<div class="row tab-pane fade " id="allResult" role="tabpanel" aria-labelledby="allResult">
									<div class="row">
										<div class="col-md-8">
											<h3 class="mt-2">Tags</h3>
										</div>
										@if(count($hashTags)>0)
										<div class="col-md-4 text-right"><a class="viewMore" id="viewMoreTags">View More</a></div>
										@endif
									</div>
									<div class="row allTag">