<x-layouts.app :title="$templateId ? __('Edit Template') : __('New Template')">
    <div class="space-y-4">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-2xl font-bold text-ink">
                    {{ $templateId ? __('Edit Template') : __('Create Template') }}
                </h1>
                <p class="text-sm text-muted mt-0.5">
                    {{ __('Drag, drop, and configure blocks to design your template. Saved templates appear in Compose and Reply.') }}
                </p>
            </div>
            <a href="{{ url('/templates') }}" wire:navigate
               class="text-sm text-muted hover:text-ink inline-flex items-center gap-1.5">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
                {{ __('Back to library') }}
            </a>
        </div>

        {{-- The campaigns EmailBuilder is the shared block editor.
             When mounted with a templateId it loads the existing blocks;
             without one it starts fresh. The component's own
             saveAsTemplate() handles persistence to the email_templates
             table — no extra wiring needed. --}}
        <livewire:campaigns.email-builder :templateId="$templateId" />
    </div>
</x-layouts.app>
