@extends('layouts.app')

@section('title', 'Browse Categories')
@section('meta_description', 'Browse ringtone categories and subcategories in folder view.')
@section('meta_keywords', 'content categories, ringtone categories, wallpaper categories, sound effect categories')
@section('canonical', route('frontend.categories'))

@section('content')
    <h1 class="mb-6 text-3xl font-bold">Categories</h1>

    @if ($categoryTree->isEmpty())
        <p>No categories available.</p>
    @else
        <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
            @foreach ($categoryTree as $category)
                <a href="{{ route('frontend.category.show', ['path' => $category->slug_path]) }}" class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm hover:border-sky-200">
                    <div class="inline-flex items-center gap-2">
                        <span class="text-xl">📁</span>
                        <div>
                            <p class="font-semibold">{{ $category->name }}</p>
                            <p class="text-xs text-slate-500">{{ number_format((int) ($category->nested_ringtones_count ?? 0)) }} files</p>
                        </div>
                    </div>
                </a>
            @endforeach
        </div>
    @endif
@endsection