{{--
    Deal Explorer Toolbar
    Props: $context ('frontend' or 'admin')
--}}
@props(['context' => 'frontend'])

<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">

    {{-- Search --}}
    <div class="relative flex-1 max-w-md">
        <div class="pointer-events-none absolute inset-y-0 start-0 flex items-center ps-3">
            <x-heroicon-o-magnifying-glass class="h-4 w-4 text-muted-foreground" />
        </div>
        <input
            type="text"
            id="de-search"
            x-model="search"
            @input="onSearchInput()"
            placeholder="Search by title, address, city, region, Pin code"
            class="block w-full rounded-lg border border-border bg-card py-2 ps-9 pe-4 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 dark:bg-card"
            autocomplete="off"
        />
    </div>

    {{-- Right controls --}}
    <div class="flex flex-wrap items-center gap-2">

        {{-- Sort By --}}
        <div class="flex items-center gap-2 text-sm">
            <label for="de-sort" class="shrink-0 text-muted-foreground font-medium">Sort By</label>
            <select
                id="de-sort"
                x-model="sort"
                class="rounded-lg border border-border bg-card px-2 py-1.5 text-sm text-foreground focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
            >
                <option value="created_at">New Added</option>
                <option value="list_price">Sale Price</option>
                <option value="rent_price">Rent Price</option>
                <option value="fair_market_rent">Fair Market Rent</option>
                <option value="total_area">Area</option>
            </select>
        </div>

        {{-- Direction --}}
        <select
            id="de-direction"
            x-model="direction"
            class="rounded-lg border border-border bg-card px-2 py-1.5 text-sm text-foreground focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500"
            aria-label="Sort direction"
        >
            <option value="desc">Desc</option>
            <option value="asc">Asc</option>
        </select>

        {{-- Filters --}}
        <x-deal-explorer.filter-panel :context="$context" />

    </div>
</div>