<.shop_layout
  theme_settings={@theme_settings}
  logo_image={@logo_image}
  header_image={@header_image}
  mode={@mode}
  cart_items={@cart_items}
  cart_count={@cart_count}
  cart_subtotal={@cart_subtotal}
  cart_drawer_open={assigns[:cart_drawer_open] || false}
  cart_status={assigns[:cart_status]}
  active_page="cart"
>
  <main id="main-content" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <.page_title text="Your basket" />

    <%= if @cart_items == [] do %>
      <.cart_empty_state mode={@mode} />
    <% else %>
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <div class="lg:col-span-2">
          <ul
            role="list"
            aria-label="Cart items"
            class="flex flex-col gap-4"
            style="list-style: none; margin: 0; padding: 0;"
          >
            <%= for item <- @cart_items do %>
              <li>
                <.shop_card class="p-4">
                  <.cart_item_row item={item} size={:default} show_quantity_controls mode={@mode} />
                </.shop_card>
              </li>
            <% end %>
          </ul>
        </div>

        <div>
          <.order_summary subtotal={@cart_page_subtotal} mode={@mode} />
        </div>
      </div>
    <% end %>
  </main>
</.shop_layout>
