<div>
    <label for="name" class="text-sm font-bold text-slate-700 dark:text-slate-200">Avatar name</label>
    <input id="name" name="name" value="{{ old('name', $avatar?->name) }}" required class="mt-2 w-full rounded-lg border-blue-100 bg-white text-sm dark:border-blue-900 dark:bg-slate-950 dark:text-white">
    @error('name') <p class="mt-2 text-sm font-bold text-red-600 dark:text-red-300">{{ $message }}</p> @enderror
</div>

<div>
    <label for="image" class="text-sm font-bold text-slate-700 dark:text-slate-200">Avatar image</label>
    @if ($avatar)
        <div class="mt-2 flex items-center gap-3">
            <img src="{{ $avatar->imageUrl() }}" alt="{{ $avatar->name }}" class="h-16 w-16 rounded-full object-cover ring-2 ring-blue-100 dark:ring-blue-900">
            <p class="text-sm text-slate-500 dark:text-slate-400">Leave empty to keep current image.</p>
        </div>
    @endif
    <input id="image" name="image" type="file" accept=".jpg,.jpeg,.png,.webp,image/jpeg,image/png,image/webp" @required(! $avatar) class="mt-3 w-full rounded-lg border border-blue-100 bg-white px-3 py-2 text-sm file:mr-4 file:rounded-lg file:border-0 file:bg-blue-600 file:px-4 file:py-2 file:text-sm file:font-bold file:text-white dark:border-blue-900 dark:bg-slate-950 dark:text-white">
    @error('image') <p class="mt-2 text-sm font-bold text-red-600 dark:text-red-300">{{ $message }}</p> @enderror
</div>

<div class="grid gap-4 sm:grid-cols-2">
    <div>
        <label for="status" class="text-sm font-bold text-slate-700 dark:text-slate-200">Status</label>
        <select id="status" name="status" class="mt-2 w-full rounded-lg border-blue-100 bg-white text-sm dark:border-blue-900 dark:bg-slate-950 dark:text-white">
            <option value="active" @selected(old('status', $avatar?->status ?? 'active') === 'active')>Active</option>
            <option value="inactive" @selected(old('status', $avatar?->status) === 'inactive')>Inactive</option>
        </select>
        @error('status') <p class="mt-2 text-sm font-bold text-red-600 dark:text-red-300">{{ $message }}</p> @enderror
    </div>

    <label class="mt-8 flex items-center gap-2 text-sm font-bold text-slate-700 dark:text-slate-200">
        <input type="checkbox" name="is_default" value="1" class="rounded border-blue-300 text-blue-600 focus:ring-blue-500" @checked(old('is_default', $avatar?->is_default))>
        Set as default avatar
    </label>
</div>

<div class="flex flex-wrap gap-3">
    <button class="rounded-lg bg-blue-600 px-5 py-2 text-sm font-black text-white hover:bg-blue-700">Save Avatar</button>
    <a href="{{ route('admin.avatars.index') }}" class="rounded-lg border border-blue-100 px-5 py-2 text-sm font-black text-blue-700 hover:bg-blue-50 dark:border-blue-900 dark:text-blue-300 dark:hover:bg-blue-950/60">Cancel</a>
</div>
