130 lines
6.8 KiB
PHP
130 lines
6.8 KiB
PHP
@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
|