@if(empty($lines))
    <div class="sf-drawer-empty">
        <p class="sf-empty__title">Your cart is empty</p>
        <p class="sf-empty__text">Add products from the catalog to continue.</p>
    </div>
@else
    <div class="sf-drawer-lines">
        @foreach($lines as $row)
            @php $p = $row['product']; @endphp
            <div class="sf-drawer-line" data-line-key="{{ $row['line_key'] ?? '' }}" data-product-id="{{ $p->id }}" data-variant-id="{{ $row['variant']->id ?? '' }}">
                <div class="sf-drawer-line__content">
                    <a class="sf-drawer-line__name" href="{{ $p->slug ? route('storefront.product', ['slug' => $sfStore->slug, 'product_slug' => $p->slug]) : route('storefront.product.legacy', ['slug' => $sfStore->slug, 'id' => $p->id]) }}">{{ $p->name }}</a>
                    @if(!empty($row['variant']))
                        <p class="sf-drawer-line__variant">{{ $row['variant']->name }}</p>
                    @endif
                    <div class="sf-drawer-qty" data-product-id="{{ $p->id }}">
                        <button type="button" class="sf-drawer-qty__btn sf-drawer-qty__btn--minus" data-action="decrease" data-product-id="{{ $p->id }}" data-variant-id="{{ $row['variant']->id ?? '' }}" data-qty="{{ $row['qty'] }}">−</button>
                        <span class="sf-drawer-qty__value" id="sfQty{{ $p->id }}">{{ $row['qty'] }}</span>
                        <button type="button" class="sf-drawer-qty__btn sf-drawer-qty__btn--plus" data-action="increase" data-product-id="{{ $p->id }}" data-variant-id="{{ $row['variant']->id ?? '' }}" data-qty="{{ $row['qty'] }}">+</button>
                    </div>
                </div>
                <div class="sf-drawer-line__actions">
                    <div class="sf-drawer-line__pricing">
                        <span class="sf-drawer-line__each">{{ $row['qty'] }} x {{ format_currency($row['unit']) }}</span>
                        <span class="sf-drawer-line__line">{{ format_currency($row['line']) }}</span>
                    </div>
                    <button
                        type="button"
                        class="sf-drawer-remove-btn"
                        data-line-key="{{ $row['line_key'] ?? '' }}"
                        data-product-id="{{ $p->id }}"
                        data-variant-id="{{ $row['variant']->id ?? '' }}"
                        data-remove-url="{{ route('storefront.cart.remove', ['slug' => $sfStore->slug]) }}"
                        aria-label="Remove item"
                        title="Remove item"
                    >
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none">
                            <path d="M3 6h18M9 6V4h6v2m-8 0l1 14h8l1-14" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </button>
                </div>
            </div>
        @endforeach
    </div>
@endif