{#
/**
 * @file
 *
 * Default product template.
 *
 * Available variables:
 * - attributes: HTML attributes for the wrapper.
 * - product: The rendered product fields.
 *   Use 'product' to print them all, or print a subset such as
 *   'product.title'. Use the following code to exclude the
 *   printing of a given field:
 *   @code
 *   {{ product|without('title') }}
 *   @endcode
 * - product_entity: The product entity.
 * - product_url: The product URL.
 * - title_prefix: Additional output populated by modules, intended to be
 *   displayed in front of the main title tag that appears in the template.
 * - title_suffix: Additional output populated by modules, intended to be
 *   displayed after the main title tag that appears in the template.
 *
 * @ingroup themeable
 */
#}
<article>
  <div class="grid gap-8 lg:grid-cols-12 bg-base-100 rounded-box border border-base-200 overflow-hidden shadow-sm p-4 lg:p-8">
    
    <!-- Left: Gallery -->
    <div class="lg:col-span-5 flex flex-col gap-4 min-w-0">
      <div class="relative">
        {{ product.field_product_images }}
        
        <div class="absolute top-4 left-4 flex flex-col gap-2 z-10 pointer-events-none">
           {% if product_entity.field_is_popular.value %}
             <span class="badge badge-primary font-black uppercase text-[10px]">{{ 'Popular'|t }}</span>
           {% endif %}
           {% if product.variation_list_price %}
             <span class="badge badge-warning font-black uppercase text-[10px]">{{ 'Sale'|t }}</span>
           {% endif %}
        </div>
      </div>
    </div>

    <!-- Right: Details -->
    <div class="lg:col-span-7 flex flex-col gap-6 min-w-0">
      <div class="mb-4">
        <h1 class="text-3xl lg:text-4xl font-black uppercase tracking-tighter leading-none mb-3">
          {{ product_entity.label }}
        </h1>
        <div class="flex items-center gap-2 px-0.5">
           <div class="w-2 h-2 rounded-full bg-success animate-pulse"></div>
           <span class="text-[10px] font-black text-success bg-success/20 px-1.5 py-0.5 rounded-md">{{ 'In Stock'|t }}</span>
        </div>
      </div>

      <div class="flex items-baseline gap-3">
        <span class="text-4xl font-black text-primary tracking-tighter">
          {{ product.variation_price }}
        </span>
        {% if product.variation_list_price %}
          <span class="text-lg text-base-content/80 line-through font-bold">
            {{ product.variation_list_price }}
          </span>
        {% endif %}
      </div>

      <div class="divider my-0 opacity-10"></div>

      <!-- Selection & Add to Cart -->
      <div class="product-variations">
        {{ product.variations }}
      </div>

      <!-- Product Info Region -->
      <div class="product-info-region">
        {{ product_info_region }}
      </div>

      <!-- Product Meta -->
      <div class="space-y-2 pt-4 border-t border-base-200">
         {% if product_entity.field_product_brand.entity %}
           <div class="flex gap-2 text-[10px] font-black uppercase tracking-widest">
              <span class="opacity-90">{{ 'Brand'|t }}:</span>
              <span class="text-base-content font-black">{{ product_entity.field_product_brand.entity.label }}</span>
           </div>
         {% endif %}

         {% if product_entity.field_product_category.entity %}
           <div class="flex gap-2 text-[10px] font-black uppercase tracking-widest">
              <span class="opacity-90">{{ 'Categories'|t }}:</span>
              <div class="flex flex-wrap gap-1">
                 {% for term in product_entity.field_product_category %}
                   {{ term.entity.label }}{% if not loop.last %}, {% endif %}
                 {% endfor %}
              </div>
           </div>
         {% endif %}

         {% if product_entity.field_product_tags.entity %}
           <div class="flex gap-2 text-[10px] font-black uppercase tracking-widest items-center">
              <span class="opacity-90">{{ 'Tags'|t }}:</span>
              <div class="flex flex-wrap gap-1">
                 {% for term in product_entity.field_product_tags %}
                   <span class="badge badge-sm badge-outline opacity-80 rounded-md text-[9px] h-4">{{ term.entity.label }}</span>
                 {% endfor %}
              </div>
           </div>
         {% endif %}
      </div>
    </div>
  </div>

  <!-- Product Tabs -->
  <div class="mt-8">
    <div class="tabs tabs-box bg-base-100 border border-base-200 p-1 rounded-xl overflow-hidden" role="tablist">
       <input type="radio" name="prod_tabs" class="tab" aria-label="{{ 'Description'|t }}" role="tab" checked />
       <div class="tab-content bg-base-100 p-6 lg:p-8">
          <div class="prose prose-sm max-w-none text-base-content/80 font-medium leading-relaxed text-justify space-y-6 indent-8">
             {{ product.body }}
          </div>
       </div>

       <input type="radio" name="prod_tabs" class="tab" aria-label="{{ 'Specifications'|t }}" role="tab" />
       <div class="tab-content bg-base-100 p-6 lg:p-8">
          <div class="overflow-x-auto">
             <table class="table table-zebra w-full text-xs">
                <tbody class="font-medium border-t border-base-200">
                   {% for spec in product_specs %}
                       <tr class="hover">
                          <td class="pl-0 font-black uppercase tracking-tighter opacity-80">
                            {{ spec.label }}
                          </td>
                          <td class="pr-0 font-bold text-base-content">{{ spec.value }}</td>
                       </tr>
                   {% endfor %}
                </tbody>
             </table>
          </div>
       </div>
    </div>
  </div>
</article>
