@extends('front.layouts.front')
@section('content')
    <section class="section section--bg section--first bg-home">
        <div class="container">
            <div class="row">
                <!-- title -->
                <div class="col-12">
                    <div class="section__title-wrap">
                        <h2 class="section__title section__title--title"><b>Trending</b> pushes</h2>
                        <div class="section__nav-wrap">
                            <button class="section__nav section__nav--bg section__nav--prev" type="button"
                                data-nav="#carousel0">
                                <svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'>
                                    <polyline points='328 112 184 256 328 400'
                                        style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px' />
                                </svg>
                            </button>
                            <button class="section__nav section__nav--bg section__nav--next" type="button"
                                data-nav="#carousel0">
                                <svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'>
                                    <polyline points='184 112 328 256 184 400'
                                        style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px' />
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>
                <!-- end title -->
            </div>
        </div>

        <!-- carousel -->
        <div class="owl-carousel section__carousel section__carousel--big" id="carousel0">
            <!-- big card -->
            @foreach ($Trendings as $Trending)
            <div class="card card--big">
                <a href="{{ route('moviedetail',[$Trending->title->ttid]) }}" class="card__cover">
                    <img src="{{ $Trending->title->poster }}" alt="{{ $Trending->title->title }}">
                </a>

                <div class="card__wrap">
                    <div class="card__title">
                        <h3><a href="{{ route('moviedetail',[$Trending->title->ttid]) }}">{{ $Trending->title->title }}</a></h3>
                    </div>

                    <ul class="card__list">
                        <li><span>Release date:</span> {{ date("d.m.Y", strtotime($Trending->title->release_date)) }}</li>
                        <li><span>Genres:</span>
                            {{-- @foreach ($Trending->title->genres as $key => $genres)
                                {{ $genres->genres->title }},
                            @endforeach</li> --}}
                            {{ $Trending->title->genre }}
                    </ul>

                    <div class="social-share">
                        <a href="https://www.facebook.com/sharer/sharer.php?u={{ route('moviedetail',[$Trending->title->ttid]) }}" class="fb"><i class="fa-brands fa-facebook-f"></i></a>
                        <a href="https://twitter.com/intent/tweet?text={{ route('moviedetail',[$Trending->title->ttid]) }}" class="tw"><i class="fa-brands fa-twitter"></i></a>
                    </div>

                    <div class="description mt-2">{{ substr($Trending->title->description, 0,200) }}@if(strlen($Trending->title->description) > 200)...@endif</div>

                    <div class="card__actions">
                        <a href="{{ route('moviedetail',[$Trending->title->ttid]) }}" class="card__buy" type="button">Details</a>

                        <button class="card__favorite favorite_{{ $Trending->title->id }}" type="button" data-id="{{ $Trending->title->id }}">
                            <svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'>
                                <path d='M352.92,80C288,80,256,144,256,144s-32-64-96.92-64C106.32,80,64.54,124.14,64,176.81c-1.1,109.33,86.73,187.08,183,252.42a16,16,0,0,0,18,0c96.26-65.34,184.09-143.09,183-252.42C447.46,124.14,405.68,80,352.92,80Z'
                                    style='@if($Trending->title->favorite) fill:#a782e9; @else fill:none; @endif stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
            @endforeach
            <!-- end big card -->

            <!-- big card -->
            {{-- <div class="card card--big">
                <a href="{{ route('details') }}" class="card__cover">
                    <img src="{{ url('assets/img/cards/Bullet-Proofposter1.png') }}" alt="">
                </a>

                <div class="card__wrap">
                    <div class="card__title">
                        <h3><a href="{{ route('details') }}">Bullet Proof</a></h3>
                    </div>

                    <ul class="card__list">
                        <li><span>Release date:</span> 24.03.2016</li>
                        <li><span>Genres:</span> Action, Role Playing, Open World</li>
                    </ul>

                    <div class="social-share">
                        <a href="#_" class="fb"><i class="fa-brands fa-facebook-f"></i></a>
                        <a href="#_" class="tw"><i class="fa-brands fa-twitter"></i></a>
                    </div>

                    <div class="description mt-2">
                        Many desktop publishing packages and web page
                        editors now use Lorem Ipsum as their default model text, and a search
                        for 'lorem ipsum' will uncover many web sites still in their infancy.
                    </div>

                    <div class="card__actions">
                        <a href="{{ route('details') }}" class="card__buy" type="button">Details</a>

                        <button class="card__favorite" type="button">
                            <svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'>
                                <path
                                    d='M352.92,80C288,80,256,144,256,144s-32-64-96.92-64C106.32,80,64.54,124.14,64,176.81c-1.1,109.33,86.73,187.08,183,252.42a16,16,0,0,0,18,0c96.26-65.34,184.09-143.09,183-252.42C447.46,124.14,405.68,80,352.92,80Z'
                                    style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
                            </svg>
                        </button>
                    </div>
                </div>
            </div> --}}
            <!-- end big card -->

            <!-- big card -->
            {{-- <div class="card card--big">
                <a href="{{ route('details') }}" class="card__cover">
                    <img src="{{ url('assets/img/cards/9.jpg') }}" alt="">
                </a>

                <div class="card__wrap">
                    <div class="card__title">
                        <h3><a href="{{ route('details') }}">The Legend of Heroes: Trails in the Sky SC</a></h3>
                    </div>

                    <ul class="card__list">
                        <li><span>Release date:</span> 07.12.2015</li>
                        <li><span>Genres:</span> Role-playing, Turn-based, Fantasy</li>
                    </ul>

                    <div class="social-share">
                        <a href="#_" class="fb"><i class="fa-brands fa-facebook-f"></i></a>
                        <a href="#_" class="tw"><i class="fa-brands fa-twitter"></i></a>
                    </div>

                    <div class="description mt-2">
                        Many desktop publishing packages and web page
                        editors now use Lorem Ipsum as their default model text, and a search
                        for 'lorem ipsum' will uncover many web sites still in their infancy.
                    </div>

                    <div class="card__actions">
                        <a href="{{ route('details') }}" class="card__buy" type="button">Details</a>

                        <button class="card__favorite" type="button">
                            <svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'>
                                <path
                                    d='M352.92,80C288,80,256,144,256,144s-32-64-96.92-64C106.32,80,64.54,124.14,64,176.81c-1.1,109.33,86.73,187.08,183,252.42a16,16,0,0,0,18,0c96.26-65.34,184.09-143.09,183-252.42C447.46,124.14,405.68,80,352.92,80Z'
                                    style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
                            </svg>
                        </button>
                    </div>
                </div>
            </div> --}}
            <!-- end big card -->

            <!-- big card -->
            {{-- <div class="card card--big">
                <a href="{{ route('details') }}" class="card__cover">
                    <img src="{{ url('assets/img/cards/5.jpg') }}" alt="">
                </a>

                <div class="card__wrap">
                    <div class="card__title">
                        <h3><a href="{{ route('details') }}">Pillars of Eternity: Hero Edition</a></h3>
                    </div>

                    <ul class="card__list">
                        <li><span>Release date:</span> 18.09.2019</li>
                        <li><span>Genres:</span> Role-playing, Adventure, Fantasy</li>
                    </ul>

                    <div class="social-share">
                        <a href="#_" class="fb"><i class="fa-brands fa-facebook-f"></i></a>
                        <a href="#_" class="tw"><i class="fa-brands fa-twitter"></i></a>
                    </div>

                    <div class="description mt-2">
                        Many desktop publishing packages and web page
                        editors now use Lorem Ipsum as their default model text, and a search
                        for 'lorem ipsum' will uncover many web sites still in their infancy.
                    </div>

                    <div class="card__actions">
                        <a href="{{ route('details') }}" class="card__buy" type="button">Details</a>

                        <button class="card__favorite" type="button">
                            <svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'>
                                <path
                                    d='M352.92,80C288,80,256,144,256,144s-32-64-96.92-64C106.32,80,64.54,124.14,64,176.81c-1.1,109.33,86.73,187.08,183,252.42a16,16,0,0,0,18,0c96.26-65.34,184.09-143.09,183-252.42C447.46,124.14,405.68,80,352.92,80Z'
                                    style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
                            </svg>
                        </button>
                    </div>
                </div>
            </div> --}}
            <!-- end big card -->
        </div>
        <!-- end carousel -->
    </section>
@endsection
@section('end-content')
    {{-- Begin:: Category --}}
    <section class="section">
        <div class="container">
            <div class="section__title-wrap">
                <h2 class="section__title">Genres</h2>
            </div>
            <div class="details__gallery border-top-0 mt-0 category-listing">
                <div class="details__carousel movie-detail owl-carousel" id="details__carousel">
                    @foreach (Genres() as $Genre)
                    {{-- @if(count($Genre->titles) > 0) --}}
                        <a href="{{ route('browse') }}?g[]={{ $Genre->id }}">
                            <img src="{{ $Genre->image }}" alt="{{ $Genre->title }}">
                            <h5>{{ $Genre->title }}</h5>
                        </a>
                    {{-- @endif --}}
                    @endforeach
                </div>

                <button class="details__nav details__nav--prev" data-nav="#details__carousel" type="button">
                    <svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'>
                        <polyline points='328 112 184 256 328 400' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px' />
                    </svg>
                </button>
                <button class="details__nav details__nav--next" data-nav="#details__carousel" type="button">
                    <svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'>
                        <polyline points='184 112 328 256 184 400' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px' />
                    </svg>
                </button>
            </div>
        </div>
    </section>
    {{-- End:: Category --}}

    @include('front.layouts.omg-special');

    @foreach (Genres() as $Genre)
    @if(count($Genre->titles) > 0)
        <section class="section">
            <div class="container">
                <div class="row">
                    <!-- title -->
                    <div class="col-12">
                        <div class="section__title-wrap section__title-wrap--single">
                            <h2 class="section__title">{{ $Genre->title }}</h2>
                            <div class="section__nav-wrap">
                                <a href="{{ route('browse') }}?g[]={{ $Genre->id }}" class="section__view">View All</a>
                                @if(count($Genre->titles) > 5)
                                    <button class="section__nav section__nav--prev" type="button" data-nav="#carousel{{ $Genre->id }}">
                                        <svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'>
                                            <polyline points='328 112 184 256 328 400' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px' />
                                        </svg>
                                    </button>
                                    <button class="section__nav section__nav--next" type="button" data-nav="#carousel{{ $Genre->id }}">
                                        <svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'>
                                            <polyline points='184 112 328 256 184 400' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px' />
                                        </svg>
                                    </button>
                                @endif
                            </div>
                        </div>
                    </div>
                    <!-- end title -->
                </div>

                <div class="owl-carousel section__carousel section__carousel--catalog" id="carousel{{ $Genre->id }}">
                    @foreach ($Genre->titles as $key => $Title)
                        <div class="card">
                            <a href="{{ route('moviedetail',[$Title->titles->ttid]) }}" class="card__cover">
                                <img src="{{ $Title->titles->poster }}" alt="{{ $Title->titles->title }}">
                            </a>
                            <div>
                            <div class="social-share card__platforms">
                                <a href="https://www.facebook.com/sharer/sharer.php?u={{ route('moviedetail',[$Title->titles->ttid]) }}" class="fb"><i class="fa-brands fa-facebook-f"></i></a>
                                <a href="https://twitter.com/intent/tweet?text={{ route('moviedetail',[$Title->titles->ttid]) }}" class="tw"><i class="fa-brands fa-twitter"></i></a>
                            </div>
                            <div class="movie-desc">
                                <div class="card__title">
                                    <h3><a href="{{ route('moviedetail',[$Title->titles->ttid]) }}">{{ $Title->titles->title }}</a></h3>
                                </div>
                            </div>
                            <button class="card__favorite favorite_{{ $Title->titles->id }}" type="button" data-id="{{ $Title->titles->id }}">
                                <svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'>
                                    <path d='M352.92,80C288,80,256,144,256,144s-32-64-96.92-64C106.32,80,64.54,124.14,64,176.81c-1.1,109.33,86.73,187.08,183,252.42a16,16,0,0,0,18,0c96.26-65.34,184.09-143.09,183-252.42C447.46,124.14,405.68,80,352.92,80Z'
                                    style='@if($Title->titles->favorite) fill:#a782e9; @else fill:none; @endif stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
                                </svg>
                            </button>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
        @endif
    @endforeach



    {{-- @include('front.layouts.latest-release')
    @include('front.layouts.unlimited-download') --}}



     <!-- section -->
     <section class="section">
        <div class="container">
            <div class="row">
                <div class="col-12 col-md-6 col-xl-4">
                    <div class="row">
                        <div class="col-12">
                            <!-- title -->
                            <div class="section__title-wrap section__title-wrap--single">
                                <h2 class="section__title section__title--small">Multiplex Movies</h2>

                                <div class="section__nav-wrap">
                                    <a href="#" class="section__view">View All</a>
                                </div>
                            </div>
                            <!-- end title -->

                            <!-- cards -->
                            <ul class="list list--mb">
                                <li class="list__item">
                                    <a href="#" class="list__cover">
                                        <img src={{ url('assets/img/cards/7.jpg') }} alt="">
                                    </a>

                                    <div class="list__wrap">
                                        <h3 class="list__title">
                                            <a href="#">The Evil Within: The Assignment</a>
                                        </h3>
                                        <p class="small text-white text-muted">Many desktop publishing packages and web
                                            page editors now use Lorem Ipsum as their default model text, </p>

                                            <div class="d-flex justify-content-between w-100">
                                                <button class="btn btn-theme" type="button">
                                                    Watch now
                                                </button>
                                                <button class="card__favorite" type="button">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512"
                                                        viewBox="0 0 512 512">
                                                        <path
                                                            d="M352.92,80C288,80,256,144,256,144s-32-64-96.92-64C106.32,80,64.54,124.14,64,176.81c-1.1,109.33,86.73,187.08,183,252.42a16,16,0,0,0,18,0c96.26-65.34,184.09-143.09,183-252.42C447.46,124.14,405.68,80,352.92,80Z"
                                                            style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px">
                                                        </path>
                                                    </svg>
                                                </button>
                                            </div>
                                    </div>
                                </li>
                                <li class="list__item">
                                    <a href="#" class="list__cover">
                                        <img src={{ url('assets/img/cards/7.jpg') }} alt="">
                                    </a>

                                    <div class="list__wrap">
                                        <h3 class="list__title">
                                            <a href="#">DROD 4: Gunthro and the Epic Blunder</a>
                                        </h3>

                                        <p class="small text-white text-muted">Many desktop publishing packages and web
                                            page editors now use Lorem Ipsum as their default model text, </p>

                                            <div class="d-flex justify-content-between w-100">
                                                <button class="btn btn-theme" type="button">
                                                    Watch now
                                                </button>
                                                <button class="card__favorite" type="button">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512"
                                                        viewBox="0 0 512 512">
                                                        <path
                                                            d="M352.92,80C288,80,256,144,256,144s-32-64-96.92-64C106.32,80,64.54,124.14,64,176.81c-1.1,109.33,86.73,187.08,183,252.42a16,16,0,0,0,18,0c96.26-65.34,184.09-143.09,183-252.42C447.46,124.14,405.68,80,352.92,80Z"
                                                            style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px">
                                                        </path>
                                                    </svg>
                                                </button>
                                            </div>
                                    </div>
                                </li>
                                <li class="list__item">
                                    <a href="#" class="list__cover">
                                        <img src={{ url('assets/img/cards/7.jpg') }} alt="">
                                    </a>

                                    <div class="list__wrap">
                                        <h3 class="list__title">
                                            <a href="#">Conquests of the Longbow: The Legend of Robin Hood</a>
                                        </h3>

                                        <p class="small text-white text-muted">Many desktop publishing packages and web
                                            page editors now use Lorem Ipsum as their default model text, </p>

                                        <div class="d-flex justify-content-between w-100">
                                            <button class="btn btn-theme" type="button">
                                                Watch now
                                            </button>
                                            <button class="card__favorite" type="button">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512"
                                                    viewBox="0 0 512 512">
                                                    <path
                                                        d="M352.92,80C288,80,256,144,256,144s-32-64-96.92-64C106.32,80,64.54,124.14,64,176.81c-1.1,109.33,86.73,187.08,183,252.42a16,16,0,0,0,18,0c96.26-65.34,184.09-143.09,183-252.42C447.46,124.14,405.68,80,352.92,80Z"
                                                        style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px">
                                                    </path>
                                                </svg>
                                            </button>
                                        </div>
                                </li>
                            </ul>
                            <!-- end cards -->
                        </div>
                    </div>
                </div>

                <div class="col-12 col-md-6 col-xl-4">
                    <div class="row">
                        <div class="col-12">
                            <!-- title -->
                            <div class="section__title-wrap section__title-wrap--single">
                                <h2 class="section__title section__title--small">Watch with Friends</h2>

                                <div class="section__nav-wrap">
                                    <a href="#" class="section__view">View All</a>
                                </div>
                            </div>
                            <!-- end title -->

                            <!-- cards -->
                            <ul class="list list--mb">
                                <li class="list__item">
                                    <a href="#" class="list__cover">
                                        <img src={{ url('assets/img/cards/7.jpg') }} alt="">
                                    </a>

                                    <div class="list__wrap">
                                        <h3 class="list__title">
                                            <a href="#">Phantasmagoria 2: A Puzzle of Flesh</a>
                                        </h3>

                                        <p class="small text-white text-muted">Many desktop publishing packages and web
                                            page editors now use Lorem Ipsum as their default model text, </p>

                                            <div class="d-flex justify-content-between w-100">
                                                <button class="btn btn-theme" type="button">
                                                    Watch now
                                                </button>
                                                <button class="card__favorite" type="button">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512"
                                                        viewBox="0 0 512 512">
                                                        <path
                                                            d="M352.92,80C288,80,256,144,256,144s-32-64-96.92-64C106.32,80,64.54,124.14,64,176.81c-1.1,109.33,86.73,187.08,183,252.42a16,16,0,0,0,18,0c96.26-65.34,184.09-143.09,183-252.42C447.46,124.14,405.68,80,352.92,80Z"
                                                            style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px">
                                                        </path>
                                                    </svg>
                                                </button>
                                            </div>
                                    </div>
                                </li>
                                <li class="list__item">
                                    <a href="#" class="list__cover">
                                        <img src={{ url('assets/img/cards/7.jpg') }} alt="">
                                    </a>

                                    <div class="list__wrap">
                                        <h3 class="list__title">
                                            <a href="#">Shadowrun Hong Kong - Extended Edition Deluxe Upgrade</a>
                                        </h3>

                                        <p class="small text-white text-muted">Many desktop publishing packages and web
                                            page editors now use Lorem Ipsum as their default model text, </p>

                                            <div class="d-flex justify-content-between w-100">
                                                <button class="btn btn-theme" type="button">
                                                    Watch now
                                                </button>
                                                <button class="card__favorite" type="button">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512"
                                                        viewBox="0 0 512 512">
                                                        <path
                                                            d="M352.92,80C288,80,256,144,256,144s-32-64-96.92-64C106.32,80,64.54,124.14,64,176.81c-1.1,109.33,86.73,187.08,183,252.42a16,16,0,0,0,18,0c96.26-65.34,184.09-143.09,183-252.42C447.46,124.14,405.68,80,352.92,80Z"
                                                            style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px">
                                                        </path>
                                                    </svg>
                                                </button>
                                            </div>
                                    </div>
                                </li>
                                <li class="list__item">
                                    <a href="#" class="list__cover">
                                        <img src={{ url('assets/img/cards/7.jpg') }} alt="">
                                    </a>

                                    <div class="list__wrap">
                                        <h3 class="list__title">
                                            <a href="#">We are the Dwarves</a>
                                        </h3>

                                        <p class="small text-white text-muted">Many desktop publishing packages and web
                                            page editors now use Lorem Ipsum as their default model text, </p>

                                            <div class="d-flex justify-content-between w-100">
                                                <button class="btn btn-theme" type="button">
                                                    Watch now
                                                </button>
                                                <button class="card__favorite" type="button">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512"
                                                        viewBox="0 0 512 512">
                                                        <path
                                                            d="M352.92,80C288,80,256,144,256,144s-32-64-96.92-64C106.32,80,64.54,124.14,64,176.81c-1.1,109.33,86.73,187.08,183,252.42a16,16,0,0,0,18,0c96.26-65.34,184.09-143.09,183-252.42C447.46,124.14,405.68,80,352.92,80Z"
                                                            style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px">
                                                        </path>
                                                    </svg>
                                                </button>
                                            </div>
                                    </div>
                                </li>
                            </ul>
                            <!-- end cards -->
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-xl-4">
                    <div class="row">
                        <div class="col-12">
                            <!-- title -->
                            <div class="section__title-wrap saection__title-wrap--single">
                                <h2 class="section__title section__title--small">Popular in Action</h2>

                                <div class="section__nav-wrap">
                                    <a href="#" class="section__view">View All</a>
                                </div>
                            </div>
                            <!-- end title -->

                            <!-- cards -->
                            <ul class="list">
                                <li class="list__item">
                                    <a href="#" class="list__cover">
                                        <img src={{ url('assets/img/cards/7.jpg') }} alt="">
                                    </a>

                                    <div class="list__wrap">
                                        <h3 class="list__title">
                                            <a href="#">Gabriel Knight: Sins of the Fathers</a>
                                        </h3>

                                        <p class="small text-white text-muted">Many desktop publishing packages and web
                                            page editors now use Lorem Ipsum as their default model text, </p>

                                            <div class="d-flex justify-content-between w-100">
                                                <button class="btn btn-theme" type="button">
                                                    Watch now
                                                </button>
                                                <button class="card__favorite" type="button">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512"
                                                        viewBox="0 0 512 512">
                                                        <path
                                                            d="M352.92,80C288,80,256,144,256,144s-32-64-96.92-64C106.32,80,64.54,124.14,64,176.81c-1.1,109.33,86.73,187.08,183,252.42a16,16,0,0,0,18,0c96.26-65.34,184.09-143.09,183-252.42C447.46,124.14,405.68,80,352.92,80Z"
                                                            style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px">
                                                        </path>
                                                    </svg>
                                                </button>
                                            </div>
                                    </div>
                                </li>
                                <li class="list__item">
                                    <a href="#" class="list__cover">
                                        <img src={{ url('assets/img/cards/7.jpg') }} alt="">
                                    </a>

                                    <div class="list__wrap">
                                        <h3 class="list__title">
                                            <a href="#">Unrest Special Edition</a>
                                        </h3>

                                        <p class="small text-white text-muted">Many desktop publishing packages and web
                                            page editors now use Lorem Ipsum as their default model text, </p>

                                            <div class="d-flex justify-content-between w-100">
                                                <button class="btn btn-theme" type="button">
                                                    Watch now
                                                </button>
                                                <button class="card__favorite" type="button">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512"
                                                        viewBox="0 0 512 512">
                                                        <path
                                                            d="M352.92,80C288,80,256,144,256,144s-32-64-96.92-64C106.32,80,64.54,124.14,64,176.81c-1.1,109.33,86.73,187.08,183,252.42a16,16,0,0,0,18,0c96.26-65.34,184.09-143.09,183-252.42C447.46,124.14,405.68,80,352.92,80Z"
                                                            style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px">
                                                        </path>
                                                    </svg>
                                                </button>
                                            </div>
                                    </div>
                                </li>
                                <li class="list__item">
                                    <a href="#" class="list__cover">
                                        <img src={{ url('assets/img/cards/7.jpg') }} alt="">
                                    </a>

                                    <div class="list__wrap">
                                        <h3 class="list__title">
                                            <a href="#">Gabriel Knight 3: Blood of the Sacred, Blood of the
                                                Damned</a>
                                        </h3>

                                        <p class="small text-white text-muted">Many desktop publishing packages and web
                                            page editors now use Lorem Ipsum as their default model text, </p>

                                            <div class="d-flex justify-content-between w-100">
                                                <button class="btn btn-theme" type="button">
                                                    Watch now
                                                </button>
                                                <button class="card__favorite" type="button">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512"
                                                        viewBox="0 0 512 512">
                                                        <path
                                                            d="M352.92,80C288,80,256,144,256,144s-32-64-96.92-64C106.32,80,64.54,124.14,64,176.81c-1.1,109.33,86.73,187.08,183,252.42a16,16,0,0,0,18,0c96.26-65.34,184.09-143.09,183-252.42C447.46,124.14,405.68,80,352.92,80Z"
                                                            style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px">
                                                        </path>
                                                    </svg>
                                                </button>
                                            </div>
                                    </div>
                                </li>
                            </ul>
                            <!-- end cards -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end section -->
    @include('front.layouts.recommended')
@endsection