@extends('includes.layouts')

@section('content')
    <div class="iq-breadcrumb-one iq-bg-over  iq-over-dark-50" style="background-image: url(@if($category->image) {{ $category->image }} @else {{ asset('images/banner/movies.jpg') }} @endif);">
        <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">{{ $category->name }}</h2>
                        <ol class="breadcrumb main-bg">
                            <li class="breadcrumb-item"><a href="{{ route('home') }}">Accueil</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('categories') }}">Catégories</a></li>
                            <li class="breadcrumb-item active">{{ $category->name }}</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <main id="main" class="site-main watchlist-contens">
        <div class="container-fluid">
            @if($movies->count())
                <ul class=" row list-inline  mb-0 iq-rtl-direction ">
                    @foreach($movies as $movie)
                        <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($movie->image) {{ $movie->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('moviedetails', ['movie' => $movie->id]) }}">{{ $movie->title }}</a></h6>
                                    <div class="movie-time d-flex align-items-center my-2">
                                        <span class="text-white">{{ $movie->duration }}</span>
                                    </div>
                                    <div class="hover-buttons text-left">
                                        <a href="{{ route('moviedetails', ['movie' => $movie->id]) }}" role="button" class="btn btn-hover">
                                            <i class="fa fa-play mr-1" aria-hidden="true"></i>Jouer
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </li>
                    @endforeach
                </ul>
            @else
                <p>Pas de films</p>
            @endif
            {!! $movies->links() !!}
        </div>
    </main>
@endsection