@extends('frontend.app')

@section('content')
    <main class="container overflow-hidden gx-0 gx-lg-1">
        {!! adCode('ad_all_page_top') !!}
        <div class="card my-shadow my-2">
            <div class="text-center mt-2">
                @if ($media = $playlist->getFirstMedia(Constant::THUMB_COLLECTION))
                    <div class="preview_thumb catImg">
                        {{ $media->img()->conversion(Constant::THUMB)->attributes(['alt' => $playlist->name . ' Image', 'class' => 'card-img lazyload']) }}
                    </div>
                @endif
                <h1 class="fs-4 mb-1">{{ $title }}</h1>
                @if ($description = $playlist->description)
                    {!! $description !!}
                @else
                    <p class="mb-1">
                        {{ trans('playlist_subtitle', ['name' => $playlist->name, 'count' => $playlist->posts_count ?: 0]) }}
                    </p>
                @endif
                <div class="d-block">
                    <button id="playonapp" class="btn text-white bg-gradient-primary d-lg-none" type="button">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                            class="bi bi-google-play" viewBox="0 0 16 16">
                            <path
                                d="M14.222 9.374c1.037-.61 1.037-2.137 0-2.748L11.528 5.04 8.32 8l3.207 2.96 2.694-1.586Zm-3.595 2.116L7.583 8.68 1.03 14.73c.201 1.029 1.36 1.61 2.303 1.055l7.294-4.295ZM1 13.396V2.603L6.846 8 1 13.396ZM1.03 1.27l6.553 6.05 3.044-2.81L3.333.215C2.39-.341 1.231.24 1.03 1.27Z" />
                        </svg>

                        {{ trans('Play In App') }}</button>
                </div>
            </div>
            <nav aria-label="breadcrumb" class="mx-2 mb-2 mt-2">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('home') }}">{{ trans('Home') }}</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('music.playlists') }}">{{ trans('Playlists') }}</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">{{ $playlist->name }}</li>
                </ol>
            </nav>
            <div class="row mt-2">
                <div class="col-lg-12">
                    <div id="ringtones" class="px-2 mb-2">
                        <ul id="items" class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-2 list-unstyled">
                            @include('frontend.list')
                        </ul>
                        @include('frontend.pagination')
                    </div>
                </div>
            </div>
        </div>
        @if (!isInfiniteScroll())
            {!! adCode('ad_all_page_bottom') !!}
        @endif
    </main>
@endsection

@section('bottomnavigation')
    @if ($firstMusic = $musics->first())
        @include('frontend.miniplayer', [
            'media' =>
                $firstMusic->getFirstMedia(Constant::THUMB_COLLECTION) ?:
                $playlist->getFirstMedia(Constant::THUMB_COLLECTION),
            'title' => $firstMusic->file_name,
            'artistNames' => join(',', Arr::pluck($firstMusic->artists, 'name')),
        ])
    @endif
@endsection