{#
/**
 * @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
 */
#}




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

<article class="product-detail container mt-5">
  <div class="row">
    <div class="col-md-6">
      <div class="main-gallery position-relative">
        <!-- Slider Principal -->
        <div class="swiper main-swiper">
          <div class="swiper-wrapper">
            {% for item in product.field_gallery['#items'] %}
              <div class="swiper-slide">
              <img src="{{ item.entity.field_media_image.entity.uri.value | file_url }}" alt="{{ item.alt }}" class="img-fluid" />
              </div>
            {% endfor %}
          </div>

          <!-- Flechas -->
          <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">
            {% for item in product.field_gallery['#items'] %}
              <div class="swiper-slide">
                <img src="{{ item.entity.field_media_image.entity.uri.value | file_url }}" alt="{{ item.alt }}" class="img-fluid" />
              </div>
            {% endfor %}
          </div>
        </div>
      </div>
    </div>

    <div class="col-md-6">
      <h1>{{ product.title }}</h1>

      <div class="brand mb-2">
         <strong>Marca</strong> {{ product.field_brand }}
      </div>

      <div class="product-price mb-2">
        <div>{{ product.price }}</div>
        <span class="text-primary fw-bold">{{ product.variation_price }}</span>
      </div>

      <div class="product-sizes mb-2">
        {{ product.field_size }}
      </div>

      <div class="product-description mt-3">
        {{ product.field_description }}
      </div>

      <div class="button mt-4">
        {{ product.variations }}
      </div>
    </div>
  </div>



  {# <pre>
    {{ dump(product) }}
  </pre> #}

</article>

