{{-- A listing as a wide row: the list and split views use this. --}}
@php
    $detail = $listing->propertyDetail;
    $url = $listing->publicUrl();
@endphp

<article class="group flex flex-col gap-5 rounded-2xl border border-border bg-surface p-4 transition hover:shadow-card xs:flex-row"
         data-reveal-child>
    <a href="{{ $url }}" class="relative block shrink-0 overflow-hidden rounded-xl bg-surface-muted xs:w-56">
        <x-image :src="$listing->cover_image" :alt="$listing->title" ratio="4/3" zoom rounded="rounded-none" />

        <x-favourite-button :listing="$listing"
                            :favourited="in_array($listing->id, $favouritedIds ?? [], true)"
                            class="absolute right-2.5 top-2.5 z-10" />

        <span class="absolute left-2.5 top-2.5">
            <span class="pill bg-primary text-text">{{ $listing->intent->label() }}</span>
        </span>
    </a>

    <div class="flex min-w-0 flex-1 flex-col">
        <p class="font-display text-lg font-bold text-text">
            {{ $listing->formattedPrice() }}
            @if ($period = $listing->pricePeriodLabel())
                <span class="text-sm font-normal text-text-secondary">{{ $period }}</span>
            @endif
        </p>

        <h3 class="mt-1 font-display text-base font-semibold leading-snug text-text">
            <a href="{{ $url }}" class="transition hover:text-text-brand">{{ $listing->title }}</a>
        </h3>

        <p class="mt-1 flex items-center gap-1.5 text-sm text-text-secondary">
            <x-icon name="map" class="size-3.5 shrink-0 text-text-muted" />
            <span class="truncate">{{ $listing->locationLabel() }}</span>
        </p>

        @if ($listing->short_description)
            <p class="mt-2 line-clamp-2 text-sm text-text-secondary">{{ $listing->short_description }}</p>
        @endif

        @if ($detail)
            <dl class="mt-auto flex flex-wrap items-center gap-x-4 gap-y-2 pt-3 text-sm text-text-secondary">
                @foreach ([
                    ['bed', $detail->bedrooms, __('bed')],
                    ['bath', $detail->bathrooms, __('bath')],
                    ['key', $detail->parking, __('parking')],
                ] as [$icon, $value, $label])
                    @if ($value)
                        <div class="flex items-center gap-1.5">
                            <x-icon :name="$icon" class="size-4 shrink-0 text-text-muted" />
                            <dt class="sr-only">{{ $label }}</dt>
                            <dd>{{ $value }} {{ $label }}</dd>
                        </div>
                    @endif
                @endforeach

                @if ($area = $detail->headlineArea())
                    <div class="flex items-center gap-1.5">
                        <x-icon name="area" class="size-4 shrink-0 text-text-muted" />
                        <dt class="sr-only">{{ __('Area') }}</dt>
                        <dd>{{ number_format($area) }} {{ __('sq. ft') }}</dd>
                    </div>
                @endif
            </dl>
        @endif
    </div>
</article>