63 lines
2.7 KiB
PHP
63 lines
2.7 KiB
PHP
<div
|
|
x-data="{ show: @entangle('open') }"
|
|
x-on:open-new-goal.window="$wire.show()"
|
|
x-on:keydown.escape.window="$wire.close()"
|
|
>
|
|
<div
|
|
x-show="show"
|
|
x-transition.opacity
|
|
class="fixed inset-0 bg-black/70 backdrop-blur-sm z-50"
|
|
x-on:click="$wire.close()"
|
|
></div>
|
|
|
|
<div
|
|
x-show="show"
|
|
x-transition
|
|
class="fixed inset-0 z-50 flex items-center justify-center p-4 pointer-events-none"
|
|
>
|
|
<div class="glass-strong w-full max-w-lg pointer-events-auto" x-on:click.stop>
|
|
<form wire:submit="save" class="p-6 space-y-4">
|
|
<div class="flex items-center justify-between">
|
|
<h2 class="text-lg font-semibold text-white">Neues Ziel</h2>
|
|
<button type="button" wire:click="close" class="p-1.5 rounded-lg hover:bg-white/10 text-white/60">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-xs text-white/60 mb-1.5">Titel</label>
|
|
<input
|
|
wire:model="title"
|
|
type="text"
|
|
class="input"
|
|
placeholder="z.B. Tägliches Journaling"
|
|
autofocus
|
|
>
|
|
@error('title') <div class="text-xs text-red-400 mt-1">{{ $message }}</div> @enderror
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-xs text-white/60 mb-1.5">Beschreibung</label>
|
|
<textarea
|
|
wire:model="description"
|
|
rows="3"
|
|
class="input resize-none"
|
|
placeholder="Worum geht's, woran erkennst du Fortschritt?"
|
|
></textarea>
|
|
@error('description') <div class="text-xs text-red-400 mt-1">{{ $message }}</div> @enderror
|
|
</div>
|
|
|
|
<div class="flex items-center justify-end gap-2 pt-2">
|
|
<button type="button" wire:click="close" class="btn-ghost">Abbrechen</button>
|
|
<button type="submit" class="btn-primary" wire:loading.attr="disabled">
|
|
<span wire:loading.remove wire:target="save">Speichern</span>
|
|
<span wire:loading wire:target="save">Speichere…</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|