<div class="space-y-6">
    <div>
        <flux:heading size="xl">Email Templates</flux:heading>
        <flux:text class="mt-1 text-zinc-600 dark:text-zinc-400">Edit transactional email content.</flux:text>
    </div>

    @if (session('success'))
        <flux:callout variant="success" icon="check-circle">{{ session('success') }}</flux:callout>
    @endif

    <flux:card class="p-4 space-y-4">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <flux:field>
                <flux:label>Name</flux:label>
                <flux:input wire:model="name" />
                <flux:error name="name" />
            </flux:field>
            <flux:field>
                <flux:label>Key</flux:label>
                <flux:input wire:model="key" placeholder="order-confirmation" />
                <flux:error name="key" />
            </flux:field>
        </div>
        <flux:field>
            <flux:label>Subject</flux:label>
            <flux:input wire:model="subject" />
            <flux:error name="subject" />
        </flux:field>
        <flux:field>
            <flux:label>Body</flux:label>
            <flux:textarea wire:model="body" rows="8" />
            <flux:error name="body" />
        </flux:field>
        <flux:field variant="inline">
            <flux:checkbox wire:model="isActive" />
            <flux:label>Active</flux:label>
        </flux:field>
        <flux:button wire:click="save" variant="primary">{{ $editingId ? 'Update Template' : 'Create Template' }}</flux:button>
    </flux:card>

    <div class="space-y-3">
        @foreach ($this->templates as $template)
            <flux:card class="p-4">
                <div class="flex items-center justify-between gap-4">
                    <div>
                        <flux:heading size="base">{{ $template->name }}</flux:heading>
                        <flux:text class="text-sm text-zinc-600 dark:text-zinc-400">{{ $template->key }} • {{ $template->subject }}</flux:text>
                    </div>
                    <div class="flex items-center gap-2">
                        <flux:badge color="{{ $template->is_active ? 'lime' : 'zinc' }}">{{ $template->is_active ? 'Active' : 'Inactive' }}</flux:badge>
                        <flux:button wire:click="edit({{ $template->id }})" size="sm" variant="filled">Edit</flux:button>
                    </div>
                </div>
            </flux:card>
        @endforeach
    </div>
</div>
