{{ 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 content.field_gallery['#items'] %}
              <div class="swiper-slide">
                <img src="{{ file_url(item.entity.uri.value) }}" 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 content.field_gallery['#items'] %}
              <div class="swiper-slide">
                <img src="{{ file_url(item.entity.uri.value) }}" alt="{{ item.alt }}" class="img-fluid">
              </div>
            {% endfor %}
          </div>
        </div>
      </div>
    </div>

    <div class="col-md-6">
      <h1>{{ label }}</h1>
      <div class="brand mb-2">{{ content.field_brand }}</div>
      <div class="product-price mb-2">
        <div>{{ content.field_price }}</div>
        <span class="text-primary fw-bold">{{ content.field_price_discount }}</span>
      </div>
      <div class="product-sizes mb-2">{{ content.field_size }}</div>
      <div class="product-description mt-3">
        {{ content.field_description }}
      </div>
    </div>
  </div>
</article>

