@extends('layouts.admin.app')

@section('title', 'Page Preview')

@section('content')
    <div class="animate-fade-in">
        <x-common.page-header :title="'Preview: '.$cms->title">
            <a
                href="{{ route('admin.cms.index') }}"
                class="inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium border border-surface-200 dark:border-surface-700 bg-white dark:bg-surface-800 text-surface-700 dark:text-surface-200 hover:bg-surface-50 dark:hover:bg-surface-700 transition-colors"
            >
                <x-heroicon-o-arrow-left class="w-4 h-4" />
                Back
            </a>
        </x-common.page-header>

        <div class="px-6 py-6 space-y-6">
            <div class="rounded-2xl border border-surface-200 dark:border-surface-700 bg-white dark:bg-surface-800 p-6 space-y-4">
                <div class="flex flex-wrap items-center gap-3">
                    <span class="text-xs font-semibold text-surface-500 uppercase tracking-wider">Status</span>
                    @if($cms->status === 'active')
                        <span class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium bg-green-100 text-green-700 dark:bg-green-950 dark:text-green-300">
                            Active
                        </span>
                    @else
                        <span class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium bg-amber-100 text-amber-700 dark:bg-amber-950 dark:text-amber-300">
                            Inactive
                        </span>
                    @endif
                    <span class="ml-auto text-xs text-surface-400">
                        Slug: <span class="font-mono">{{ $cms->slug }}</span>
                    </span>
                </div>

                <div class="prose prose-slate dark:prose-invert max-w-none">
                    {!! $cms->content ?: '<p class="text-surface-400">No content.</p>' !!}
                </div>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
                <div class="rounded-2xl border border-surface-200 dark:border-surface-700 bg-white dark:bg-surface-800 p-5">
                    <p class="text-xs font-semibold text-surface-500 uppercase tracking-wider mb-2">Meta Title</p>
                    <p class="text-sm text-surface-800 dark:text-surface-100 break-words">{{ $cms->meta_title ?: '—' }}</p>
                </div>
                <div class="rounded-2xl border border-surface-200 dark:border-surface-700 bg-white dark:bg-surface-800 p-5">
                    <p class="text-xs font-semibold text-surface-500 uppercase tracking-wider mb-2">Meta Description</p>
                    <p class="text-sm text-surface-800 dark:text-surface-100 break-words">{{ $cms->meta_description ?: '—' }}</p>
                </div>
                <div class="rounded-2xl border border-surface-200 dark:border-surface-700 bg-white dark:bg-surface-800 p-5">
                    <p class="text-xs font-semibold text-surface-500 uppercase tracking-wider mb-2">Meta Keywords</p>
                    <p class="text-sm text-surface-800 dark:text-surface-100 break-words">{{ $cms->meta_keywords ?: '—' }}</p>
                </div>
            </div>
        </div>
    </div>
@endsection