<div class="p-6">
    <h3 class="text-lg font-semibold text-t1 mb-5">Edit Link</h3>

    <div class="space-y-4">
        <div>
            <label class="block text-xs font-medium text-t2 mb-1.5">Target URL *</label>
            <input wire:model="targetUrl" type="url" placeholder="https://example.com/long-url"
                class="block w-full px-3 py-2.5 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('targetUrl') <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>
            <div class="flex items-center bg-s2 border border-white/[.06] rounded-lg overflow-hidden focus-within:ring-1 focus-within:ring-blue/50">
                <span class="px-3 py-2.5 text-sm text-t3 border-r border-white/[.06] flex-shrink-0">nimu.li/</span>
                <input wire:model="slug" type="text"
                    class="flex-1 px-3 py-2.5 bg-transparent text-sm text-t1 placeholder-t3 focus:outline-none font-mono">
            </div>
            @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-1.5">Title (optional)</label>
            <input wire:model="title" type="text" placeholder="My link"
                class="block w-full px-3 py-2.5 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">
        </div>

        <div>
            <label class="block text-xs font-medium text-t2 mb-1.5">Status</label>
            <select wire:model="status"
                class="block w-full px-3 py-2.5 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">
                <option value="active">Active</option>
                <option value="inactive">Inactive</option>
            </select>
        </div>
    </div>

    <div class="flex gap-3 mt-6">
        <button wire:click="save"
            class="flex-1 px-4 py-2.5 bg-accent-gradient text-white text-sm font-medium rounded-lg hover:opacity-90 transition-opacity">
            Save Changes
        </button>
        <button wire:click="closeModal"
            class="px-4 py-2.5 bg-s2 text-t2 text-sm font-medium rounded-lg hover:text-t1 transition-colors border border-white/[.06]">
            Cancel
        </button>
    </div>
</div>
