@extends('layouts.public')

@section('title', ($site['templates_title'] ?? 'Template').' — '.($site['site_brand'] ?? 'Undangan Digital'))

@push('styles')
<style>
    .template-grid {
        display: grid;
        gap: 1.25rem;
    }

    @media (min-width: 800px) {
        .template-grid { grid-template-columns: 1fr 1fr; }
    }

    @media (min-width: 1100px) {
        .template-grid { grid-template-columns: repeat(3, 1fr); }
    }

    .template-card {
        overflow: hidden;
        padding: 0;
        animation: rise .7s ease both;
    }

    .template-card:nth-child(2) { animation-delay: .1s; }

    .template-preview {
        position: relative;
        aspect-ratio: 16 / 11;
        overflow: hidden;
        background: #dfe8e2;
    }

    .template-preview img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .6s ease;
    }

    .template-card:hover .template-preview img {
        transform: scale(1.05);
    }

    .template-body {
        padding: 1.35rem 1.35rem 1.5rem;
    }

    .template-body h2 {
        font-family: var(--font-display);
        font-size: 1.9rem;
        font-weight: 560;
        letter-spacing: -0.03em;
        margin: 0 0 .45rem;
    }

    .template-actions {
        display: flex;
        flex-wrap: wrap;
        gap: .65rem;
        margin-top: 1.15rem;
    }
</style>
@endpush

@section('content')
    <main class="page-shell">
        <header class="page-header">
            <span class="eyebrow">{{ $site['templates_eyebrow'] }}</span>
            <h1>{{ $site['templates_title'] }}</h1>
            <p>{{ $site['templates_subtitle'] }}</p>
        </header>

        <div class="template-grid">
            @forelse ($templates as $template)
                <article class="panel template-card">
                    <div class="template-preview">
                        <img src="{{ $template->previewImageUrl() }}" alt="Preview {{ $template->name }}" loading="lazy">
                    </div>
                    <div class="template-body">
                        <h2>{{ $template->name }}</h2>
                        <p class="muted" style="margin:0">{{ $template->description }}</p>
                        <div class="template-actions">
                            @if ($template->demo_slug)
                                <a class="btn btn-primary" href="{{ route('invitations.show', $template->demo_slug) }}" target="_blank">Lihat Demo</a>
                            @endif
                            <a class="btn btn-ghost-dark" href="{{ route('catalog.index') }}">Order Paket</a>
                        </div>
                    </div>
                </article>
            @empty
                <p class="muted">Belum ada template aktif.</p>
            @endforelse
        </div>
    </main>
@endsection