@extends('layout')

@php
    $seoDescription = $template->description
        ? \Illuminate\Support\Str::limit(preg_replace('/\s+/', ' ', trim($template->description)), 155)
        : 'Libro.az şablonu';
    $seoImage = $template->thumbnail
        ? (str_starts_with($template->thumbnail, 'http') ? $template->thumbnail : asset($template->thumbnail))
        : null;
    $typeLabels = [
        'mini_site' => 'Mini-səhifə',
        'default' => 'Bio-link',
        'menu' => 'QR-Menyu',
        'shop' => 'Mağaza',
        'all' => 'Hamısı',
    ];
@endphp

@section('title', $template->name . ' — Libro.az')

@section('meta')
    <meta name="description" content="{{ $seoDescription }}">
    <meta name="robots" content="index, follow">
    <link rel="canonical" href="{{ url('/template/'.$template->id) }}">
    <meta property="og:site_name" content="Libro.az">
    <meta property="og:type" content="website">
    <meta property="og:title" content="{{ $template->name }} — Libro.az">
    <meta property="og:description" content="{{ $seoDescription }}">
    <meta property="og:url" content="{{ url('/template/'.$template->id) }}">
    @if($seoImage)<meta property="og:image" content="{{ $seoImage }}">@endif
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="{{ $template->name }} — Libro.az">
    <meta name="twitter:description" content="{{ $seoDescription }}">
    @if($seoImage)<meta name="twitter:image" content="{{ $seoImage }}">@endif
@endsection

@section('content')
<div class="max-w-4xl mx-auto px-4 py-12">
    <a href="{{ route('templates.index') }}" class="text-sm text-muted mb-4 inline-flex items-center gap-1.5 no-underline"><x-icon name="arrow-left" class="w-4 h-4" /> {{ __('Bütün şablonlar') }}</a>

    @if($template->thumbnail)
        <img src="{{ $template->thumbnail }}" alt="{{ $template->name }}" class="w-full rounded-2xl border border-line shadow-sm mb-6 object-cover" style="max-height:360px;">
    @endif

    <h1 class="text-3xl font-bold text-ink mb-3">{{ $template->name }}</h1>

    @if($template->description)
        <p class="text-muted mb-6">{!! nl2br(e($template->description)) !!}</p>
    @endif

    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
        <div class="bg-surface rounded-2xl border border-line p-5">
            <div class="text-xs uppercase text-muted mb-2">{{ __('Səhifə növü') }}</div>
            <div class="font-semibold text-ink">{{ $typeLabels[$template->target_page_type] ?? $template->target_page_type }}</div>
        </div>
        <div class="bg-surface rounded-2xl border border-line p-5">
            <div class="text-xs uppercase text-muted mb-2">{{ __('Tarif') }}</div>
            <div class="font-semibold text-ink">
                @if($template->plan)
                    {{ $template->plan->name }}
                    @if($template->plan->price_azn > 0) — {{ number_format((float) $template->plan->price_azn, 2) }} ₼/ay @endif
                @else
                    {{ __('Bütün tariflər') }}
                @endif
            </div>
        </div>
    </div>

    @if(!empty($template->colors))
    <div class="bg-surface rounded-2xl border border-line p-5 mb-6">
        <div class="text-xs uppercase text-muted mb-3">{{ __('Rənglər') }}</div>
        <div class="flex flex-wrap gap-3">
            @foreach($template->colors as $color)
                <span class="inline-flex items-center gap-2 text-sm text-ink">
                    <span class="inline-block w-6 h-6 rounded-full border border-line" style="background:{{ $colorMap[$color] ?? '#e2e8f0' }}"></span>{{ $color }}
                </span>
            @endforeach
        </div>
    </div>
    @endif

    @if($template->category || !empty($template->tags))
    <div class="bg-surface rounded-2xl border border-line p-5">
        @if($template->category)
            <div class="text-xs uppercase text-muted mb-2">{{ __('Kateqoriya') }}</div>
            <div class="font-semibold text-ink mb-4">{{ $template->category }}</div>
        @endif
        @if(!empty($template->tags))
            <div class="text-xs uppercase text-muted mb-2">{{ __('Teqlər') }}</div>
            <div class="flex flex-wrap gap-2">
                @foreach($template->tags as $tag)
                    <span class="badge bg-surface2 text-muted">{{ $tag }}</span>
                @endforeach
            </div>
        @endif
    </div>
    @endif
</div>
@endsection