{{--
    Property search band (the site's primary action). A plain GET form pointed at
    the listings page, so it works without JavaScript and the result is a normal,
    shareable URL.
--}}
<section class="relative z-10 -mt-12 pb-2">
    <div class="container-page">
        <form action="{{ route('properties.index') }}" method="GET"
              class="rounded-2xl border border-border bg-surface p-5 shadow-raised sm:p-6">

            <div class="grid gap-4 lg:grid-cols-12">
                <div class="lg:col-span-3">
                    <label for="home-listing" class="form-label">{{ __('I am looking to') }}</label>
                    <select id="home-listing" name="listing" class="form-input">
                        @foreach (\App\Enums\ListingIntent::options() as $value => $label)
                            <option value="{{ $value }}">{{ $label }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="lg:col-span-3">
                    <label for="home-type" class="form-label">{{ __('Property type') }}</label>
                    <select id="home-type" name="type" class="form-input">
                        <option value="">{{ __('Any type') }}</option>
                        @foreach (\App\Models\Marketplace\Category::query()
                            ->active()
                            ->whereHas('sector', fn ($q) => $q->where('slug', 'real-estate'))
                            ->orderBy('depth')->orderBy('order')->get() as $category)
                            <option value="{{ $category->slug }}">{{ str_repeat('— ', $category->depth).$category->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="lg:col-span-4">
                    <label for="home-location" class="form-label">{{ __('Location') }}</label>
                    <select id="home-location" name="district" class="form-input" data-searchable>
                        <option value="">{{ __('Anywhere') }}</option>
                        @foreach ($propertyCities as $district)
                            <option value="{{ $district }}">{{ $district }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="flex items-end lg:col-span-2">
                    <button type="submit" class="btn-primary w-full">
                        <x-icon name="search" class="size-4" /> {{ __('Search') }}
                    </button>
                </div>
            </div>

            @if ($propertyCounts['total'])
                <p class="mt-4 flex flex-wrap items-center gap-x-5 gap-y-1 text-sm text-text-secondary">
                    <span class="meta-label">{{ __('Currently listed') }}</span>
                    <a href="{{ route('properties.index', ['listing' => 'sale']) }}" class="hover:text-text-brand">
                        {{ trans_choice(':count for sale|:count for sale', $propertyCounts['sale'], ['count' => $propertyCounts['sale']]) }}
                    </a>
                    <a href="{{ route('properties.index', ['listing' => 'rent']) }}" class="hover:text-text-brand">
                        {{ trans_choice(':count to rent|:count to rent', $propertyCounts['rent'], ['count' => $propertyCounts['rent']]) }}
                    </a>
                </p>
            @endif
        </form>
    </div>
</section>