{% doc %}
  @prompt
    Make a new shop page section to show products, in AJAX pagination method, with sorting option on top, Make it dynamic (so we can change the color scheme and the options), For the styling (for typography, color scheme, etc) use the same one that has been set on theme options (make it as dynamic), also an setting to show or hide sold out products, why no product image showing? make sure to get the product images, the image still not showing, and the img source is now "[object Object]", Make sure to get each products featured image, adjustment : 
    1. Get All Products
    2. Fix the product price and Make sure to get each products data just like the one that has been set on the shopify backend., Why is no product showing now?, adjustment :
    1. can we get all product, since right now it's only showing sold out products., adjusment :
    1. option to : change how many column 
    2. Styling have option to choose between Inherit (choose color scheme) or manually
    
{% enddoc %}
{% assign ai_gen_id = block.id | replace: '_', '' | downcase %}

{% style %}
  .ai-product-listing-{{ ai_gen_id }} {
    {% if block.settings.styling_mode == 'inherit' %}
      background-color: rgb(from {{ settings.color_schemes[block.settings.color_scheme].settings.background }} r g b / 1);
      color: {{ settings.color_schemes[block.settings.color_scheme].settings.foreground }};
    {% else %}
      background-color: {{ block.settings.custom_background_color }};
      color: {{ block.settings.custom_text_color }};
    {% endif %}
    padding: {{ block.settings.section_padding_top }}px 0 {{ block.settings.section_padding_bottom }}px;
  }

  .ai-product-listing-container-{{ ai_gen_id }} {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .ai-product-listing-header-{{ ai_gen_id }} {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 20px;
  }

  .ai-shop-product-title-{{ ai_gen_id }} {
    font-weight: 400 !important;
  }
  .ai-product-listing-title-{{ ai_gen_id }} {
    font-family: {{ settings.type_heading_font.family }}, {{ settings.type_heading_font.fallback_families }};
    font-size: {{ block.settings.heading_size }}px;
    {% if block.settings.styling_mode == 'inherit' %}
      color: {{ settings.color_schemes[block.settings.color_scheme].settings.foreground_heading }};
    {% else %}
      color: {{ block.settings.custom_heading_color }};
    {% endif %}
    margin: 0;
    text-transform: {% if settings.type_case_h2 == 'uppercase' %}uppercase{% else %}none{% endif %};
    letter-spacing: {% if settings.type_letter_spacing_h2 == 'heading-tight' %}-0.02em{% elsif settings.type_letter_spacing_h2 == 'heading-loose' %}0.05em{% else %}0{% endif %};
  }

  .ai-product-listing-controls-{{ ai_gen_id }} {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
  }

  .ai-product-listing-sort-{{ ai_gen_id }},
  .ai-product-listing-per-page-{{ ai_gen_id }} {
    padding: 8px 12px;
    {% if block.settings.styling_mode == 'inherit' %}
      border: {{ settings.input_border_width }}px solid {{ settings.color_schemes[block.settings.color_scheme].settings.border }};
      background-color: {{ settings.color_schemes[block.settings.color_scheme].settings.input_background }};
      color: {{ settings.color_schemes[block.settings.color_scheme].settings.input_text_color }};
    {% else %}
      border: 1px solid {{ block.settings.custom_border_color }};
      background-color: {{ block.settings.custom_input_background }};
      color: {{ block.settings.custom_input_text }};
    {% endif %}
    border-radius: {{ settings.inputs_border_radius }}px;
    font-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }};
    font-size: {{ settings.type_size_paragraph }}px;
  }

  .ai-product-listing-grid-{{ ai_gen_id }} {
    display: grid;
    grid-template-columns: repeat({{ block.settings.columns_desktop }}, 1fr);
    gap: {{ block.settings.grid_gap }}px;
    margin-bottom: 40px;
  }

  .ai-product-card-{{ ai_gen_id }} {
    {% if block.settings.styling_mode == 'inherit' %}
      background-color: {{ settings.color_schemes[block.settings.color_scheme].settings.background }};
      border: 1px solid {{ settings.color_schemes[block.settings.color_scheme].settings.border }};
    {% else %}
      background-color: {{ block.settings.custom_card_background }};
      border: 1px solid {{ block.settings.custom_card_border }};
    {% endif %}
    border-radius: {{ settings.product_corner_radius }}px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .ai-product-card-{{ ai_gen_id }}:hover {
    {% if settings.card_hover_effect == 'lift' %}
      transform: translateY(-4px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    {% elsif settings.card_hover_effect == 'scale' %}
      transform: scale(1.02);
    {% elsif settings.card_hover_effect == 'subtle-zoom' %}
      transform: scale(1.01);
    {% endif %}
  }

  .ai-product-image-{{ ai_gen_id }} {
    width: 100%;
    height: {{ block.settings.image_height }}px;
    object-fit: cover;
    display: block;
  }

  .ai-product-info-{{ ai_gen_id }} {
    padding: 15px;
  }

  .ai-product-title-{{ ai_gen_id }} a {
    font-family: {{ settings.type_subheading_font.family }}, {{ settings.type_subheading_font.fallback_families }};
    font-weight: {{ settings.type_subheading_font.weight }};
    font-size: {{ settings.type_size_h5 }}px;
    {% if block.settings.styling_mode == 'inherit' %}
      color: {{ settings.color_schemes[block.settings.color_scheme].settings.foreground_heading }};
    {% else %}
      color: {{ block.settings.custom_product_title_color }};
    {% endif %}
    margin: 0 0 8px 0;
    line-height: 1.3;
  }

  .ai-product-price-{{ ai_gen_id }} {
    font-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }};
    font-size: {{ settings.type_size_paragraph }}px;
    {% if block.settings.styling_mode == 'inherit' %}
      color: {{ settings.color_schemes[block.settings.color_scheme].settings.foreground }};
    {% else %}
      color: {{ block.settings.custom_product_price_color }};
    {% endif %}
    margin: 0;
  }

  .ai-product-price-compare-{{ ai_gen_id }} {
    text-decoration: line-through;
    opacity: 0.7;
    margin-right: 8px;
  }

  .ai-product-badge-{{ ai_gen_id }} {
    position: absolute;
    top: 10px;
    right: 10px;
    {% if block.settings.styling_mode == 'inherit' %}
      background-color: {{ settings.color_schemes[settings.badge_sold_out_color_scheme].settings.background }};
      color: {{ settings.color_schemes[settings.badge_sold_out_color_scheme].settings.foreground }};
    {% else %}
      background-color: {{ block.settings.custom_badge_background }};
      color: {{ block.settings.custom_badge_text }};
    {% endif %}
    padding: 4px 8px;
    border-radius: {{ settings.badge_corner_radius }}px;
    font-size: 12px;
    font-weight: 600;
    text-transform: {% if settings.badge_text_transform == 'uppercase' %}uppercase{% else %}none{% endif %};
  }

  .ai-product-image-container-{{ ai_gen_id }} {
    position: relative;
  }

  .ai-pagination-{{ ai_gen_id }} {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 40px;
  }

  .ai-pagination-button-{{ ai_gen_id }} {
    padding: 8px 16px;
    {% if block.settings.styling_mode == 'inherit' %}
      border: {{ settings.primary_button_border_width }}px solid {{ settings.color_schemes[block.settings.color_scheme].settings.primary_button_border }};
      background-color: {{ settings.color_schemes[block.settings.color_scheme].settings.primary_button_background }};
      color: {{ settings.color_schemes[block.settings.color_scheme].settings.primary_button_text }};
    {% else %}
      border: 1px solid {{ block.settings.custom_button_border }};
      background-color: {{ block.settings.custom_button_background }};
      color: {{ block.settings.custom_button_text }};
    {% endif %}
    border-radius: {{ settings.button_border_radius_primary }}px;
    text-decoration: none;
    font-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }};
    font-size: {{ settings.type_size_paragraph }}px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .ai-pagination-button-{{ ai_gen_id }}:hover {
    {% if block.settings.styling_mode == 'inherit' %}
      background-color: {{ settings.color_schemes[block.settings.color_scheme].settings.primary_button_hover_background }};
      color: {{ settings.color_schemes[block.settings.color_scheme].settings.primary_button_hover_text }};
      border-color: {{ settings.color_schemes[block.settings.color_scheme].settings.primary_button_hover_border }};
    {% else %}
      background-color: {{ block.settings.custom_button_hover_background }};
      color: {{ block.settings.custom_button_hover_text }};
      border-color: {{ block.settings.custom_button_hover_border }};
    {% endif %}
  }

  .ai-pagination-button-{{ ai_gen_id }}.active {
    {% if block.settings.styling_mode == 'inherit' %}
      background-color: {{ settings.color_schemes[block.settings.color_scheme].settings.foreground_heading }};
      color: {{ settings.color_schemes[block.settings.color_scheme].settings.background }};
    {% else %}
      background-color: {{ block.settings.custom_button_active_background }};
      color: {{ block.settings.custom_button_active_text }};
    {% endif %}
  }

  .ai-pagination-button-{{ ai_gen_id }}:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .ai-loading-{{ ai_gen_id }} {
    text-align: center;
    padding: 40px;
    font-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }};
    {% if block.settings.styling_mode == 'inherit' %}
      color: {{ settings.color_schemes[block.settings.color_scheme].settings.foreground }};
    {% else %}
      color: {{ block.settings.custom_text_color }};
    {% endif %}
  }

  .ai-no-products-{{ ai_gen_id }} {
    text-align: center;
    padding: 60px 20px;
    font-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }};
    {% if block.settings.styling_mode == 'inherit' %}
      color: {{ settings.color_schemes[block.settings.color_scheme].settings.foreground }};
    {% else %}
      color: {{ block.settings.custom_text_color }};
    {% endif %}
  }

  .ai-debug-panel-{{ ai_gen_id }} {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 20px;
    font-family: monospace;
    font-size: 12px;
    color: #333;
  }

  @media screen and (max-width: 768px) {
    .ai-product-listing-header-{{ ai_gen_id }} {
      flex-direction: column;
      align-items: stretch;
    }

    .ai-product-listing-controls-{{ ai_gen_id }} {
      justify-content: center;
    }

    .ai-product-listing-grid-{{ ai_gen_id }} {
      grid-template-columns: repeat({{ block.settings.columns_mobile }}, 1fr);
      gap: 15px;
    }

    .ai-product-card-{{ ai_gen_id }} {
      min-width: 0;
    }

    .ai-product-info-{{ ai_gen_id }} {
      padding: 10px;
    }

    .ai-product-title-{{ ai_gen_id }} {
      font-size: 14px;
    }

    .ai-pagination-{{ ai_gen_id }} {
      flex-wrap: wrap;
    }
  }
{% endstyle %}

<product-listing-{{ ai_gen_id }}
  class="ai-product-listing-{{ ai_gen_id }}"
  data-collection-handle="{% if block.settings.collection %}{{ block.settings.collection.handle }}{% endif %}"
  data-products-per-page="{{ block.settings.products_per_page }}"
  data-show-sold-out="{{ block.settings.show_sold_out }}"
  data-debug="{{ block.settings.show_debug }}"
  {{ block.shopify_attributes }}
>
  <div class="ai-product-listing-container-{{ ai_gen_id }}">
    {% if block.settings.heading != blank %}
      <div class="ai-product-listing-header-{{ ai_gen_id }}">
        <h2 class="ai-product-listing-title-{{ ai_gen_id }}">{{ block.settings.heading }}</h2>
        <div class="ai-product-listing-controls-{{ ai_gen_id }}">
          <select class="ai-product-listing-sort-{{ ai_gen_id }}" id="sort-{{ ai_gen_id }}">
            <option value="created-desc">Newest first</option>
            <option value="created-asc">Oldest first</option>
            <option value="title-asc">A-Z</option>
            <option value="title-desc">Z-A</option>
            <option value="price-asc">Price: Low to High</option>
            <option value="price-desc">Price: High to Low</option>
          </select>
          <select class="ai-product-listing-per-page-{{ ai_gen_id }}" id="per-page-{{ ai_gen_id }}">
            <option value="12">12 per page</option>
            <option value="24">24 per page</option>
            <option value="48">48 per page</option>
            <option value="96">96 per page</option>
          </select>
        </div>
      </div>
    {% endif %}

    <div id="debug-panel-{{ ai_gen_id }}" class="ai-debug-panel-{{ ai_gen_id }}" style="display: none;"></div>
    
    <div id="loading-{{ ai_gen_id }}" class="ai-loading-{{ ai_gen_id }}">
      Loading products...
    </div>

    <div id="products-grid-{{ ai_gen_id }}" class="ai-product-listing-grid-{{ ai_gen_id }}" style="display: none;"></div>

    <div id="no-products-{{ ai_gen_id }}" class="ai-no-products-{{ ai_gen_id }}" style="display: none;">
      <h3>No products found</h3>
      <p>Try adjusting your filters or check back later.</p>
    </div>

    <div id="pagination-{{ ai_gen_id }}" class="ai-pagination-{{ ai_gen_id }}" style="display: none;"></div>
  </div>
</product-listing-{{ ai_gen_id }}>

<script>
  (function() {
    class ProductListing{{ ai_gen_id }} extends HTMLElement {
      constructor() {
        super();
        this.allProducts = [];
        this.filteredProducts = [];
        this.currentPage = 1;
        this.productsPerPage = parseInt(this.dataset.productsPerPage) || 12;
        this.showSoldOut = this.dataset.showSoldOut === 'true';
        this.showDebug = this.dataset.showDebug === 'true';
        this.collectionHandle = this.dataset.collectionHandle;
        this.isLoading = false;
      }

      connectedCallback() {
        this.setupEventListeners();
        this.loadProducts();
        
        if (this.showDebug) {
          document.getElementById('debug-panel-{{ ai_gen_id }}').style.display = 'block';
        }
      }

      setupEventListeners() {
        const sortSelect = document.getElementById('sort-{{ ai_gen_id }}');
        const perPageSelect = document.getElementById('per-page-{{ ai_gen_id }}');

        if (sortSelect) {
          sortSelect.addEventListener('change', () => {
            this.sortProducts(sortSelect.value);
            this.currentPage = 1;
            this.renderProducts();
            this.renderPagination();
          });
        }

        if (perPageSelect) {
          perPageSelect.addEventListener('change', () => {
            this.productsPerPage = parseInt(perPageSelect.value);
            this.currentPage = 1;
            this.renderProducts();
            this.renderPagination();
          });
        }
      }

      async loadProducts() {
        this.isLoading = true;
        this.showLoading(true);
        
        try {
          let url;
          if (this.collectionHandle) {
            url = `/collections/${this.collectionHandle}/products.json?limit=250`;
          } else {
            url = '/products.json?limit=250';
          }

          this.debugLog('Starting to load products from:', url);
          
          let allProducts = [];
          let hasMore = true;
          let page = 1;

          while (hasMore) {
            const pageUrl = `${url}&page=${page}`;
            this.debugLog(`Loading page ${page}:`, pageUrl);
            
            const response = await fetch(pageUrl);
            if (!response.ok) {
              throw new Error(`HTTP error! status: ${response.status}`);
            }
            
            const data = await response.json();
            this.debugLog(`Page ${page} loaded:`, data.products.length, 'products');
            
            if (data.products && data.products.length > 0) {
              allProducts = allProducts.concat(data.products);
              page++;
              
              if (data.products.length < 250) {
                hasMore = false;
              }
            } else {
              hasMore = false;
            }
          }

          this.debugLog('Total products loaded:', allProducts.length);
          this.allProducts = allProducts;
          this.filterProducts();
          this.renderProducts();
          this.renderPagination();
          
        } catch (error) {
          console.error('Error loading products:', error);
          this.debugLog('Error loading products:', error.message);
          this.showError('Failed to load products. Please try again.');
        } finally {
          this.isLoading = false;
          this.showLoading(false);
        }
      }

      filterProducts() {
        this.filteredProducts = this.allProducts.filter(product => {
          if (!this.showSoldOut) {
            const hasAvailableVariant = product.variants && product.variants.some(variant => variant.available);
            return hasAvailableVariant;
          }
          return true;
        });
        
        this.debugLog('Filtered products:', this.filteredProducts.length);
        this.debugLog('Show sold out setting:', this.showSoldOut);
        this.debugLog('Available products:', this.allProducts.filter(p => p.variants && p.variants.some(v => v.available)).length);
        this.debugLog('Sold out products:', this.allProducts.filter(p => !p.variants || !p.variants.some(v => v.available)).length);
      }

      sortProducts(sortBy) {
        this.debugLog('Sorting by:', sortBy);
        
        this.filteredProducts.sort((a, b) => {
          switch (sortBy) {
            case 'title-asc':
              return a.title.localeCompare(b.title);
            case 'title-desc':
              return b.title.localeCompare(a.title);
            case 'price-asc':
              return this.getProductPrice(a) - this.getProductPrice(b);
            case 'price-desc':
              return this.getProductPrice(b) - this.getProductPrice(a);
            case 'created-asc':
              return new Date(a.created_at) - new Date(b.created_at);
            case 'created-desc':
            default:
              return new Date(b.created_at) - new Date(a.created_at);
          }
        });
      }

      getProductPrice(product) {
        if (!product.variants || product.variants.length === 0) return 0;
        const prices = product.variants.map(v => parseFloat(v.price) || 0);
        return Math.min(...prices);
      }

      getProductImageUrl(product, size = '400x400') {
        if (!product.images || product.images.length === 0) {
          return '';
        }
        
        const image = product.images[0];
        if (typeof image === 'string') {
          return image.replace(/\.(jpg|jpeg|png|gif|webp)/, `_${size}.$1`);
        } else if (image && image.src) {
          return image.src.replace(/\.(jpg|jpeg|png|gif|webp)/, `_${size}.$1`);
        }
        
        return '';
      }

      formatPrice(price) {
        const numPrice = parseFloat(price);
        if (isNaN(numPrice)) return '';
        
        return new Intl.NumberFormat('{{ shop.locale }}', {
          style: 'currency',
          currency: '{{ shop.currency }}',
          minimumFractionDigits: 0,
          maximumFractionDigits: 2
        }).format(numPrice);
      }

      isProductSoldOut(product) {
        if (!product.variants || product.variants.length === 0) return true;
        return !product.variants.some(variant => variant.available);
      }

      renderProducts() {
        const grid = document.getElementById('products-grid-{{ ai_gen_id }}');
        const noProducts = document.getElementById('no-products-{{ ai_gen_id }}');

        if (this.filteredProducts.length === 0) {
          grid.style.display = 'none';
          noProducts.style.display = 'block';
          return;
        }

        const startIndex = (this.currentPage - 1) * this.productsPerPage;
        const endIndex = startIndex + this.productsPerPage;
        const productsToShow = this.filteredProducts.slice(startIndex, endIndex);

        grid.innerHTML = productsToShow.map(product => {
          const imageUrl = this.getProductImageUrl(product);
          const price = this.getProductPrice(product);
          
          // 1. Get Compare Price
          const comparePrice = product.variants && product.variants[0] && product.variants[0].compare_at_price 
            ? parseFloat(product.variants[0].compare_at_price) 
            : null;
            
          const isSoldOut = this.isProductSoldOut(product);
          
          // 2. Define Exchange Rate (Matches your price.liquid)
          const exchangeRate = 16000;
          
          // 3. Helper to Calculate USD
          const getUsd = (p) => '$' + Math.ceil(p / exchangeRate);

          return `
            <div class="ai-product-card-{{ ai_gen_id }}">
              <div class="ai-product-image-container-{{ ai_gen_id }}">
                <a href="/products/${product.handle}" style="text-decoration: none; color: inherit;">
                  ${imageUrl ? `<img src="${imageUrl}" alt="${product.title}" class="ai-product-image-{{ ai_gen_id }}">` : ''}
                  ${isSoldOut ? `<span class="ai-product-badge-{{ ai_gen_id }}">Sold Out</span>` : ''}
                </a>
              </div>
              <div class="ai-product-info-{{ ai_gen_id }}">
                <h3 class="ai-product-title-{{ ai_gen_id }}">
                  <a href="/products/${product.handle}" style="text-decoration: none; color: inherit;">
                    ${product.title}
                  </a>
                </h3>
                
                <div style="display:flex; flex-wrap:wrap; align-items:center;">
                  ${comparePrice ? `
                    <span class="ai-product-price-compare-{{ ai_gen_id }}">
                      <span class="money" data-currency="IDR">${this.formatPrice(comparePrice)}</span>
                      <span class="money" data-currency="USD" style="display:none;">${getUsd(comparePrice)}</span>
                    </span>
                  ` : ''}
                  
                  <span class="ai-product-price-{{ ai_gen_id }}">
                    <span class="money" data-currency="IDR">${this.formatPrice(price)}</span>
                    <span class="money" data-currency="USD" style="display:none;">${getUsd(price)}</span>
                  </span>
                </div>
                </div>
            </div>
          `;
        }).join('');

        grid.style.display = 'grid';
        noProducts.style.display = 'none';
      }

      renderPagination() {
        const pagination = document.getElementById('pagination-{{ ai_gen_id }}');
        const totalPages = Math.ceil(this.filteredProducts.length / this.productsPerPage);

        if (totalPages <= 1) {
          pagination.style.display = 'none';
          return;
        }

        let paginationHTML = '';

        if (this.currentPage > 1) {
          paginationHTML += `<button class="ai-pagination-button-{{ ai_gen_id }}" onclick="this.closest('product-listing-{{ ai_gen_id }}').goToPage(${this.currentPage - 1})">Previous</button>`;
        }

        const startPage = Math.max(1, this.currentPage - 2);
        const endPage = Math.min(totalPages, this.currentPage + 2);

        if (startPage > 1) {
          paginationHTML += `<button class="ai-pagination-button-{{ ai_gen_id }}" onclick="this.closest('product-listing-{{ ai_gen_id }}').goToPage(1)">1</button>`;
          if (startPage > 2) {
            paginationHTML += `<span>...</span>`;
          }
        }

        for (let i = startPage; i <= endPage; i++) {
          const activeClass = i === this.currentPage ? ' active' : '';
          paginationHTML += `<button class="ai-pagination-button-{{ ai_gen_id }}${activeClass}" onclick="this.closest('product-listing-{{ ai_gen_id }}').goToPage(${i})">${i}</button>`;
        }

        if (endPage < totalPages) {
          if (endPage < totalPages - 1) {
            paginationHTML += `<span>...</span>`;
          }
          paginationHTML += `<button class="ai-pagination-button-{{ ai_gen_id }}" onclick="this.closest('product-listing-{{ ai_gen_id }}').goToPage(${totalPages})">${totalPages}</button>`;
        }

        if (this.currentPage < totalPages) {
          paginationHTML += `<button class="ai-pagination-button-{{ ai_gen_id }}" onclick="this.closest('product-listing-{{ ai_gen_id }}').goToPage(${this.currentPage + 1})">Next</button>`;
        }

        pagination.innerHTML = paginationHTML;
        pagination.style.display = 'flex';
      }

      goToPage(page) {
        this.currentPage = page;
        this.renderProducts();
        this.renderPagination();
        this.scrollToTop();
      }

      scrollToTop() {
        this.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }

      showLoading(show) {
        const loading = document.getElementById('loading-{{ ai_gen_id }}');
        const grid = document.getElementById('products-grid-{{ ai_gen_id }}');
        const pagination = document.getElementById('pagination-{{ ai_gen_id }}');
        
        if (show) {
          loading.style.display = 'block';
          grid.style.display = 'none';
          pagination.style.display = 'none';
        } else {
          loading.style.display = 'none';
        }
      }

      showError(message) {
        const loading = document.getElementById('loading-{{ ai_gen_id }}');
        loading.innerHTML = `<div style="color: red;">${message}</div>`;
      }

      debugLog(...args) {
        if (this.showDebug) {
          console.log('[Product Listing Debug]', ...args);
          const debugPanel = document.getElementById('debug-panel-{{ ai_gen_id }}');
          if (debugPanel) {
            const timestamp = new Date().toLocaleTimeString();
            debugPanel.innerHTML += `<div>[${timestamp}] ${args.join(' ')}</div>`;
          }
        }
      }
    }

    customElements.define('product-listing-{{ ai_gen_id }}', ProductListing{{ ai_gen_id }});
  })();
</script>

{% schema %}
{
  "name": "Product listing",
  "settings": [
    {
      "type": "header",
      "content": "Content"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "All Products"
    },
    {
      "type": "collection",
      "id": "collection",
      "label": "Collection",
      "info": "Leave empty to show all products"
    },
    {
      "type": "checkbox",
      "id": "show_sold_out",
      "label": "Show sold out products",
      "default": false
    },
    {
      "type": "header",
      "content": "Layout"
    },
    {
      "type": "range",
      "id": "products_per_page",
      "min": 6,
      "max": 48,
      "step": 6,
      "label": "Products per page",
      "default": 12
    },
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 2,
      "max": 6,
      "step": 1,
      "label": "Columns on desktop",
      "default": 4
    },
    {
      "type": "select",
      "id": "columns_mobile",
      "label": "Columns on mobile",
      "options": [
        {
          "value": "1",
          "label": "1"
        },
        {
          "value": "2",
          "label": "2"
        }
      ],
      "default": "2"
    },
    {
      "type": "range",
      "id": "grid_gap",
      "min": 10,
      "max": 40,
      "step": 5,
      "unit": "px",
      "label": "Grid gap",
      "default": 20
    },
    {
      "type": "range",
      "id": "image_height",
      "min": 200,
      "max": 400,
      "step": 20,
      "unit": "px",
      "label": "Image height",
      "default": 280
    },
    {
      "type": "header",
      "content": "Style"
    },
    {
      "type": "select",
      "id": "styling_mode",
      "label": "Styling mode",
      "options": [
        {
          "value": "inherit",
          "label": "Inherit from theme"
        },
        {
          "value": "custom",
          "label": "Custom colors"
        }
      ],
      "default": "inherit"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "Color scheme",
      "default": "scheme-1",
      "info": "Used when styling mode is set to inherit"
    },
    {
      "type": "range",
      "id": "heading_size",
      "min": 20,
      "max": 60,
      "step": 2,
      "unit": "px",
      "label": "Heading size",
      "default": 32
    },
    {
      "type": "range",
      "id": "section_padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Top padding",
      "default": 40
    },
    {
      "type": "range",
      "id": "section_padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Bottom padding",
      "default": 40
    },
    {
      "type": "header",
      "content": "Custom colors"
    },
    {
      "type": "color",
      "id": "custom_background_color",
      "label": "Background color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "custom_text_color",
      "label": "Text color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "custom_heading_color",
      "label": "Heading color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "custom_border_color",
      "label": "Border color",
      "default": "#e6e6e6"
    },
    {
      "type": "color",
      "id": "custom_card_background",
      "label": "Card background",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "custom_card_border",
      "label": "Card border",
      "default": "#e6e6e6"
    },
    {
      "type": "color",
      "id": "custom_product_title_color",
      "label": "Product title color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "custom_product_price_color",
      "label": "Product price color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "custom_input_background",
      "label": "Input background",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "custom_input_text",
      "label": "Input text color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "custom_button_background",
      "label": "Button background",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "custom_button_text",
      "label": "Button text",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "custom_button_border",
      "label": "Button border",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "custom_button_hover_background",
      "label": "Button hover background",
      "default": "#333333"
    },
    {
      "type": "color",
      "id": "custom_button_hover_text",
      "label": "Button hover text",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "custom_button_hover_border",
      "label": "Button hover border",
      "default": "#333333"
    },
    {
      "type": "color",
      "id": "custom_button_active_background",
      "label": "Active button background",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "custom_button_active_text",
      "label": "Active button text",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "custom_badge_background",
      "label": "Badge background",
      "default": "#ff0000"
    },
    {
      "type": "color",
      "id": "custom_badge_text",
      "label": "Badge text",
      "default": "#ffffff"
    },
    {
      "type": "header",
      "content": "Debug"
    },
    {
      "type": "checkbox",
      "id": "show_debug",
      "label": "Show debug information",
      "default": false,
      "info": "Enable to see detailed loading information in browser console and debug panel"
    }
  ],
  "presets": [
    {
      "name": "Product listing"
    }
  ]
}
{% endschema %}