{#
/**
 * @file
 * Template for Single Product Block.
 *
 * Available variables:
 * - product_id: Product node ID.
 * - product_title: Product title.
 * - product_price: Formatted price.
 * - original_price: Original price without sale.
 * - images: Array of product images with 'url' and 'alt'.
 * - colors: Array of colors with 'label' and 'hex'.
 * - sizes: Array of size values.
 * - shipping_info: Shipping information text.
 * - product_url: Product page URL.
 * - enable_wishlist: Whether wishlist is enabled.
 * - enable_compare: Whether compare is enabled.
 * - tax_enabled: Whether tax is enabled.
 * - tax_label: Tax label (e.g., VAT).
 * - tax_rate: Tax rate percentage.
 * - free_shipping_message: Free shipping message.
 */
#}
<section class="py-16 lg:py-24 3xl:py-32 4xl:py-40 bg-gray-50 dark:bg-slate-800 transition-colors" data-block-type="single_product">
  <div class="max-w-7xl 3xl:max-w-8xl 4xl:max-w-9xl mx-auto px-4 sm:px-6 lg:px-8 3xl:px-12">
    <div class="grid lg:grid-cols-2 gap-8 lg:gap-12 3xl:gap-16 4xl:gap-20">
      <!-- Left - Product Gallery -->
      <div>
        <!-- Main Image -->
        <div class="rounded-2xl overflow-hidden mb-4 aspect-square flex items-center justify-center bg-white dark:bg-slate-900">
          {% if images|length > 0 %}
            {% if images[0].uri %}
              {{ responsive_image(images[0].uri, 'product_main', images[0].alt, 'w-full h-full object-contain') }}
            {% else %}
              <img id="product-main-image-{{ product_id }}" src="{{ images[0].url }}" alt="{{ images[0].alt }}" class="w-full h-full object-contain">
            {% endif %}
          {% else %}
            <svg class="w-24 h-24 text-gray-300 dark:text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
            </svg>
          {% endif %}
        </div>
        <!-- Thumbnail Gallery -->
        {% if images|length > 1 %}
          <div class="flex gap-2 sm:gap-3 items-center">
            <div class="flex gap-2 sm:gap-3 overflow-x-auto flex-1 pb-2 -mb-2">
              {% for image in images %}
                <button class="product-thumbnail flex-shrink-0 w-14 h-14 sm:w-20 sm:h-20 rounded-lg sm:rounded-xl overflow-hidden {{ loop.first ? 'opacity-100 ring-2 ring-blue-500' : 'opacity-60 hover:opacity-100' }} transition-opacity" data-image="{{ image.url }}" data-product-id="{{ product_id }}">
                  {% if image.uri %}
                    {{ responsive_image(image.uri, 'thumbnail', image.alt, 'w-full h-full object-cover') }}
                  {% else %}
                    <img src="{{ image.url }}" alt="{{ image.alt }}" class="w-full h-full object-cover">
                  {% endif %}
                </button>
              {% endfor %}
            </div>
          </div>
        {% endif %}
      </div>

      <!-- Right - Product Details -->
      <div>
        <!-- Product Title -->
        <h1 class="text-xl sm:text-2xl lg:text-3xl 3xl:text-4xl font-bold text-gray-900 dark:text-white mb-4">{{ product_title }}</h1>

        <!-- Color Swatches -->
        {% if colors|length > 0 %}
          <div class="flex items-center gap-2 mb-4">
            {% for color in colors %}
              <button class="product-color-swatch w-7 h-7 rounded-full ring-2 ring-offset-2 {{ loop.first ? 'ring-blue-500' : 'ring-transparent hover:ring-gray-300' }}" style="background-color: {{ color.hex }}" data-color="{{ color.label }}" title="{{ color.label }}"></button>
            {% endfor %}
          </div>
        {% endif %}

        <!-- Price -->
        <div class="flex flex-wrap items-center justify-between gap-4 mb-4">
          <div>
            <span class="text-xl sm:text-2xl 3xl:text-3xl font-bold text-gray-900 dark:text-white">{{ product_price }}</span>
            {% if tax_enabled and tax_rate > 0 %}
              <span class="block text-xs text-gray-500 dark:text-gray-400 mt-1">{{ 'incl.'|t }} {{ tax_rate }}% {{ tax_label }}</span>
            {% endif %}
          </div>
          <div class="flex gap-2">
            {% if enable_compare %}
              <button class="product-compare-btn w-10 h-10 rounded-lg border border-gray-200 dark:border-slate-600 flex items-center justify-center hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors" title="{{ 'Compare'|t }}">
                <svg class="w-5 h-5 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
                </svg>
              </button>
            {% endif %}
            {% if enable_wishlist %}
              <button class="product-wishlist-btn w-10 h-10 rounded-lg border border-gray-200 dark:border-slate-600 flex items-center justify-center hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors" title="{{ 'Add to Wishlist'|t }}">
                <svg class="w-5 h-5 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
                </svg>
              </button>
            {% endif %}
          </div>
        </div>

        <!-- Free Shipping Message -->
        {% if free_shipping_message %}
          <div class="mb-4 px-3 py-2 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg">
            <p class="text-sm text-green-700 dark:text-green-400 flex items-center gap-2">
              <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"/>
              </svg>
              {{ free_shipping_message }}
            </p>
          </div>
        {% endif %}

        <!-- Size Selector -->
        {% if sizes|length > 0 %}
          <div class="mb-4">
            <div class="relative">
              <select class="product-size-select w-full px-4 py-3 bg-white dark:bg-slate-900 border border-gray-300 dark:border-slate-600 rounded-lg appearance-none focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 dark:text-white pr-10">
                <option value="">{{ 'Size'|t }}</option>
                {% for size in sizes %}
                  <option value="{{ size|lower }}">{{ size }}</option>
                {% endfor %}
              </select>
              <svg class="absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
              </svg>
            </div>
          </div>
        {% endif %}

        <!-- Color Selector (dropdown version) -->
        {% if colors|length > 0 %}
          <div class="mb-4">
            <div class="relative">
              <select class="product-color-select w-full px-4 py-3 bg-white dark:bg-slate-900 border border-gray-300 dark:border-slate-600 rounded-lg appearance-none focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 dark:text-white pr-10">
                <option value="">{{ 'Color'|t }}</option>
                {% for color in colors %}
                  <option value="{{ color.label|lower }}">{{ color.label }}</option>
                {% endfor %}
              </select>
              <svg class="absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
              </svg>
            </div>
          </div>
        {% endif %}

        <!-- Materials Selector -->
        {% if materials|length > 0 %}
          <div class="mb-4">
            <div class="relative">
              <select class="product-material-select w-full px-4 py-3 bg-white dark:bg-slate-900 border border-gray-300 dark:border-slate-600 rounded-lg appearance-none focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 dark:text-white pr-10">
                <option value="">{{ 'Material'|t }}</option>
                {% for material in materials %}
                  <option value="{{ material|lower }}">{{ material }}</option>
                {% endfor %}
              </select>
              <svg class="absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
              </svg>
            </div>
          </div>
        {% endif %}

        <!-- Brands Selector -->
        {% if brands|length > 0 %}
          <div class="mb-4">
            <div class="relative">
              <select class="product-brand-select w-full px-4 py-3 bg-white dark:bg-slate-900 border border-gray-300 dark:border-slate-600 rounded-lg appearance-none focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 dark:text-white pr-10">
                <option value="">{{ 'Brand'|t }}</option>
                {% for brand in brands %}
                  <option value="{{ brand|lower }}">{{ brand }}</option>
                {% endfor %}
              </select>
              <svg class="absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
              </svg>
            </div>
          </div>
        {% endif %}

        <!-- Shipping Information Accordion -->
        {% if shipping_info %}
          <div class="mb-6">
            <button class="shipping-toggle w-full flex items-center justify-between py-3 border-b border-gray-200 dark:border-slate-600 text-left" data-product-id="{{ product_id }}">
              <span class="font-medium text-gray-900 dark:text-white">{{ 'Shipping information'|t }}</span>
              <svg class="shipping-icon w-5 h-5 text-gray-400 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
              </svg>
            </button>
            <div class="shipping-content hidden py-4 text-gray-600 dark:text-gray-400 text-sm">
              <p>{{ shipping_info }}</p>
            </div>
          </div>
        {% endif %}

        <!-- View Product Button -->
        <div class="flex flex-col sm:flex-row sm:items-center gap-4">
          <a href="{{ product_url }}" class="view-product-btn w-full py-3 bg-gray-900 dark:bg-white text-white dark:text-gray-900 font-medium rounded-lg hover:bg-gray-800 dark:hover:bg-gray-100 transition-colors text-center flex items-center justify-center gap-2">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
            </svg>
            {{ 'View product'|t }}
          </a>
        </div>
      </div>
    </div>
  </div>

</section>

