@extends('layouts.app')

@section('title', 'Preview — ' . $template->name)
@section('heading', 'Letterhead Preview')

@section('content')
@include('documents.top-submenu')
    <x-card>
        <div class="mb-4 flex flex-wrap gap-3">
            <a href="{{ route('letter-head-templates.edit', $template) }}" class="text-sm text-primary hover:underline">&larr; Edit template</a>
            <a href="{{ route('letter-head-templates.pdf', $template) }}" class="text-sm font-medium text-slate-700 hover:underline">Download PDF</a>
            <button type="button" onclick="window.print()" class="text-sm font-medium text-slate-700 hover:underline">Print</button>
        </div>

        @if(session('error'))
            <div class="mb-4 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900">{{ session('error') }}</div>
        @endif

        <div class="mx-auto max-w-3xl rounded-lg border border-slate-200 bg-white p-8 shadow-sm print:border-0 print:shadow-none">
            @if($template->header_html)
                <div class="mb-6 border-b border-slate-200 pb-4 text-sm">{!! $template->header_html !!}</div>
            @elseif($company?->name)
                <div class="mb-6 border-b border-slate-200 pb-4 text-center">
                    <h2 class="text-lg font-bold text-slate-900">{{ $company->name }}</h2>
                </div>
            @endif

            <div class="min-h-[240px] text-sm leading-relaxed text-slate-800">
                {!! $template->content ?: '<p class="text-slate-400">Add body content in the template editor.</p>' !!}
            </div>

            @if($template->footer_html)
                <div class="mt-8 border-t border-slate-200 pt-4 text-xs text-slate-500">{!! $template->footer_html !!}</div>
            @endif
        </div>
    </x-card>
@endsection