<div x-data="{ showPreview: false }" class="ml-1.5 inline-flex items-center">
    <button
        type="button"
        @click.prevent="showPreview = true"
        class="inline-flex items-center gap-1 text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
        title="Preview email"
    >
        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
        </svg>
    </button>

    {{-- Modal --}}
    <div
        x-show="showPreview"
        x-cloak
        @click.away="showPreview = false"
        @keydown.escape.window="showPreview = false"
        class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
        style="display: none"
    >
        <div
            @click.stop
            class="relative max-h-[80vh] w-full max-w-3xl overflow-y-auto rounded-lg bg-white shadow-xl dark:bg-gray-800"
        >
            <div class="sticky top-0 flex items-center justify-between border-b border-gray-200 bg-white px-6 py-4 dark:border-gray-700 dark:bg-gray-800">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Email Preview</h3>
                <button
                    type="button"
                    @click="showPreview = false"
                    class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
                >
                    <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
            <div class="px-6 py-4">
                <div class="prose prose-sm dark:prose-invert max-w-none">{!! $preview !!}</div>
            </div>
        </div>
    </div>
</div>
