@extends('layouts.app')

@section('title', $title)
@section('meta_description', $description)
@section('meta_keywords', $keywords)
@section('canonical', request()->fullUrl())

@section('content')
    <div class="mb-6 flex flex-wrap items-center justify-between gap-3">
        <div>
            <h1 class="text-3xl font-bold">{{ $heading }}</h1>
            <p class="mt-2 text-sm text-slate-600">Showing {{ $ringtones->total() }} {{ \Illuminate\Support\Str::plural(strtolower($showingLabel), $ringtones->total()) }}</p>
        </div>
        <a href="{{ route('frontend.home') }}" class="text-sm font-medium text-sky-700 hover:text-sky-800">Back to Home</a>
    </div>

    <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        @forelse ($ringtones as $ringtone)
            @include('frontend.partials.content-card', ['ringtone' => $ringtone])
        @empty
            <p>No content found.</p>
        @endforelse
    </div>
    @if ($ringtones->hasPages())
        @include('frontend.partials.pagination', ['paginator' => $ringtones])
    @endif
@endsection