@foreach ($musics as $music)
    <li class="col">
        <div class="ringtone" data-id="{{ $music->id }}">

            <div class="float-start img-icon">
                @if ($media = $music->getFirstMedia(Constant::THUMB_COLLECTION))
                    {{ $media->img()->conversion(Constant::THUMB)->attributes(['alt' => $music->file_name . ' Image', 'class' => 'lazyload']) }}
                @elseif ($media = $music->album->getFirstMedia(Constant::THUMB_COLLECTION))
                    {{ $media->img()->conversion(Constant::THUMB)->attributes(['alt' => $music->album->name . ' Image', 'class' => 'lazyload']) }}
                @else
                    <img loading="lazy"src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                        data-src="{{ asset('images/music_not_found.jpg') }}" class="lazyload" width="300" height="300"
                        alt="not found">
                @endif


                <div class="postion-absolute hover-play">
                    <span class="my-button player loader">
                        <svg class="icon icon-play">
                            <use xlink:href="#icon-play"></use>
                        </svg>
                    </span>
                </div>
            </div>

            <a href="{{ route('music', ['slug' => $music->slug]) }}" class="ring-info">
                <p class="title">{{ $music->file_name }}</p>
                <p class="subtitle float-start">
                    {{ $music->relationLoaded('artists') ? join(',', Arr::pluck($music->artists, 'name')) : $music->album->name }}
                </p>
                <div class="des">
                    <p class="subtitle float-end">{{ $music->created_at->diffForHumans() }}</p>
                </div>
                <div class="buttons">
                    <span class="me-2 mt-1">{!! $music->getStatuseToHtml() !!}</span>
                    <span role="button" aria-label="fav"
                        class="my-button fav{{ !$music->isFav(Auth::user()) ? ' light' : '' }}"><svg class="icon">
                            <use xlink:href="#icon-heart"></use>
                        </svg></span>
                    <span role="button" aria-label="share" class="my-button light share"><svg class="icon">
                            <use xlink:href="#icon-share"></use>
                        </svg></span>
                    <span role="button" aria-label="download" class="my-button light download"><svg class="icon">
                            <use xlink:href="#icon-download"></use>
                        </svg></span>
                    @if ($music->user_id == Auth::id())
                        <span class="my-button light edit" aria-label="edit"><svg class="icon">
                                <use xlink:href="#icon-edit"></use>
                            </svg></span>
                    @endif
                </div>
            </a>
        </div>
    </li>

    @if (setting('ad_between_post') && ($loop->index + 1) % setting('ad_between_interval', 4) == 0)
        <li class="col">
            <div class="ringtone mAd">
                {!! setting('ad_between_post') !!}
            </div>
        </li>
    @endif
@endforeach