@props([
    'listing',
    'favourited' => false,
    'label' => false,   // show the word as well as the heart
])

{{--
    Shortlisting.

    A form, not a bare button: with JavaScript off it posts and redirects back,
    which matters because this is the first thing a visitor clicks before they
    have decided to trust the site with anything. Alpine upgrades it to a fetch
    and flips the heart in place.

    A signed-out visitor is sent to sign in with the listing remembered, so they
    come back to what they were looking at rather than to the home page.
--}}
@auth
    <form action="{{ route('account.favourites.toggle', $listing) }}" method="POST"
          x-data="favouriteToggle({{ $favourited ? 'true' : 'false' }})"
          @submit.prevent="toggle($el)"
          {{ $attributes->merge(['class' => 'inline-flex']) }}>
        @csrf

        <button type="submit"
                class="inline-flex items-center gap-2 rounded-lg border border-border bg-surface/95 px-3 py-2 text-sm font-medium text-text transition hover:bg-surface-muted"
                :aria-pressed="favourited"
                :aria-label="favourited ? '{{ __('Remove from shortlist') }}' : '{{ __('Save to shortlist') }}'">
            <x-icon name="bookmark" class="size-4 transition" ::class="favourited && 'fill-primary text-primary'" />

            @if ($label)
                <span x-text="favourited ? '{{ __('Saved') }}' : '{{ __('Save') }}'">
                    {{ $favourited ? __('Saved') : __('Save') }}
                </span>
            @endif
        </button>
    </form>
@else
    <a href="{{ route('login', ['intended' => request()->fullUrl()]) }}"
       {{ $attributes->merge(['class' => 'inline-flex items-center gap-2 rounded-lg border border-border bg-surface/95 px-3 py-2 text-sm font-medium text-text transition hover:bg-surface-muted']) }}
       aria-label="{{ __('Sign in to save this listing') }}">
        <x-icon name="bookmark" class="size-4" />
        @if ($label)
            <span>{{ __('Save') }}</span>
        @endif
    </a>
@endauth