{% extends 'partials/base.html' %}
{% load staticfiles %}
{% load thumbnail %}
{% block content %}
  {% include 'partials/header.html' %}
  <div class="container mainScore">
    <div class="row">
      <div class="col-lg-12 allProjects">
        <p class="titleScore">{{ object }}</p>

        {% if object.get_prev %}
          <div class="all all1">
            <p><a href="{% url 'projects:contractor-portfolio-detail' object.get_prev.pk %}"> предыдущий</a></p>
          </div>
        {% endif %}

        {% if object.get_next %}
          <div class="all all2">
            <p><a href="{% url 'projects:contractor-portfolio-detail' object.get_next.pk %}">следующий</a></p>
          </div>
        {% endif %}
      </div>

      <div class="desReadyBlock">
        {% if object.description %}
          <div class="col-lg-10 col-lg-offset-1">
            <p class="titleReady">Описание:</p>
          </div>
          <div class="col-lg-10 col-lg-offset-1">
            <p class="textReady">
              {{ object.description }}
            </p>
          </div>
        {% endif %}
        <div class="col-lg-12 sliderReady">
          {% if object.photos.all|length > 1 %}
            <div class="arroww prev3"></div>
            <div class="arroww next3"></div>
          {% endif %}
          <div class="swiper-container gallery-top">
            <div class="swiper-wrapper">
              {% for photo in object.photos.all %}
                <div class="swiper-slide" style="background-image:url('{% static photo.img.url %}')"></div>
              {% endfor %}
            </div>
          </div>
          {% if object.photos.all|length > 1 %}
            <div class="swiper-container gallery-thumbs">
              <div class="swiper-wrapper">
                {% for photo in object.photos.all %}
                  <div class="swiper-slide" style="background-image:url('{% static photo.img.url %}')"></div>
                {% endfor %}
              </div>
            </div>
          {% endif %}
        </div>
      </div>
      {% include 'partials/footer.html' %}
    </div>
  </div>

{% endblock %}
{% block js_block %}
  <script src="{% static 'js/swiper.min.js' %}"></script>
  <script>
    var galleryTop = new Swiper('.gallery-top', {
      nextButton: '.next3',
      prevButton: '.prev3',
      spaceBetween: 10,
    });
    var galleryTop = new Swiper('.gallery-top', {
      nextButton: '.next3',
      prevButton: '.prev3',
      spaceBetween: 15,
      onSlideChangeEnd: function (swiper) {
        var activeIndex = swiper.activeIndex;
        $(galleryThumbs.slides).removeClass('is-selected');
        $(galleryThumbs.slides).eq(activeIndex).addClass('is-selected');
        galleryThumbs.slideTo(activeIndex, 300, false);

      }

    });
    var galleryThumbs = new Swiper('.gallery-thumbs', {
      spaceBetween: 15,
      freeMode: true,
      centeredSlides: false,
      slidesPerView: 6,
      touchRatio: 0.2,
      nextButton: '.arr2',
      prevButton: '.arr1',
      onClick: function (swiper, event) {
        var clicked = swiper.clickedIndex
        swiper.activeIndex = clicked;
        swiper.updateClasses()
        $(swiper.slides).removeClass('is-selected');
        $(swiper.clickedSlide).addClass('is-selected');
        galleryTop.slideTo(clicked, 300, false);

      }
    });
  </script>
{% endblock %}