{#
/**
 * @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.
 *
 * @ingroup themeable
 */
#}
{%
  set classes = [
	'product-post',
  ]
%}

{{ attach_library('starman/product_gallery') }}

<div{{ attributes.addClass(classes) }}>
	<div class="row">
		<div class="col-md-6 product-image-wrap">
<<<<<<< HEAD
			<div class="product-image">
<!-- Slider principal -->
<div class="swiper main-swiper">
  <div class="swiper-wrapper" id="main-gallery-wrapper">
    {{ product.variation_field_image }}
  </div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

<!-- Miniaturas -->
<div class="swiper thumb-swiper mt-3">
  <div class="swiper-wrapper" id="thumb-gallery-wrapper">
    {{ product.variation_field_image }}
  </div>
</div>



			</div>
=======
			{# Generar ID único para el carrusel del producto #}
{% set carousel_id = 'product-carousel-' ~ product_entity.id() %}

<div class="product-image">
  <div id="{{ carousel_id }}" class="carousel slide" data-bs-ride="carousel">

    {# Extraer las imágenes del campo multi valor #}
    {% set images = product.variation_field_image['#items'] %}

    {# Indicadores dinámicos #}
    {% if images|length > 1 %}
      <div class="carousel-indicators">
        {% for key, item in images %}
          <button
            type="button"
            data-bs-target="#{{ carousel_id }}"
            data-bs-slide-to="{{ key }}"
            {% if key == 0 %}class="active" aria-current="true"{% endif %}
            aria-label="Slide {{ key + 1 }}">
          </button>
        {% endfor %}
      </div>
    {% endif %}

    {# Slides del carrusel #}
    <div class="carousel-inner">
      {% for key, item in images %}
        <div class="carousel-item{% if key == 0 %} active{% endif %}">
          <img src="{{ file_url(item.entity.field_media_image.entity.uri.value) }}"
               class="d-block w-100"
               alt="{{ item.entity.field_media_image.alt }}"
               loading="lazy">
        </div>
      {% endfor %}
    </div>

    {# Controles (solo si hay más de una imagen) #}
    {% if images|length > 1 %}
      <button class="carousel-control-prev" type="button" data-bs-target="#{{ carousel_id }}" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#{{ carousel_id }}" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    {% endif %}

  </div>
</div>

>>>>>>> 79a76d89d11dd9f798bbf4b04168a1e5c55c95f8
		</div>
		<div class="ps-4 col-md-6 product-content-wrap">
			<div class="product-brand">{{ product.field_product_brand.0 }}</div>
			<div class="mb-3 product-title">{{ product.title }}</div>

			<div class="mb-3 d-flex align-items-center">
				<div class="me-3 product-stock">
					<div class="available-stock">{{'In stock'|t}}</div>
					<div class="out-of-stock">{{'Out of stock'|t}}</div>
				</div>
				<div class="product-ratings">{{ product.field_ratings }}</div>
			</div>

			<div class="mb-3 product-short-description">{{ product.field_short_description }}</div>

			<div class="mb-3 product-price-wrap">
				{% if product.variation_list_price|render|striptags|trim %} <del class="me-1 product-old-price">{{ product.variation_list_price }}</del>{% endif %}<div class="product-price">{{ product.variation_price }}</div>
			</div>

			<div class="product-variation-wrap">
				<div class="product-add-cart">{{ product.variations }}</div>
			</div>

			<div class="mt-3 product-icon-wrap">
				<div class="product-icon product-add-wishlist">{{ product.flag_wishlist }}</div>
				<div class="product-icon product-add-compare">{{ product.flag_compare }}</div>
			</div>

			<div class="product-meta">
				<div class="product-meta-item product-sku">{{ product.variation_sku }}</div>
				<div class="product-meta-item product-brand">{{ product.field_product_brand }}</div>
				<div class="product-meta-item product-category">{{ product.field_product_category }}</div>
			</div>

			{{- product|without('variation_attributes','variation_price','variation_list_price','variation_title','variations','field_short_description','variation_field_image','variation_sku','variation_field_stock_level','field_product_review','body','field_product_brand','field_product_category','flag_wishlist','flag_compare','field_badge','field_special_category','field_ratings') -}}
		</div>
	</div>

	<div class="mt-5 tab-plain product-info">
		<ul class="mb-3 nav nav-tabs" id="productTab" role="tablist">
		  <li class="nav-item" role="presentation">
			<button class="nav-link active" id="product-detail" data-bs-toggle="tab" data-bs-target="#product-detail-pane" type="button" role="tab" aria-controls="product-detail-pane" aria-selected="true">{{ 'Description'|t }}</button>
		  </li>
		  <li class="nav-item" role="presentation">
			<button class="nav-link" id="product-review" data-bs-toggle="tab" data-bs-target="#product-review-pane" type="button" role="tab" aria-controls="product-review-pane" aria-selected="false">{{ 'Review'|t }}</button>
		  </li>
		</ul>

		<div class="tab-content" id="productTabContent">
		  <div class="tab-pane fade show active" id="product-detail-pane" role="tabpanel" aria-labelledby="product-detail" tabindex="0">
			<div class="product-tab-item">
			  <div>{{ product.body }}</div>
			</div>
		  </div>
		  <div class="tab-pane fade" id="product-review-pane" role="tabpanel" aria-labelledby="product-review" tabindex="0">
			{{ product.field_product_review }}
		  </div>
		</div>

	</div>

</div>
