@props(['item'])
@php $wished = $shop->wished((int) $item->id); @endphp
<article class="group rounded-[24px] border border-surface-variant bg-white p-2 shadow-soft sm:rounded-[32px] sm:p-3">
    <div class="relative aspect-square overflow-hidden rounded-2xl bg-surface-mid sm:rounded-3xl">
        <a href="{{ route('product', $item->slug) }}" class="absolute inset-0" aria-label="{{ $item->name }}">
            @if ($item->image) <img src="{{ $item->image }}" alt="" loading="lazy" class="h-full w-full object-cover transition duration-300 group-hover:scale-105"> @endif
        </a>
        @if (!$item->in_stock)
            <span class="absolute left-2 top-2 rounded-full bg-primary px-2 py-1 text-[10px] sm:left-3 sm:top-3 sm:px-3 sm:py-1.5 sm:text-xs font-extrabold uppercase tracking-wider text-on-primary">{{ __('Sold out') }}</span>
        @elseif ($item->on_sale)
            <span class="absolute left-2 top-2 rounded-full bg-accent px-2 py-1 text-[10px] sm:left-3 sm:top-3 sm:px-3 sm:py-1.5 sm:text-xs font-extrabold uppercase tracking-wider text-white">{{ __('Discount') }}</span>
        @elseif ($item->is_new)
            <span class="absolute left-2 top-2 rounded-full bg-tertiary-container px-2 py-1 text-[10px] sm:left-3 sm:top-3 sm:px-3 sm:py-1.5 sm:text-xs font-extrabold uppercase tracking-wider text-on-tertiary">{{ __('New') }}</span>
        @endif

        @auth
            <form method="POST" action="{{ route('account.wishlist.toggle') }}" class="absolute right-2 top-2 z-10" data-wishlist data-style="icon">
                @csrf <input type="hidden" name="product_id" value="{{ $item->id }}">
                <button type="submit" class="flex h-8 w-8 items-center justify-center rounded-full bg-white shadow-soft sm:h-11 sm:w-11 ring-1 ring-outline-variant {{ $wished ? 'text-error' : 'text-primary hover:text-error' }}"
                        aria-label="{{ $wished ? __('Remove from wishlist') : __('Add to wishlist') }}" aria-pressed="{{ $wished ? 'true' : 'false' }}">
                    <svg class="h-4 w-4 sm:h-5 sm:w-5" viewBox="0 0 24 24" fill="{{ $wished ? 'currentColor' : 'none' }}" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1.1L12 21l7.8-7.5 1-1.1a5.5 5.5 0 0 0 0-7.8z"/></svg>
                </button>
            </form>
        @else
            <a href="{{ route('login') }}" class="absolute right-2 top-2 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-white text-primary sm:h-11 sm:w-11 shadow-soft ring-1 ring-outline-variant hover:text-error" aria-label="{{ __('Sign in to save') }}"><x-icon name="heart"/></a>
        @endauth
    </div>
    <div class="flex items-end justify-between gap-2 px-1 pb-1 pt-3 sm:gap-3 sm:px-2 sm:pb-2 sm:pt-4">
        <div class="min-w-0 space-y-1.5 sm:space-y-2">
            @if ($item->swatches)
                <div class="flex gap-1.5">
                    @foreach ($item->swatches as $s)
                        <span title="{{ $s->label }}" class="h-3.5 w-3.5 rounded-full border-2 sm:h-4 sm:w-4 border-white ring-1 ring-outline" style="background: {{ $s->hex ?: '#ccc' }}"></span>
                    @endforeach
                </div>
            @endif
            <a href="{{ route('product', $item->slug) }}" class="block text-sm font-bold leading-snug sm:text-base text-primary">{{ $item->name }}</a>
            <x-price :amount="$item->price" :compare="$item->compare_at" class="text-sm sm:text-lg"/>
        </div>
        <a href="{{ route('product', $item->slug) }}" aria-label="{{ __('Choose options for :name', ['name' => $item->name]) }}"
           class="flex h-9 w-9 flex-none sm:h-12 sm:w-12 items-center justify-center rounded-full bg-primary text-white transition hover:bg-primary-container"><x-icon name="plus"/></a>
    </div>
</article>