@extends('backend.layouts.app')

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

@section('content')
    @php
        $pageTitle = 'Email Preview';
        $indexRoute = 'email-template.index';
        $indexLabel = 'Email Templates';
    @endphp
    @include('backend.layouts.partials._page_header')

    <div class="space-y-5">
        <div class="flex flex-wrap items-center justify-between gap-3 rounded-2xl border border-gray-200 bg-white px-5 py-4 dark:border-gray-800 dark:bg-white/[0.03]">
            <div>
                <p class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Subject</p>
                <p class="mt-1 text-sm font-semibold text-gray-800 dark:text-white/90">{{ $message->subject }}</p>
            </div>
            <div class="flex w-full flex-wrap items-center gap-2 sm:w-auto">
                <a href="{{ route('email-template.edit', $template) }}"
                    class="inline-flex w-full items-center justify-center rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 sm:w-auto dark:border-gray-700 dark:text-gray-300 dark:hover:bg-white/[0.03]">Edit Template</a>
                <a href="{{ route('email-template.index') }}"
                    class="inline-flex w-full items-center justify-center rounded-lg bg-brand-500 px-4 py-2 text-sm text-white hover:bg-brand-600 sm:w-auto">Back</a>
            </div>
        </div>

        <div class="overflow-hidden rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
            <div class="border-b border-gray-100 px-5 py-3 text-xs text-gray-500 dark:border-gray-800 dark:text-gray-400">
                Preview uses sample data and is rendered in a sandboxed frame. Scripts are disabled.
            </div>
            <iframe sandbox srcdoc="{{ $html }}" title="Email preview"
                style="width:100%;height:clamp(420px,75vh,760px);border:0;background:#f4f4f5;"></iframe>
        </div>
    </div>
@endsection