@if ($featuredProperties->isNotEmpty())
    {{-- Featured listings, filterable by sale or rent without a page reload. --}}
    <section class="section" x-data="fragmentFilter('{{ route('fragments.properties') }}', { listing: '', featured: '1' })">
        <div class="container-page">
            <div class="flex flex-wrap items-end justify-between gap-6">
                <x-section-heading :eyebrow="__('Featured')"
                                   :title="__('Selected properties')"
                                   :subtitle="__('A curated selection from our current listings, updated as new instructions come to market.')" />

                <x-button variant="outline" :href="route('properties.index')" class="shrink-0" arrow>
                    {{ __('All properties') }}
                </x-button>
            </div>

            <div class="mt-8 flex flex-wrap gap-2" role="tablist" aria-label="{{ __('Filter featured properties') }}">
                <button type="button" role="tab" @click="apply({ listing: '' })"
                        :aria-selected="is('listing', '')"
                        :class="is('listing', '') ? 'pill-active' : 'pill-idle'">{{ __('All') }}</button>

                @foreach (\App\Enums\ListingIntent::options() as $value => $label)
                    <button type="button" role="tab" @click="apply({ listing: '{{ $value }}' })"
                            :aria-selected="is('listing', '{{ $value }}')"
                            :class="is('listing', '{{ $value }}') ? 'pill-active' : 'pill-idle'">{{ $label }}</button>
                @endforeach
            </div>

            <div x-ref="results" class="mt-8 transition-opacity duration-200" :class="loading && 'opacity-40'"
                 aria-live="polite" :aria-busy="loading">
                @include('public.partials.listing-grid', ['listings' => $featuredProperties])
            </div>
        </div>
    </section>
@endif