@extends('layouts.admin.app')

@section('title', __('pages/admin/email-templates.preview.title') . ': ' . $template->title)

@section('content')
    <div class="animate-fade-in">
        <x-common.page-header :title="__('pages/admin/email-templates.preview.title') . ': ' . $template->title">
            <a
                href="{{ route('admin.email-templates.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" />
                {{ __('buttons.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 border-b border-surface-100 dark:border-surface-700 pb-4">
                    <span class="text-xs font-semibold text-surface-500 uppercase tracking-wider">{{ __('pages/admin/email-templates.preview.subject') }}</span>
                    <span class="text-sm text-surface-800 dark:text-surface-100">{{ $template->subject ?: '—' }}</span>
                </div>

                <div class="email-template-preview">
                    {!! $template->content ?: '<p class="text-surface-400">No content.</p>' !!}
                </div>
            </div>
        </div>
    </div>
@endsection