{#
/**
 * @file
 * Template for Product node full view.
 *
 * Available variables:
 * - node: The node entity.
 * - product_images: Array of product images.
 * - product_colors: Array of colors.
 * - product_sizes: Array of sizes.
 * - product_price: Product price.
 * - product_sale_price: Sale price.
 * - currency_symbol: Currency symbol.
 * - shipping_info: Shipping information.
 */
#}
{% set created = node.getCreatedTime() %}

{# Buy Drawer Overlay #}
<div id="buy-drawer-overlay-{{ node.id }}" class="buy-drawer-overlay fixed inset-0 bg-black/40 backdrop-blur-sm z-[60] hidden"></div>

{# Buy Drawer/Popup - Drawer on mobile, centered popup on desktop #}
<div id="buy-drawer-{{ node.id }}" class="buy-drawer fixed inset-0 z-[70] hidden" role="dialog" aria-modal="true" data-product-id="{{ node.id }}">
  <div class="buy-drawer-content bg-white dark:bg-slate-900 rounded-t-[20px] lg:rounded-[20px] shadow-2xl max-h-[90vh] flex flex-col absolute inset-x-0 bottom-0 lg:relative lg:inset-auto overflow-hidden">
    {# Drag Handle - Only visible on mobile #}
    <div class="buy-drawer-handle flex justify-center pt-4 pb-2 cursor-grab active:cursor-grabbing lg:hidden">
      <div class="w-12 h-1.5 bg-gray-300 dark:bg-slate-600 rounded-full"></div>
    </div>

    {# Drawer/Popup Header #}
    <div class="px-6 pb-4 lg:pt-6 border-b border-gray-100 dark:border-slate-700 flex items-center justify-between">
      <div>
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">{{ 'Complete Your Order'|t }}</h3>
        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ 'Fill in your details below'|t }}</p>
      </div>
      <button class="buy-drawer-close w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100 dark:hover:bg-slate-800 transition-colors" data-product-id="{{ node.id }}">
        <svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
        </svg>
      </button>
    </div>

    {# Product Summary #}
    <div class="px-6 py-4 bg-gray-50 dark:bg-slate-800/50 border-b border-gray-100 dark:border-slate-700">
      <div class="flex items-center gap-4">
        {% if product_images|length > 0 %}
          {% if product_images[0].uri %}
            <div class="w-16 h-16 rounded-xl overflow-hidden">
              {{ responsive_image(product_images[0].uri, 'thumbnail', node.label, 'w-full h-full object-cover') }}
            </div>
          {% else %}
            <img src="{{ product_images[0].url }}" alt="{{ node.label }}" class="w-16 h-16 object-cover rounded-xl">
          {% endif %}
        {% else %}
          <div class="w-16 h-16 bg-gray-200 dark:bg-slate-700 rounded-xl flex items-center justify-center">
            <svg class="w-8 h-8 text-gray-400" 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>
          </div>
        {% endif %}
        <div class="flex-1 min-w-0">
          <h4 class="font-medium text-gray-900 dark:text-white truncate">{{ node.label }}</h4>
          <p class="text-lg font-bold text-gray-900 dark:text-white">
            {% if product_sale_price %}
              <span class="text-red-500">{{ currency_symbol }}{{ product_sale_price|number_format(2) }}</span>
              <span class="text-sm text-gray-400 line-through ml-2">{{ currency_symbol }}{{ product_price|number_format(2) }}</span>
            {% else %}
              {{ currency_symbol }}{{ product_price|number_format(2) }}
            {% endif %}
          </p>
        </div>
      </div>
    </div>

    {# Form - Scrollable area #}
    <div class="flex-1 overflow-y-auto">
      <form class="buy-form p-6 space-y-4" data-product-id="{{ node.id }}">
        <div>
          <label for="buy-name-{{ node.id }}" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ 'Your Name'|t }} <span class="text-red-500">*</span></label>
          <input type="text" id="buy-name-{{ node.id }}" name="name" required class="w-full px-4 py-3 bg-white dark:bg-slate-800 border border-gray-300 dark:border-slate-600 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 dark:text-white dark:placeholder-gray-400" placeholder="{{ 'Enter your full name'|t }}">
        </div>

        <div>
          <label for="buy-phone-{{ node.id }}" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ 'Phone Number'|t }} <span class="text-red-500">*</span></label>
          <input type="tel" id="buy-phone-{{ node.id }}" name="phone" required class="w-full px-4 py-3 bg-white dark:bg-slate-800 border border-gray-300 dark:border-slate-600 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 dark:text-white dark:placeholder-gray-400" placeholder="{{ '+380 XX XXX XX XX'|t }}">
        </div>

        <div>
          <label for="buy-address-{{ node.id }}" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ 'Delivery Address'|t }} <span class="text-red-500">*</span></label>
          <textarea id="buy-address-{{ node.id }}" name="address" required rows="3" class="w-full px-4 py-3 bg-white dark:bg-slate-800 border border-gray-300 dark:border-slate-600 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 dark:text-white dark:placeholder-gray-400 resize-none" placeholder="{{ 'City, street, building, apartment'|t }}"></textarea>
        </div>

        {# Submit Button #}
        <button type="submit" class="w-full py-3.5 bg-blue-500 text-white font-medium rounded-xl hover:bg-blue-600 transition-colors">
          {{ 'Confirm Order'|t }}
        </button>
      </form>
    </div>

    {# Footer - Always visible #}
    <div class="px-6 py-4 border-t border-gray-100 dark:border-slate-700 bg-white dark:bg-slate-900">
      <p class="text-xs text-center text-gray-500 dark:text-gray-400">
        {{ 'By placing an order, you agree to our terms of service'|t }}
      </p>
    </div>

    {# Safe area padding for iOS #}
    <div class="h-6 bg-white dark:bg-slate-900 lg:hidden"></div>
  </div>
</div>

<article class="py-16 lg:py-24 bg-white dark:bg-slate-900 transition-colors">
  <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">
    {# Back Link and Edit Button #}
    <div class="mb-8 flex items-center justify-between">
      <a href="{{ lang_path('/products') }}" class="inline-flex items-center text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">
        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
        </svg>
        {{ 'Back to Products'|t }}
      </a>
      {% if can_edit %}
        <a href="{{ path('entity.node.edit_form', {'node': node.id}) }}" class="inline-flex items-center px-4 py-2 bg-gray-100 dark:bg-slate-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-slate-700 rounded-lg transition-colors text-sm font-medium">
          <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
          </svg>
          {{ 'Edit'|t }}
        </a>
      {% endif %}
    </div>

    <div class="grid lg:grid-cols-2 gap-8 lg:gap-12">
      {# Left - Product Gallery #}
      <div>
        {# Main Image #}
        <div class="rounded-2xl overflow-hidden mb-4 aspect-square flex items-center justify-center bg-gray-50 dark:bg-slate-800">
          {% if product_images|length > 0 %}
            {% if product_images[0].uri %}
              {{ responsive_image(product_images[0].uri, 'product_main', product_images[0].alt, 'w-full h-full object-contain') }}
            {% else %}
              <img id="product-main-image" src="{{ product_images[0].url }}" alt="{{ product_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 product_images|length > 1 %}
          <div class="flex gap-3 overflow-x-auto pb-2">
            {% for image in product_images %}
              <button class="product-thumbnail flex-shrink-0 w-20 h-20 rounded-xl overflow-hidden {{ loop.first ? 'ring-2 ring-blue-500' : 'opacity-60 hover:opacity-100' }} transition-all" data-image="{{ image.url }}">
                {% 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>
        {% endif %}
      </div>

      {# Right - Product Details #}
      <div>
        {# Category Badge #}
        {% if product_category %}
          <span class="inline-block px-3 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 text-sm font-medium rounded-full mb-4">
            {{ product_category.name }}
          </span>
        {% endif %}

        {# Product Title #}
        <h1 class="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-4">{{ node.label }}</h1>

        {# SKU #}
        {% if product_sku %}
          <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">{{ 'SKU'|t }}: {{ product_sku }}</p>
        {% endif %}

        {# Price #}
        <div class="flex items-center gap-3 mb-6">
          {% if product_sale_price %}
            <span class="text-gray-400 line-through text-xl">{{ currency_symbol }}{{ product_price|number_format(2) }}</span>
            <span class="text-red-500 text-3xl font-bold">{{ currency_symbol }}{{ product_sale_price|number_format(2) }}</span>
            <span class="px-2 py-1 bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400 text-sm font-medium rounded">{{ 'Sale'|t }}</span>
          {% else %}
            <span class="text-gray-900 dark:text-white text-3xl font-bold">{{ currency_symbol }}{{ product_price|number_format(2) }}</span>
          {% endif %}
        </div>

        {# Stock Status #}
        {% if product_in_stock %}
          <p class="text-green-600 dark:text-green-400 text-sm mb-6 flex items-center gap-2">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
            </svg>
            {{ 'In Stock'|t }}
          </p>
        {% else %}
          <p class="text-red-600 dark:text-red-400 text-sm mb-6 flex items-center gap-2">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
            </svg>
            {{ 'Out of Stock'|t }}
          </p>
        {% endif %}

        {# Color Swatches #}
        {% if product_colors|length > 0 %}
          <div class="mb-6">
            <label class="block text-sm font-medium text-gray-900 dark:text-white mb-2">{{ 'Color'|t }}</label>
            <div class="flex items-center gap-2">
              {% for color in product_colors %}
                <button class="product-color-swatch w-8 h-8 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>
          </div>
        {% endif %}

        {# Size Selector #}
        {% if product_sizes|length > 0 %}
          <div class="mb-6">
            <label class="block text-sm font-medium text-gray-900 dark:text-white mb-2">{{ 'Size'|t }}</label>
            <div class="relative inline-block">
              <select class="px-4 py-3 pr-10 bg-white dark:bg-slate-800 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">
                {% for size in product_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 %}

        {# Materials Selector #}
        {% if product_materials|length > 0 %}
          <div class="mb-6">
            <label class="block text-sm font-medium text-gray-900 dark:text-white mb-2">{{ 'Material'|t }}</label>
            <div class="relative inline-block w-full">
              <select class="w-full px-4 py-3 pr-10 bg-white dark:bg-slate-800 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">
                <option value="">{{ 'Select material'|t }}</option>
                {% for material in product_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 product_brands|length > 0 %}
          <div class="mb-6">
            <label class="block text-sm font-medium text-gray-900 dark:text-white mb-2">{{ 'Brand'|t }}</label>
            <div class="relative inline-block w-full">
              <select class="w-full px-4 py-3 pr-10 bg-white dark:bg-slate-800 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">
                <option value="">{{ 'Select brand'|t }}</option>
                {% for brand in product_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 %}

        {# Quantity and Buy #}
        <div class="flex flex-col sm:flex-row sm:items-center gap-4 mb-8">
          <div class="flex items-center">
            <span class="text-sm text-gray-600 dark:text-gray-400 mr-3">{{ 'Quantity'|t }}</span>
            <div class="flex items-center border border-gray-300 dark:border-slate-600 rounded-lg">
              <button class="qty-minus w-10 h-10 flex items-center justify-center text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors rounded-l-lg" data-product-id="{{ node.id }}">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"/>
                </svg>
              </button>
              <input type="number" class="qty-input w-12 h-10 text-center border-x border-gray-300 dark:border-slate-600 bg-transparent dark:text-white focus:outline-none" value="1" min="1" data-product-id="{{ node.id }}">
              <button class="qty-plus w-10 h-10 flex items-center justify-center text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors rounded-r-lg" data-product-id="{{ node.id }}">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                </svg>
              </button>
            </div>
          </div>
          <button class="buy-btn flex-1 py-3 px-6 bg-blue-500 text-white font-medium rounded-lg hover:bg-blue-600 transition-colors flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed" data-product-id="{{ node.id }}" {{ not product_in_stock ? 'disabled' : '' }}>
            <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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/>
            </svg>
            {{ product_in_stock ? 'Buy'|t : 'Out of Stock'|t }}
          </button>
          <button class="product-wishlist-btn w-12 h-12 rounded-lg border border-gray-300 dark:border-slate-600 flex items-center justify-center hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors">
            <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>
        </div>

        {# Shipping Information #}
        {% if shipping_info %}
          <div class="border-t border-gray-200 dark:border-slate-700 pt-6 mb-6">
            <button class="shipping-toggle w-full flex items-center justify-between py-2 text-left">
              <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 pt-4 text-gray-600 dark:text-gray-400 text-sm">
              <p>{{ shipping_info }}</p>
            </div>
          </div>
        {% endif %}

        {# Description #}
        {% if node.field_product_body.value %}
          <div class="border-t border-gray-200 dark:border-slate-700 pt-6">
            <h2 class="font-medium text-gray-900 dark:text-white mb-4">{{ 'Description'|t }}</h2>
            <div class="prose prose-sm dark:prose-invert text-gray-600 dark:text-gray-300">
              {{ node.field_product_body.value|raw }}
            </div>
          </div>
        {% endif %}
      </div>
    </div>
  </div>
</article>
