{{-- Shared filter controls for the listings browser (used in desktop sidebar + mobile drawer) --}}
<div class="space-y-4">
    <div>
        <label class="dm-label text-xs">بحث</label>
        <input type="text" wire:model.live.debounce.400ms="search" placeholder="ابحث بالاسم..."
               class="dm-field">
    </div>

    <div>
        <label class="dm-label text-xs">الحالة</label>
        <select wire:model.live="condition" class="dm-field dm-select">
            <option value="">الكل</option>
            <option value="new">جديدة</option>
            <option value="used">مستعملة</option>
        </select>
    </div>

    <div>
        <label class="dm-label text-xs">الماركة</label>
        <select wire:model.live="make" class="dm-field dm-select">
            <option value="">كل الماركات</option>
            @foreach ($this->makes as $m)
                <option value="{{ $m->slug }}">{{ $m->name }}</option>
            @endforeach
        </select>
    </div>

    @if ($this->models->isNotEmpty())
        <div>
            <label class="dm-label text-xs">الموديل</label>
            <select wire:model.live="model" class="dm-field dm-select">
                <option value="">كل الموديلات</option>
                @foreach ($this->models as $md)
                    <option value="{{ $md->slug }}">{{ $md->name }}</option>
                @endforeach
            </select>
        </div>
    @endif

    <div>
        <label class="dm-label text-xs">المحافظة</label>
        <select wire:model.live="governorate" class="dm-field dm-select">
            <option value="">كل المحافظات</option>
            @foreach ($this->governorates as $g)
                <option value="{{ $g->slug }}">{{ $g->name }}</option>
            @endforeach
        </select>
    </div>

    <div>
        <label class="dm-label text-xs">السعر (جنيه)</label>
        <div class="flex gap-2">
            <input type="number" wire:model.live.debounce.500ms="min_price" placeholder="من" class="dm-field">
            <input type="number" wire:model.live.debounce.500ms="max_price" placeholder="إلى" class="dm-field">
        </div>
    </div>

    <div>
        <label class="dm-label text-xs">سنة الصنع</label>
        <div class="flex gap-2">
            <input type="number" wire:model.live.debounce.500ms="min_year" placeholder="من" class="dm-field">
            <input type="number" wire:model.live.debounce.500ms="max_year" placeholder="إلى" class="dm-field">
        </div>
    </div>

    <div>
        <label class="dm-label text-xs">ناقل الحركة</label>
        <select wire:model.live="transmission" class="dm-field dm-select">
            <option value="">الكل</option>
            <option value="automatic">أوتوماتيك</option>
            <option value="manual">مانيوال</option>
        </select>
    </div>

    <div>
        <label class="dm-label text-xs">نوع الوقود</label>
        <select wire:model.live="fuel_type" class="dm-field dm-select">
            <option value="">الكل</option>
            <option value="petrol">بنزين</option>
            <option value="diesel">ديزل</option>
            <option value="gas">غاز</option>
            <option value="hybrid">هايبرد</option>
            <option value="electric">كهرباء</option>
        </select>
    </div>
</div>