@extends('student.layouts.app')
@section('titlePage', 'Manage Page')
@section('content')
<script>
    document.getElementById("ktss-12").classList.add("active");
</script>
<div class="row mt-3">
	<div class="col-sm-12 col-md-12">
		<div class="card">
			<!-- <div class="row"> -->
			<div class="card-body p-0">
				<div class="p-sm-2 p-1 border-bottom d-flex justify-content-between align-center">
					<h2 class="text-primary mb-1">{{$data->title}}</h2>
					<div class="justify-content-center">
						<ol class="breadcrumb breadcrumb-style3">
							<li class="breadcrumb-item tx-15"><a href="{{ _route('student.soft-skills.list') }}"><i class="feather icon-home"></i></a></li>
							<li class="breadcrumb-item active">Soft Skill</li>
						</ol>
					</div>
				</div>
				<div class=" p-sm-4 p-3">
					<div class="row">
						<div class="col-md-12">
							<div class="results-all">
								<div class="main-result-container">
										
										<!-- <div style="position: relative; padding-top: 56.25%;">
											<iframe src="https://iframe.mediadelivery.net/embed/102326/{{$videoUrl}}?autoplay=true" loading="lazy" style="border: none; position: absolute; top: 0; height: 100%; width: 100%;" allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;" allowfullscreen="true">
											</iframe>
										</div> -->
										<div style="position: relative; padding-top: 56.25%;"><iframe src="https://iframe.mediadelivery.net/embed/102326/{{$videoUrl}}?autoplay=true" loading="lazy" style="border: none; position: absolute; top: 0; height: 100%; width: 100%;" allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;" allowfullscreen="true"></iframe></div>
										<div class="d-flex align-items-center mb-1">
											<span><i class="fe fe-calendar me-3 tx-14"></i>{{$data->created_at}}</span>
										</div>
                                    	<p class="mb-0"><span class="font-weight-semibold">{!! $data->description !!}</span></p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
@endsection
@section('script') 
<script src="https://player.vimeo.com/api/player.js"></script>
@endsection