extends layout 

block content 
  h1 Products page 
  div#results
    if products && products.length
      each product in products
        .card(style="border:1px solid #ccc;padding:10px;margin:10px;display:inline-block;width:200px;")
          if product.image && product.image.src
            img(src=product.image.src, alt=product.title, style="width:100%;height:150px;object-fit:cover;")
          else if product.images && product.images.length
            img(src=product.images[0].src, alt=product.title, style="width:100%;height:150px;object-fit:cover;")
          else
            div(style="width:100%;height:150px;background:#eee;text-align:center;line-height:150px;") No Image
          h3= product.title
          if product.variants && product.variants.length
            p Price: $#{product.variants[0].price}
          else
            p Price: N/A
    else
      p No products found.