@extends('front.layouts.front')
@section('content')

    <section class="section section--first section--last section--head" data-bg="{{asset('assets/img/bg.jpg')}}">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="section__wrap">
                        <h2 class="section__title">Favorite</h2>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- section -->
    <section class="section section--last section--catalog">
        <div class="container">
            <!-- catalog -->
            <div class="row category">
                @foreach ($Favorites as $key => $Titles )
                    <div class="col-12 col-sm-6 col-md-4 col-xl-3 col-xl-20 remove">
                        <div class="card card--catalog">
                            <a href="{{ route('moviedetail',[$Titles->Title->ttid]) }}" class="card__cover">
                                <img src="{{ $Titles->Title->poster }}" alt="{{ $Titles->Title->title }}">
                                {{-- <span class="card__new">Watch</span> --}}
                            </a>

                            <div class="social-share card__platforms">
                                <a href="https://www.facebook.com/sharer/sharer.php?u={{ route('moviedetail',[$Titles->Title->ttid]) }}" class="fb"><i class="fa-brands fa-facebook-f"></i></a>
                                <a href="https://twitter.com/intent/tweet?text={{ route('moviedetail',[$Titles->Title->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',[$Titles->Title->ttid]) }}">{{ $Titles->Title->title }}</a></h3>
                                </div>
                            </div>
                            <button class="favorite-ico card__favorite--delete" type="button" data-id="{{ $Titles->Title->id }}">
                                <svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'>
                                    <path d='M112,112l20,320c.95,18.49,14.4,32,32,32H348c17.67,0,30.87-13.51,32-32l20-320'
                                    style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/>
                                    <line x1='80' y1='112' x2='432' y2='112' style='stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/>
                                    <path d='M192,112V72h0a23.93,23.93,0,0,1,24-24h80a23.93,23.93,0,0,1,24,24h0v40'
                                    style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/>
                                    <line x1='256' y1='176' x2='256' y2='400' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/>
                                    <line x1='184' y1='176' x2='192' y2='400' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/>
                                    <line x1='328' y1='176' x2='320' y2='400' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/>
                                </svg>
                                {{-- <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>
                @endforeach
            </div>
            <!-- end catalog -->
        </div>
    </section>
    <!-- end section -->

@endsection