@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/7-77865_related-wallpapers-music-hd.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($musics->count())
                <ul class=" row list-inline  mb-0 iq-rtl-direction ">
                    @foreach($musics as $music)
                        @if($music->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($music->image) {{ $music->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('play.music', ['music' => $music->id]) }}">{{ $music->title }}</a></h6>
                                        <div class="hover-buttons text-left">
                                            <a href="{{ route('play.music', ['music' => $music->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 musiques</p>
            @endif
            {!! $musics->links() !!}
        </div>
    </main>
@endsection