@extends('site.layouts.main')
@section('content')

<section class="videos">
    <div class="container">
        <div class="row justify-content-center">
            @isset($hows)
            <div class="col-md-8">
                <video controls>
                    <source src="{{ @$hows->first()->video }}" type="video/mp4">
                </video>
                <p class="description">
                    {{ @$hows->first()->title }}
                </p>
            </div>
            @endisset

            <div class="col-md-12 mt-5">
                <div class="slide">
                    @foreach($hows as $how)
                    <div class="col-md-12">
                        <div class="item" data-video="{{ asset($how->video) }}">
                            <div class="img"
                                style="background-image: url({{ asset('main_site/img/jens-kreuter-ngMtsE5r9eI-unsplash.jpg') }});">
                                <i class="fas fa-play-circle"></i>
                            </div>
                            <p>{{ $how->title }}</p>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>

    </div>
</section>
@endsection