@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="info px-2 mt-2">
                <h1 class="fs-4 mb-0">{{ trans('popular_title') }}</h1>
                <p>{{ trans('popular_subtitle') }}</p>
            </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 active" aria-current="page">{{ trans('popular_title') }}</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) ?: $firstMusic->album->getFirstMedia(Constant::THUMB_COLLECTION),
            'title' => $firstMusic->file_name,
            'artistNames' => join(',', Arr::pluck($firstMusic->artists, 'name')),
        ])
    @endif
@endsection