{{--
    One cart line. $line is a Lunar\Models\CartLine (iteration var set by
    @each in cart-body). The two forms post through bbk-cart-controller
    (fetch + method spoofing) and the response re-renders cart-body.
--}}
@php
    $variant = $line->purchasable;
    $product = $variant?->product;
    $name = $product?->translateAttribute('name') ?? $variant?->sku ?? '—';
    // The variant's own image (falls back to the product's thumbnail
    // internally — see ProductVariant::getThumbnail()) — the specific option
    // the shopper picked, not just the product in general.
    $thumb = $variant?->getThumbnailImage() ?: null;
    $variantLabel = $variant?->getOption();
    // Not routed through checkout::'s own locale-explicit convention — this
    // is a storefront route, so it follows the storefront's own (implicit
    // locale) call shape, same as App\Catalog\ProductCard. Carries the
    // variant id along so the product page can restore the same option the
    // shopper actually has in their cart, not just default to the first one
    // (see product-form-controller.js reading ?variant= on connect()).
    $productUrl = $product ? route('product.show', ['id' => $product->id, 'variant' => $variant?->id]) : null;
@endphp

<li class="bbk-cart-item" data-bbk-line-id="{{ $line->id }}">
    <div class="bbk-cart-item-media">
        @if ($thumb)
            {{-- Decorative duplicate of the title link below — hidden from AT
                 and skipped by keyboard so the product isn't announced twice. --}}
            @if ($productUrl)
                <a href="{{ $productUrl }}" aria-hidden="true" tabindex="-1">
                    <img src="{{ $thumb }}" alt="" width="72" height="72" loading="lazy">
                </a>
            @else
                <img src="{{ $thumb }}" alt="" width="72" height="72" loading="lazy">
            @endif
        @endif
    </div>

    <div class="bbk-cart-item-detail">
        <div class="bbk-cart-item-head">
            @if ($productUrl)
                <a href="{{ $productUrl }}" class="bbk-cart-item-title" id="bbk-cart-item-title-{{ $line->id }}">{{ $name }}</a>
            @else
                <p class="bbk-cart-item-title" id="bbk-cart-item-title-{{ $line->id }}">{{ $name }}</p>
            @endif

            <form
                class="bbk-cart-item-remove-form"
                method="POST"
                action="{{ route('checkout.cart.remove', ['locale' => app()->getLocale(), 'line' => $line->id]) }}"
                data-action="submit->bbk-cart#submit"
            >
                @csrf
                @method('DELETE')
                {{-- Named "Remove", described by the product title, so AT
                     hears which line it removes rather than a bare "Remove". --}}
                <button
                    type="submit"
                    class="bbk-cart-item-remove"
                    aria-label="{{ __('checkout.cart.remove') }}"
                    aria-describedby="bbk-cart-item-title-{{ $line->id }}"
                ><span aria-hidden="true">&times;</span></button>
            </form>
        </div>

        @if ($variantLabel)
            <p class="bbk-cart-item-variant">{{ $variantLabel }}</p>
        @endif
        @include('checkout::partials.line-custom-fields', ['line' => $line])
        <p class="bbk-cart-item-unit">{{ $line->unitPrice?->formatted() }}</p>

        <div class="bbk-cart-item-foot">
            {{-- role=group + the title as its name: entering the stepper
                 announces which product's quantity is being changed. --}}
            <form
                class="bbk-cart-qty"
                method="POST"
                action="{{ route('checkout.cart.update', ['locale' => app()->getLocale(), 'line' => $line->id]) }}"
                role="group"
                aria-labelledby="bbk-cart-item-title-{{ $line->id }}"
            >
                @csrf
                @method('PATCH')
                <button
                    type="button"
                    class="bbk-cart-qty-btn"
                    data-action="bbk-cart#step"
                    data-bbk-cart-dir-param="-1"
                    aria-label="{{ __('checkout.cart.decrease') }}"
                ><span aria-hidden="true">&minus;</span></button>

                <input
                    type="number"
                    name="quantity"
                    value="{{ $line->quantity }}"
                    min="0"
                    inputmode="numeric"
                    class="bbk-cart-qty-input"
                    data-action="change->bbk-cart#submit"
                    data-bbk-cart-confirmed-quantity="{{ $line->quantity }}"
                    aria-label="{{ __('checkout.cart.quantity') }}"
                >

                <button
                    type="button"
                    class="bbk-cart-qty-btn"
                    data-action="bbk-cart#step"
                    data-bbk-cart-dir-param="1"
                    aria-label="{{ __('checkout.cart.increase') }}"
                ><span aria-hidden="true">+</span></button>
            </form>

            <p class="bbk-cart-item-total">
                <span class="bbk-visually-hidden">{{ __('checkout.cart.total') }}:</span>
                {{ $line->subTotal?->formatted() }}
            </p>
        </div>
    </div>
</li>