@extends('layouts.public') {{-- Usa o layout público --}}

{{-- Define o título da página --}}
@section('title', $title ?? 'Catálogo de Temas')

@section('content')
{{-- Seção Cabeçalho da Página --}}
<div
    class="bg-gradient-to-r from-gray-700 to-gray-900 dark:from-gray-800 dark:to-black text-white py-12 px-4 text-center">
    <h1 class="text-4xl font-bold mb-2">Catálogo de Temas</h1>
    <p class="text-lg text-gray-300">Explore nossa coleção completa de temas para Mu Online.</p>
</div>

{{-- Seção de Cards de Temas --}}
<section class="py-16 bg-gray-100 dark:bg-gray-900">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

        {{-- TO DO: Adicionar filtros aqui se necessário (ex: por categoria, versão, etc.) --}}

        @if($themes->isNotEmpty())
        {{-- Grid responsivo para os cards --}}
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">

            {{-- Loop através dos temas passados pelo controller ($themes é uma coleção paginada) --}}
            @foreach ($themes as $theme)
            <div
                class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition duration-300 hover:shadow-xl flex flex-col">
                {{-- flex flex-col --}}
                {{-- Imagem do Tema --}}
                <a href="{{ route('public.themes.show', $theme->slug) }}" class="block"> {{-- Link na imagem --}}
                    @if($theme->preview_image_path && Storage::disk('public')->exists($theme->preview_image_path))
                    <img src="{{ Storage::disk('public')->url($theme->preview_image_path) }}"
                        alt="Preview {{ $theme->name }}" class="w-full h-48 object-cover">
                    @else
                    <div
                        class="w-full h-48 bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-gray-500">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-gray-400" fill="none"
                            viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                        </svg>
                    </div>
                    @endif
                </a>
                {{-- Informações do Tema --}}
                <div class="p-6 flex flex-col flex-grow"> {{-- flex-grow para empurrar botão --}}
                    <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
                        <a href="{{ route('public.themes.show', $theme->slug) }}"
                            class="hover:text-blue-600 dark:hover:text-blue-400">
                            {{ $theme->name }}
                        </a>
                    </h3>
                    <p class="text-gray-600 dark:text-gray-300 text-sm mb-4 flex-grow"> {{-- flex-grow --}}
                        {{ Str::limit($theme->description, 100) }}
                    </p>
                    {{-- Botão/Link --}}
                    <div class="mt-auto"> {{-- Mantém na parte inferior --}}
                        <a href="{{ route('public.themes.show', $theme->slug) }}"
                            class="inline-block w-full text-center bg-blue-500 hover:bg-blue-600 text-white text-sm font-medium py-2 px-4 rounded-md transition duration-300">
                            Ver Detalhes
                        </a>
                    </div>
                </div>
            </div>
            @endforeach
        </div>

        {{-- Links de Paginação --}}
        <div class="mt-12">
            {{ $themes->links() }} {{-- Renderiza os links de paginação --}}
        </div>

        @else
        <p class="text-center text-gray-500 dark:text-gray-400 py-10">Nenhum tema encontrado.</p>
        @endif

    </div>
</section>
@endsection