@extends('includes.layouts')

@section('content')
    <div class="iq-breadcrumb-one  iq-bg-over " style="background-image: url({{ asset('images/banner/serie-tv.jpg') }});">
        <div class="container-fluid">
            <div class="row align-items-center">
                <div class="col-sm-12">
                    <nav aria-label="breadcrumb" class="text-center iq-breadcrumb-two">
                        <h2 class="title">Voir Tout</h2>
                        <ol class="breadcrumb main-bg">
                            <li class="breadcrumb-item"><a href="{{ route('home') }}">Accueil</a></li>
                            <li class="breadcrumb-item active">Séries TV</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <main id="main" class="site-main watchlist-contens">
        <div class="container-fluid">
            <div class="iq-main-header d-flex align-items-center justify-content-between mt-5 mt-lg-0">
                <h4 class="main-title">Séries TV</h4>
            </div>
            @if($shows->count())
                <ul class=" row list-inline  mb-0 iq-rtl-direction ">
                    @foreach($shows as $show)
                        @if($show->image)
                            <li class="slide-item col-lg-3 col-md-4 col-6 mb-4">
                                <div class="block-images position-relative  watchlist-first">
                                    <div class="img-box">
                                        <img src="@if($show->image) {{ $show->image }} @else {{ asset('images/01.jpg') }} @endif" class="img-fluid" alt="" loading="lazy">
                                    </div>
                                    <div class="block-description">
                                        <h6 class="iq-title text-left"><a href="{{ route('showdetails', ['show' => $show->id]) }}">{{ $show->title }}</a></h6>
                                        <div class="movie-time d-flex align-items-center my-2">
                                            <span class="text-white">{{ $show->duration }}</span>
                                        </div>
                                        <div class="hover-buttons text-left">
                                            <a href="{{ route('showdetails', ['show' => $show->id]) }}" role="button" class="btn btn-hover">
                                                <i class="fa fa-play mr-1" aria-hidden="true"></i>Jouer
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        @endif
                    @endforeach
                </ul>
            @else
                <p>Pas de films</p>
            @endif
            {!! $shows->links() !!}
        </div>
    </main>
@endsection