<div class="p-6 space-y-5">
    <h3 class="text-base font-semibold text-t1">Edit Bio Page</h3>

    <div class="space-y-4">
        <div>
            <label class="block text-xs font-medium text-t2 mb-1.5">Title <span class="text-red">*</span></label>
            <input wire:model="title" type="text"
                   class="w-full px-3 py-2 bg-s2 border border-white/[.06] rounded-lg text-sm text-t1 placeholder-t3
                          focus:outline-none focus:ring-1 focus:ring-blue/50 focus:border-blue/50" />
            @error('title')<p class="mt-1 text-xs text-red">{{ $message }}</p>@enderror
        </div>

        <div>
            <label class="block text-xs font-medium text-t2 mb-1.5">Slug</label>
            <input wire:model="slug" type="text"
                   class="w-full px-3 py-2 bg-s2 border border-white/[.06] rounded-lg text-sm text-t1
                          focus:outline-none focus:ring-1 focus:ring-blue/50 focus:border-blue/50" />
            @error('slug')<p class="mt-1 text-xs text-red">{{ $message }}</p>@enderror
        </div>

        <div>
            <label class="block text-xs font-medium text-t2 mb-2">Theme</label>
            <div class="flex gap-2 flex-wrap">
                @foreach(['dark' => ['#0a0a0f', '#f0f0f5'], 'light' => ['#ffffff', '#111827'], 'purple' => ['#13001a', '#f0e8ff'], 'blue' => ['#000d1a', '#e8f4ff']] as $preset => [$bg, $fg])
                <button type="button" wire:click="$set('theme', '{{ $preset }}')"
                    class="flex items-center gap-2 px-3 py-1.5 rounded-lg border text-xs font-medium transition-colors
                           {{ $theme === $preset ? 'border-blue text-t1' : 'border-white/[.06] text-t2 hover:border-white/20' }}">
                    <span class="w-4 h-4 rounded-full border border-white/20 flex-shrink-0" style="background: {{ $bg }}"></span>
                    {{ ucfirst($preset) }}
                </button>
                @endforeach
            </div>
        </div>

        <div class="flex items-center gap-3">
            <label class="relative inline-flex items-center cursor-pointer">
                <input wire:model="isPublished" type="checkbox" class="sr-only peer">
                <div class="w-9 h-5 bg-s3 rounded-full peer peer-checked:bg-blue peer-focus:ring-2 peer-focus:ring-blue/30 transition-colors after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:after:translate-x-4"></div>
            </label>
            <span class="text-sm text-t2">Published</span>
        </div>
    </div>

    <div class="flex justify-end gap-2 pt-2">
        <x-ui.button wire:click="closeModal" variant="ghost" label="Cancel" />
        <x-ui.button wire:click="save" action="save" label="Save Changes" loading-label="Saving..." />
    </div>
</div>
