@extends('layout')

@section('title', 'Şablonlar — Libro.az')

@section('meta')
    <meta name="description" content="Libro.az şablonları — bio-link, QR-menyu, mini-sayt və mağaza üçün hazır dizaynlar.">
    <meta name="robots" content="index, follow">
    <link rel="canonical" href="{{ url('/templates') }}">
    <meta property="og:site_name" content="Libro.az">
    <meta property="og:type" content="website">
    <meta property="og:title" content="Şablonlar — Libro.az">
    <meta property="og:description" content="Bio-link, QR-menyu, mini-sayt və mağaza üçün hazır şablonlar.">
    <meta property="og:url" content="{{ url('/templates') }}">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Şablonlar — Libro.az">
    <meta name="twitter:description" content="Bio-link, QR-menyu, mini-sayt və mağaza üçün hazır şablonlar.">
@endsection

@section('content')
<div class="max-w-6xl mx-auto px-4 py-12">
    <h1 class="text-3xl font-bold text-ink mb-2">{{ __('Şablonlar') }}</h1>
    <p class="text-muted mb-8">{{ __('Səhifəniz üçün hazır şablonlar') }}</p>

    @if($templates->isEmpty())
        <p class="text-muted">{{ __('Hələ şablon yoxdur.') }}</p>
    @else
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        @foreach($templates as $template)
        <a href="{{ route('templates.show', $template->id) }}" class="bg-surface rounded-2xl shadow-sm border border-line overflow-hidden hover:shadow-md transition-shadow no-underline">
            @if($template->thumbnail)
                <img src="{{ $template->thumbnail }}" alt="{{ $template->name }}" class="w-full h-48 object-cover">
            @else
                <div class="w-full h-48 bg-primarysoft flex items-center justify-center"><x-icon name="palette" class="w-10 h-10" /></div>
            @endif
            <div class="p-5">
                <h3 class="font-bold text-ink mb-1">{{ $template->name }}</h3>
                @if($template->description)
                    <p class="text-sm text-muted line-clamp-2">{{ $template->description }}</p>
                @endif
                @if(!empty($template->colors))
                <div class="flex gap-1 mt-3">
                    @foreach(array_slice($template->colors, 0, 6) as $color)
                        <span class="inline-block w-4 h-4 rounded-full border border-line" style="background:{{ $colorMap[$color] ?? '#e2e8f0' }}"></span>
                    @endforeach
                </div>
                @endif
            </div>
        </a>
        @endforeach
    </div>
    @endif
</div>
@endsection