@php
    $inputClass = 'dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 border-gray-300 dark:border-gray-700';
    $inputErrorClass = 'dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 border-error-300 focus:border-error-300 focus:ring-error-500/10 dark:border-error-700';
@endphp

<div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
    <div>
        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Category Name <span class="text-error-500">*</span></label>
        <input type="text" name="category_name" value="{{ old('category_name', $category?->category_name) }}" placeholder="e.g. Main Navigation" class="{{ $errors->has('category_name') ? $inputErrorClass : $inputClass }}">
        @error('category_name')<p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>@enderror
    </div>
    <div>
        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Description</label>
        <input type="text" name="category_description" value="{{ old('category_description', $category?->category_description) }}" placeholder="Brief description of this category" class="{{ $errors->has('category_description') ? $inputErrorClass : $inputClass }}">
        @error('category_description')<p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>@enderror
    </div>
</div>

<div>
    <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Status</label>
    <label class="flex h-11 items-center gap-2 rounded-lg border border-gray-300 px-4 text-sm text-gray-700 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300">
        <input type="checkbox" name="category_status" value="1" @checked(old('category_status', $category?->category_status ?? true))>
        Active
    </label>
    <p class="mt-1.5 text-theme-xs text-gray-500 dark:text-gray-400">Inactive categories will not appear in the frontend menu assignment dropdown.</p>
</div>