<.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="collection"
>
  <main id="main-content">
    <.collection_header title="All Products" product_count={length(@preview_data.products)} />

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <.filter_bar categories={@preview_data.categories} />

      <.product_grid theme_settings={@theme_settings}>
        <%= for product <- @preview_data.products do %>
          <.product_card
            product={product}
            theme_settings={@theme_settings}
            mode={@mode}
            variant={:default}
            show_category={true}
          />
        <% end %>
      </.product_grid>
    </div>
  </main>
</.shop_layout>
