@push('modal.header')
    <div class="px-5 pt-5 pb-3 border-b border-white/10
              backdrop-blur rounded-t-2xl relative">
        <div class="flex items-center justify-between">
            <h2 class="text-lg font-semibold text-white">Domain bearbeiten</h2>
            <button wire:click="$dispatch('closeModal')" class="text-white/60 hover:text-white text-lg">
                <i class="ph ph-x"></i>
            </button>
        </div>
    </div>
@endpush

<div class="p-6 space-y-5">
    <p class="text-sm text-white/60 leading-relaxed">
        Hier kannst du die grundlegenden Eigenschaften der Domain ändern.
        DKIM- oder DNS-Einträge werden dabei nicht neu erzeugt.
    </p>
    <form wire:submit.prevent="save" id="domain-edit-form" class="space-y-4">
        <div class="flex items-center gap-3">
            <label class="inline-flex items-center gap-3 select-none">
                <input type="checkbox" wire:model.defer="is_active"
                       class="peer appearance-none w-5 h-5 rounded-md border border-emerald-500/50 bg-transparent checked:bg-emerald-500 checked:border-emerald-400 grid place-content-center transition">
                <span class="text-slate-200 text-sm">Domain aktiv</span>
            </label>
        </div>
        <div>
            <label class="block text-sm font-medium text-white/70 mb-1">Domain</label>
            <input type="text" wire:model="domain" readonly
                   class="w-full rounded-lg bg-white/5 border border-white/10 text-white px-3 py-2 text-sm opacity-70 cursor-not-allowed">
        </div>
        <div>
            <label class="block text-sm font-medium text-white/70 mb-1">Beschreibung</label>
            <textarea wire:model.defer="description"
                      class="w-full rounded-lg bg-white/5 border border-white/10 text-white px-3 py-2 text-sm resize-none focus:border-white/20 focus:ring-0"
                      rows="2" placeholder="z. B. Hauptdomain für Kundenmails"></textarea>
            @error('description')
            <div class="text-rose-400 text-xs mt-1">{{ $message }}</div>
            @enderror
        </div>
        <div>
            <div class="flex items-center gap-2">
                <label class="text-sm text-slate-200">Tags</label>
                <span class="px-2 py-0.5 rounded-full text-[11px] border border-slate-600/60 bg-slate-800/70 text-slate-200">optional</span>
            </div>
            <div class="mt-2 space-y-2">
                @foreach($tags as $i => $t)
                    <div class="rounded-xl border border-slate-700/60 bg-white/[0.04] p-3">
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                            {{-- Label --}}
                            <div class="md:col-span-2">
                                <label class="block text-xs text-slate-300/80 mb-1">Label</label>
                                <input
                                    type="text"
                                    placeholder="z. B. Kunde, Produktion"
                                    wire:model.defer="tags.{{ $i }}.label"
                                    class="nx-input"
                                >
                            </div>
                            <div>
                                <label class="block text-xs text-slate-300/80 mb-1">Farbe (HEX)</label>
                                <div class="flex items-center gap-2">
                                    <input
                                        type="text"
                                        placeholder="#22c55e"
                                        wire:model.lazy="tags.{{ $i }}.color"
                                        class="nx-input font-mono"
                                    >
                                    <input
                                        type="color"
                                        value="{{ $t['color'] ?? '#22c55e' }}"
                                        wire:change="pickTagColor({{ $i }}, $event.target.value)"
                                        class="h-9 w-9 rounded-md border border-white/15 bg-white/5 p-1"
                                    >
                                </div>
                            </div>
                        </div>
                        <div class="mt-3 flex items-center gap-2">
                            <span class="text-xs text-slate-400">Palette:</span>
                            @foreach($tagPalette as $hex)
                                <button
                                    type="button"
                                    class="h-6 w-6 rounded-md border {{ ($t['color'] ?? '') === $hex ? 'ring-2 ring-white/80' : 'border-white/15' }}"
                                    style="background: {{ $hex }}"
                                    wire:click="pickTagColor({{ $i }}, '{{ $hex }}')"
                                    title="{{ $hex }}"
                                ></button>
                            @endforeach
                            <button
                                type="button"
                                wire:click="removeTag({{ $i }})"
                                class="ml-auto inline-flex items-center gap-1 rounded-md border border-white/10 px-2 py-1 text-xs text-white/70 hover:text-white hover:border-white/20"
                            >
                                <i class="ph ph-trash-simple text-[12px]"></i> Entfernen
                            </button>
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="mt-2">

                <button
                    type="button"
                    wire:click="addTag"
                    class="inline-flex items-center gap-1.5 rounded-lg border border-white/10 bg-white/5 px-2.5 py-1 text-xs text-white/80 hover:text-white hover:border-white/20">
                    <i class="ph ph-plus text-[14px]"></i> Tag hinzufügen
                </button>
            </div>

            @error('tags.*.label') <div class="text-rose-400 text-xs mt-1">{{ $message }}</div> @enderror
            @error('tags.*.color') <div class="text-rose-400 text-xs mt-1">{{ $message }}</div> @enderror
        </div>
    </form>
</div>

@push('modal.footer')
    <div class="px-5 py-3 border-t border-white/10 backdrop-blur rounded-b-2xl">
        <div class="flex justify-end gap-2">
            <button type="button" wire:click="$dispatch('closeModal')"
                    class="px-4 py-2 rounded-lg text-sm border border-white/10 text-white/70 hover:text-white hover:border-white/20">
                Abbrechen
            </button>

            <button type="submit" form="domain-edit-form"
                    class="px-4 py-2 rounded-lg text-sm bg-emerald-500/20 text-emerald-300 border border-emerald-400/30 hover:bg-emerald-500/30">
                Speichern
            </button>
        </div>
    </div>
@endpush