@props([
    'filters',
    'regions',
    'genders',
    'hasActiveFilters' => false,
    'compact' => false,
])

<form method="GET" action="{{ route('trainers.index') }}" role="search"
      {{ $attributes->merge(['class' => 'filter-form'.($compact ? ' filter-form--compact' : '')]) }}>
    @unless($compact)
        <div class="filter-form__header">
            <div class="filter-form__header-icon" aria-hidden="true">
                <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <circle cx="11" cy="11" r="7"/>
                    <path d="M20 20l-3.5-3.5" stroke-linecap="round"/>
                </svg>
            </div>
            <div>
                <h2 class="filter-form__title">جستجو و فیلتر</h2>
                <p class="filter-form__subtitle">مربی مناسب را بر اساس نام، منطقه یا جنسیت پیدا کنید</p>
            </div>
        </div>
    @endunless

    <div class="filter-form__fields">
        <div class="filter-field filter-field--search {{ $compact ? '' : 'md:col-span-5' }}">
            <label for="{{ $compact ? 'mobile-q' : 'q' }}" class="filter-label">جستجو</label>
            <div class="filter-control">
                <span class="filter-control__icon" aria-hidden="true">
                    <svg class="size-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5" stroke-linecap="round"/>
                    </svg>
                </span>
                <input id="{{ $compact ? 'mobile-q' : 'q' }}" type="search" name="q"
                       value="{{ $filters['q'] }}" placeholder="نام، باشگاه یا توضیحات…"
                       class="filter-input" autocomplete="off">
            </div>
        </div>

        <div class="filter-field {{ $compact ? '' : 'md:col-span-3' }}">
            <label for="{{ $compact ? 'mobile-district' : 'district' }}" class="filter-label">منطقه</label>
            <div class="filter-control">
                <span class="filter-control__icon" aria-hidden="true">
                    <svg class="size-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M12 21s7-4.5 7-10a7 7 0 1 0-14 0c0 5.5 7 10 7 10Z"/><circle cx="12" cy="11" r="2.5"/>
                    </svg>
                </span>
                <select id="{{ $compact ? 'mobile-district' : 'district' }}" name="district" class="filter-select">
                    <option value="">همه مناطق</option>
                    @foreach ($regions as $region)
                        <option value="{{ $region->name }}" @selected($filters['district'] === $region->name)>{{ $region->name }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        <div class="filter-field {{ $compact ? '' : 'md:col-span-2' }}">
            <label for="{{ $compact ? 'mobile-gender' : 'gender' }}" class="filter-label">جنسیت</label>
            <div class="filter-control">
                <span class="filter-control__icon" aria-hidden="true">
                    <svg class="size-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <circle cx="12" cy="8" r="4"/><path d="M6 20c0-3.3 2.7-6 6-6s6 2.7 6 6" stroke-linecap="round"/>
                    </svg>
                </span>
                <select id="{{ $compact ? 'mobile-gender' : 'gender' }}" name="gender" class="filter-select">
                    <option value="">همه</option>
                    @foreach ($genders as $value => $label)
                        <option value="{{ $value }}" @selected($filters['gender'] === $value)>{{ $label }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        <div class="filter-field filter-field--actions {{ $compact ? '' : 'md:col-span-2' }}">
            @unless($compact)
                <span class="filter-label filter-label--invisible" aria-hidden="true">عملیات</span>
            @endunless
            <div class="filter-actions">
                <button type="submit" class="filter-submit">
                    <svg class="size-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" aria-hidden="true">
                        <circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5" stroke-linecap="round"/>
                    </svg>
                    <span>{{ $compact ? 'اعمال فیلتر' : 'جستجو' }}</span>
                </button>
                @if ($hasActiveFilters)
                    <a href="{{ route('trainers.index') }}" class="filter-clear" title="پاک کردن فیلترها">
                        <svg class="size-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                            <path d="M6 6l12 12M18 6 6 18" stroke-linecap="round"/>
                        </svg>
                        <span class="sr-only">پاک کردن</span>
                    </a>
                @endif
            </div>
        </div>
    </div>
</form>