<div class="space-y-6" wire:key="templates-manager">

    {{-- Flash messages --}}
    @if(session('success'))
        <div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 4000)"
             class="p-3 bg-success/10 border border-success/20 text-success rounded-xl text-sm">
            {{ session('success') }}
        </div>
    @endif
    @if(session('error'))
        <div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 5000)"
             class="p-3 bg-danger/10 border border-danger/20 text-danger rounded-xl text-sm">
            {{ session('error') }}
        </div>
    @endif

    {{-- Header --}}
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div>
            <h1 class="text-2xl font-bold text-ink">{{ __('Email Templates') }}</h1>
            <p class="text-sm text-muted mt-0.5">
                {{ __('Reusable templates for campaigns and inbox replies. Built with the same block editor as campaigns.') }}
            </p>
        </div>
        {{-- "Create template" is a navigation, NOT a Livewire action,
             because the builder lives at its own route and mounts the
             existing App\Livewire\Campaigns\EmailBuilder there. --}}
        <a href="{{ url('/templates/builder') }}" wire:navigate
           class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-xl bg-primary-600 text-white hover:bg-primary-700 transition shrink-0">
            <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="M12 4v16m8-8H4"/>
            </svg>
            {{ __('Create template') }}
        </a>
    </div>

    {{-- Filters --}}
    <div class="flex flex-col sm:flex-row gap-3">
        <input type="text" wire:model.live.debounce.300ms="search" placeholder="{{ __('Search templates…') }}"
               class="flex-1 px-3 py-2 text-sm bg-surface border border-border rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-500">
        <select wire:model.live="category"
                class="px-3 py-2 text-sm bg-surface border border-border rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-500">
            @foreach($this->categories as $key => $label)
                <option value="{{ $key }}">{{ $label }}</option>
            @endforeach
        </select>
    </div>

    {{-- Grid --}}
    @if($this->templates->isEmpty())
        <div class="text-center py-12 px-4 border-2 border-dashed border-border rounded-xl">
            <p class="text-sm text-muted">{{ __('No templates match. Try a different category, or click "Create template" above.') }}</p>
        </div>
    @else
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
            @foreach($this->templates as $template)
                <div class="bg-surface-2 rounded-2xl border border-border overflow-hidden flex flex-col" wire:key="tpl-{{ $template->id }}">
                    <div class="aspect-[4/3] bg-surface flex items-center justify-center overflow-hidden">
                        @if($template->thumbnail_path)
                            <img src="{{ \Illuminate\Support\Facades\Storage::disk('public')->url($template->thumbnail_path) }}"
                                 alt="{{ $template->name }}" class="w-full h-full object-cover">
                        @else
                            <svg class="w-12 h-12 text-muted/30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                            </svg>
                        @endif
                    </div>
                    <div class="p-4 flex-1 flex flex-col">
                        <div class="flex items-start justify-between gap-2">
                            <p class="text-sm font-semibold text-ink truncate">{{ $template->name }}</p>
                            @if($template->workspace_id === null)
                                <span class="px-1.5 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-primary-600/10 text-primary-600 shrink-0">{{ __('Platform') }}</span>
                            @endif
                        </div>
                        <p class="text-[11px] text-muted mt-0.5">
                            {{ $this->categories[$template->category] ?? $template->category }}
                            @if($template->usage_count > 0)
                                · {{ $template->usage_count }} {{ __('uses') }}
                            @endif
                        </p>
                        <div class="flex items-center gap-1 mt-3 pt-3 border-t border-border">
                            <button type="button" wire:click="preview({{ $template->id }})"
                                    class="flex-1 px-2 py-1.5 text-xs font-medium rounded-lg bg-surface text-ink hover:bg-surface-2 border border-border">
                                {{ __('Preview') }}
                            </button>
                            @if($template->workspace_id !== null)
                                {{-- Edit = navigate to the builder route with the
                                     template id; EmailBuilder::mount() loads it. --}}
                                <a href="{{ url('/templates/builder/' . $template->id) }}" wire:navigate
                                   title="{{ __('Edit') }}"
                                   class="p-1.5 rounded-lg text-muted hover:text-primary-600 hover:bg-primary-600/10">
                                    <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                                </a>
                            @endif
                            <button type="button" wire:click="duplicate({{ $template->id }})"
                                    title="{{ __('Duplicate') }}"
                                    class="p-1.5 rounded-lg text-muted hover:text-ink hover:bg-surface">
                                <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="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
                            </button>
                            @if($template->workspace_id !== null)
                                <button type="button" wire:click="delete({{ $template->id }})"
                                        wire:confirm="{{ __('Delete this template? Existing campaigns that use it keep their copy.') }}"
                                        title="{{ __('Delete') }}"
                                        class="p-1.5 rounded-lg text-muted hover:text-danger hover:bg-danger/10">
                                    <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                                </button>
                            @endif
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @endif

    {{-- Preview modal --}}
    @if($previewId)
        <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm"
             wire:click="closePreview">
            <div class="bg-white rounded-2xl max-w-2xl w-full max-h-[90vh] overflow-auto shadow-2xl"
                 wire:click.stop>
                <div class="flex items-center justify-between px-5 py-3 border-b border-gray-200 sticky top-0 bg-white">
                    <p class="text-sm font-semibold text-gray-900">{{ __('Template preview') }}</p>
                    <button type="button" wire:click="closePreview" class="text-gray-500 hover:text-gray-900">
                        <svg class="w-5 h-5" 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="p-5">
                    {!! $this->previewHtml !!}
                </div>
            </div>
        </div>
    @endif
</div>
