{include file=comm/head.html}
{include file=comm/top.html}
<div class="container pages">
  {include file=comm/position.html}
  <div class="row">
       <div class="col-12 col-lg-6 mb-5">
         <div class="view">
           <a class="arrow-left" href="#"></a>
        <a class="arrow-right" href="#"></a>
           <div class="swiper-container">
             <div class="swiper-wrapper" >
                <div class="swiper-slide">
                 <img src="{content:ico}">
               </div>
               {pboot:pics num=5 id={content:id}}
               <div class="swiper-slide">
                 <img src="[pics:src]">
               </div>
               {/pboot:pics}
             </div>
           </div>
         </div>

         <div class="preview mt-3">
           <a class="arrow-left" href="#"></a>
           <a class="arrow-right" href="#"></a>
           <div class="swiper-container" >
             <div class="swiper-wrapper">
               <div class="swiper-slide active-nav swiper-slide-active">
                 <img src="{content:ico}">
               </div>
               {pboot:pics num=10 id={content:id}}
               <div class="swiper-slide">
                 <img src="[pics:src]" alt="[pics:title]">
               </div>
               {/pboot:pics}
             </div>
           </div>
         </div>
       </div>
       
      <div class="col-12 col-lg-6 mb-5 pr-3">   <!-- class="col-12 col-lg-6 mb-3 pr-3" -->
        <h2 class="h2-so fs-20 pb-2">{content:title}</h2>  <!-- border-bottom  fs-sm-28   -->
        <table class="table-style2">
          <tbody>
          <tr>
            <td>{plang:part_num}:</td>
            <td>{content:ext_part_number}</td>
          </tr>
          <tr>
            <td>{plang:part_name}:</td>
            <td>{content:ext_part_name}</td>
          </tr>
          <tr>
            <td>{plang:part_brand}:</td>
            <td>{content:ext_part_brand}</td>
          </tr>
          <tr>
            <td>{plang:part_equip_model}:</td>
            <td>{content:ext_part_equip_model}</td>
          </tr>
          <!--
          <tr>
            <td>Part type:</td>
            <td>{content:ext_part_type1}</td>
          </tr>-->
          <tr>
            <td>{plang:part_price}:</td>
            <td>{content:ext_part_price}</td>
          </tr>
          </tbody>
        </table>
        {include file=comm/product_contact.html}
      </div>
    </div>
    
    <h5 class="border-bottom border-info pb-2 mb-2"><i class="fa fa-sliders" aria-hidden="true"></i>{plang:product_detail}</h5>
    <div class="content">{content:content}</div>
    <h5 class="border-bottom border-info pb-2 mb-2"></h5>
    
    <div class="text-secondary lh-2">
      <p class="text-left position d-none d-md-block">{plang:page_pre}:{content:precontent}</p>
      <p class="text-left position d-none d-md-block">{plang:page_next}:{content:nextcontent}</p>
    </div>
</div>

{include file=comm/comment.html}

<!--<script type="text/javascript" src="{ver({pboot:sitepath}/static/js/qs2.js)}"></script>-->

<script src="{pboot:sitepath}/static/public/swiper-4.3.5/js/swiper.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
  var viewSwiper;
  var previewSwiper;

  function updateNavPosition() {
    if (!viewSwiper || !previewSwiper) {
      return;
    }
    var realIndex = typeof viewSwiper.realIndex === "number" ? viewSwiper.realIndex : viewSwiper.activeIndex || 0;
    var previewSlides = previewSwiper.slides || [];

    Array.prototype.forEach.call(previewSlides, function (slide, index) {
      if (index === realIndex) {
        slide.classList.add("active-nav");
      } else {
        slide.classList.remove("active-nav");
      }
    });

    var activeSlide = previewSlides[realIndex];
    if (!activeSlide) {
      return;
    }

    var perView = Math.floor(previewSwiper.width / activeSlide.offsetWidth) || 1;
    var maxIndex = previewSwiper.activeIndex + perView - 1;

    if (realIndex > maxIndex) {
      previewSwiper.slideTo(realIndex - perView + 1);
    } else if (realIndex < previewSwiper.activeIndex) {
      previewSwiper.slideTo(realIndex);
    }
  }

  previewSwiper = new Swiper(".preview .swiper-container", {
    slidesPerView: "auto",
    spaceBetween: 10,
    allowTouchMove: false,
    watchSlidesVisibility: true
  });

  viewSwiper = new Swiper(".view .swiper-container", {
    loop: true,
    autoplay: {
      delay: 3000,
      disableOnInteraction: false
    },
    on: {
      init: updateNavPosition,
      slideChangeTransitionStart: updateNavPosition
    }
  });

  var prevTriggers = document.querySelectorAll(".view .arrow-left, .preview .arrow-left");
  Array.prototype.forEach.call(prevTriggers, function (trigger) {
    trigger.addEventListener("click", function (event) {
      event.preventDefault();
      viewSwiper.slidePrev();
    });
  });

  var nextTriggers = document.querySelectorAll(".view .arrow-right, .preview .arrow-right");
  Array.prototype.forEach.call(nextTriggers, function (trigger) {
    trigger.addEventListener("click", function (event) {
      event.preventDefault();
      viewSwiper.slideNext();
    });
  });

  previewSwiper.on("tap", function () {
    if (typeof previewSwiper.clickedIndex !== "undefined" && previewSwiper.clickedIndex !== null) {
      if (typeof viewSwiper.slideToLoop === "function") {
        viewSwiper.slideToLoop(previewSwiper.clickedIndex);
      } else {
        viewSwiper.slideTo(previewSwiper.clickedIndex);
      }
    }
  });

  updateNavPosition();
});
</script>

{include file=comm/foot.html}