{% extends "base.html" %}
{% import "/components/header.html" as header %}
{% import "/components/footer.html" as footer %}
{% import "components/share.html" as share %}

{% block title %}{{paint.title}}{% endblock %}

{% block head %}
<meta hid="og:title" property="og:title" content="{{paint.title}}">
<meta hid="og:description" property="og:description" content="{{description}}">
<meta hid="og:type" property="og:type" content="product">
<meta hid="og:image" property="og:image" content="https://avtopost.kultmost.ru/b/posts/{{paint.medias[0]}}">
<meta hid="og:url" property="og:url" content="https://avtopost.kultmost.ru/paintings/{{paint._id}}">
<meta hid="description" name="description" content="{{description}}">
<meta hid="og:site_name" property="og:site_name" content="Картины | KULTMOST.АВТОПОСТ">
{{ header.style() }}

  <style>
    .swiper {
      position: relative;
      max-width: 900px;
      margin: 0 auto;
      overflow: hidden;
    }

    .swiper-wrapper {
      display: flex;
      max-height: 520px;
      transition: transform 0.75s cubic-bezier(0.32, 0.72, 0, 1);
      will-change: transform;
      align-items: center;
    }

    .swiper-slide {
      flex: 0 0 100%;
      height: 100%;
      position: relative;
      transition: background-color 0.8s ease;
      overflow: hidden;
      display: flex;
    }

    .swiper-slide img {
      max-height: 520px;
      width: 100%;
      object-fit: scale-down;
      
    }

    .caption {
      position: absolute;
      bottom: 40px;
      left: 40px;
      color: white;
      font-size: 2.1rem;
      font-weight: 700;
      text-shadow: 0 4px 15px rgba(0,0,0,0.8);
      z-index: 5;
    }

    .swiper-button {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255, 255, 255, 0);
      color: #683185;
      border: 1px solid #683185;
      width: 58px;
      height: 58px;
      font-size: 2.2rem;
      cursor: pointer;
      border-radius: 50%;
      z-index: 10;
      text-align: center;
    }

    .swiper-button:hover { background: rgba(0,0,0,0.9); }

    .swiper-button.prev { left: 25px; }
    .swiper-button.next { right: 25px; }

    .swiper-pagination {
      position: absolute;
      bottom: 25px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 12px;
      z-index: 10;
    }

    .swiper-pagination-dot {
      width: 8px;
      height: 8px;
      background: rgba(95,23,152,.4);
      border-radius: 50%;
      cursor: pointer;
    }

    .swiper-pagination-dot.active {
      background: #683185;
      transform: scale(1.35);
    }
  </style>
  <style type="text/css">/* Base (common) styles */
.b_mmlhf { border-radius: 1em;
  height: 70px;
  min-width: 70px;
  object-fit: cover;
  max-width: 170px;
  object-position: top; }
.b_n91ga { color: #3A3A3A; font-family: Inter; font-size: 14px; font-style: italic; font-weight: 400; line-height: normal; }
.b_01urj { -webkit-box-orient: vertical; -webkit-line-clamp: 1; color: #000; display: -webkit-box; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 700; line-height: normal; overflow: hidden; text-overflow: ellipsis; }
.b_mxr38 { -webkit-box-orient: vertical; -webkit-line-clamp: 1; color: #000; display: -webkit-box; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; overflow: hidden; text-overflow: ellipsis; }
.b_x7dj6 { align-items: flex-start; display: flex; flex-direction: column; flex: 1 0 0; justify-content: center; }
.b_etnpf { align-items: center; align-self: stretch; display: flex; gap: 13px; }
.b_o7w2c { -webkit-box-orient: vertical; color: #000; display: -webkit-box; flex: 1 0 0; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: normal; overflow: hidden; text-overflow: ellipsis; }
.b_4sh8z { align-items: center; align-self: stretch; display: flex; justify-content: center; }
.b_frv5u { -webkit-box-orient: vertical; -webkit-line-clamp: 3; align-self: stretch; color: rgba(58, 58, 58, 0.75); display: -webkit-box; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; overflow: hidden; text-overflow: ellipsis; }
.b_a1gdl { align-items: flex-start; align-self: stretch; display: flex; flex-direction: column; }
.b_mwej0 { align-self: stretch; color: rgba(58, 58, 58, 0.75); font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.b_6atmo { color: #000; font-family: Inter; font-size: 20px; font-style: normal; font-weight: 700; height: 29px; line-height: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.b_ik47g { align-items: flex-start; align-self: stretch; display: flex; flex-direction: column; padding: 5px 0; }
.b_7efyd { white-space: pre-line; align-self: stretch; color: rgba(58, 58, 58, 0.75); font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.b_v0d1u { color: #FFF; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.b_gk0ob { align-items: center; background: #5F1798; border-radius: 5px; display: flex; height: 51px; justify-content: center; padding: 19px 33px; }
.b_tssu9 { align-items: flex-start; max-width: 620px; background: #FFF; display: flex; flex-direction: column; flex: 1 0 0; gap: 10px; justify-content: center; min-width: 335px; padding: 10px 20px; }
.c_m3jeo{background: #fdfaff;margin: auto;
  border-radius: 10px;margin-bottom: 111px;}
/* Mobile */
@media (max-width: 699px) {
.c_gnsfq {  flex-shrink: 0; height: 400px; width: 355px; }
.c_m3jeo { align-content: flex-start; align-items: flex-start; background: #FFF; display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; width: 375px; }
}

/* Tablet */
@media (min-width: 700px) and (max-width: 900px) {
.c_gnsfq {  flex-shrink: 0; height: 400px; width: 668px; }
.c_m3jeo { align-content: flex-start; align-items: flex-start; background: #FFF; display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; width: 800px; }
}

/* Desktop */
@media (min-width: 901px) {
.c_gnsfq {  flex: 1 0 0; height: 400px; }
.c_la1ap { color: rgba(58, 58, 58, 0.75); font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
.c_w6ecf { -webkit-box-orient: vertical; -webkit-line-clamp: 1; align-self: stretch; color: #000; display: -webkit-box; font-family: Inter; font-size: 20px; font-style: normal; font-weight: 700; line-height: normal; overflow: hidden; text-overflow: ellipsis; }
.c_m3jeo { align-content: flex-start; align-items: flex-start; background: #FFF; display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; width: 1600px; }
}</style>
{{ footer.style() }}
{% endblock %}

{% block content %}
{{ header.section(user) }}
<section class="c_m3jeo">
      <div class="swiper" id="swiper">
    <div class="swiper-wrapper" id="wrapper"></div>
    {% if paint.medias|length > 1%}
    <button class="swiper-button prev" id="prev">‹</button>
    <button class="swiper-button next" id="next">›</button>
    {% endif %}
    <div class="swiper-pagination" id="pagination" {% if paint.medias_original|length == 1%}style="display: none;"{% endif %}></div>
  </div>
    <div class="c_kuvu7 b_tssu9">
        <a class="c_068ki b_etnpf" href="/artists/{{paint.user._id}}"><img class="c_1qh64 b_mmlhf" src="/a/{{paint.user._id}}" crossorigin="anonymous" fetchpriority="high" loading="eager">
            <div class="c_pjz1r b_x7dj6">
                <p class="c_x2iws b_n91ga">{{paint.city or ''}}</p>
                <p class="c_wqjcc b_01urj">{{paint.author or ''}}</p>
                <p class="c_x2ptw b_mxr38">{{paint.grade or ''}}</p>
            </div>
        </a>
        <header class="c_qt7dd b_4sh8z">
            <h3 class="c_78gsr b_o7w2c">{{paint.title}}</h3>
        </header>
        <div class="c_wgfe6 b_a1gdl">
            <p class="c_sbnel b_frv5u">{{paint.size or ''}}</p>
            <p class="c_sbnel b_frv5u">{{paint.material or ''}}</p>
            <p class="c_sbnel b_frv5u">{{paint.genre or ''}}</p>
        </div>
        <div class="c_4g9xz b_ik47g">
            <p class="c_la1ap b_mwej0">Стоимость</p>
            <h3 class="c_w6ecf b_6atmo">{{paint.price or ''}}</h3>
        </div>
        <p class="c_zlnpy b_7efyd">{{paint.description or ''}}</p>
        <p class="c_sbnel b_frv5u">{{ (paint._id.generation_time.strftime('%d.%m.%Y')) if paint._id else ''}}</p>
        <a class="c_75ykb b_gk0ob" href="https://telegram.me/gennadiy0605"><span class="c_dlut5 b_v0d1u">Обсудить покупку картины </span></a>
        <div class="c_sbnel b_frv5u">{{ share.share('/paintings/{}'.format(paint._id), paint.title, '/b/posts/{}'.format(paint.medias[0])) }}</div>
        <p class="c_sbnel b_frv5u">👁 {{total_watch_count}} (+{{today_watch_count}} Сегодня)</p>
    </div>
</section>

</div>
  <script>
    const images = [
      {% for media in paint.medias_original %}
      { src: "/b/posts/{{media}}" },
      {% endfor %}
    ];

    const wrapper = document.getElementById('wrapper');
    const swiper = document.getElementById('swiper');
    const prevBtn = document.getElementById('prev');
    const nextBtn = document.getElementById('next');
    const pagination = document.getElementById('pagination');

    let currentIndex = 0;
    let isDragging = false;
    let startX = 0;


    function createSlides() {
      wrapper.innerHTML = '';
      pagination.innerHTML = '';

      images.forEach((item, i) => {
        const slide = document.createElement('div');
        slide.className = 'swiper-slide';

        const img = document.createElement('img');
        img.crossOrigin = "anonymous";
        img.src = item.src;
        img.loading = "lazy";


        slide.append(img);
        wrapper.appendChild(slide);

        // Пагинация
        const dot = document.createElement('div');
        dot.className = `swiper-pagination-dot ${i === 0 ? 'active' : ''}`;
        dot.onclick = () => goToSlide(i);
        pagination.appendChild(dot);
      });

      wrapper.style.width = `${100}%`;
    }

    function updateTransform() {
      wrapper.style.transform = `translate3d(-${currentIndex * 100}%, 0, 0)`;

      document.querySelectorAll('.swiper-pagination-dot').forEach((dot, i) => {
        dot.classList.toggle('active', i === currentIndex);
      });
    }

    function goToSlide(index) {
      currentIndex = Math.max(0, Math.min(index, images.length - 1));
      updateTransform();
    }

    function nextSlide() { currentIndex = (currentIndex + 1) % images.length; updateTransform(); }
    function prevSlide() { currentIndex = (currentIndex - 1 + images.length) % images.length; updateTransform(); }

    // Drag
    function touchStart(e) {
      isDragging = true;
      startX = e.type.includes('mouse') ? e.pageX : e.touches[0].clientX;
      wrapper.style.transition = 'none';
    }

    function touchMove(e) {
      if (!isDragging) return;
      const x = e.type.includes('mouse') ? e.pageX : e.touches[0].clientX;
      const percentMoved = ((x - startX) / swiper.clientWidth) * 100;
      wrapper.style.transform = `translate3d(${-currentIndex * 100 + percentMoved}%, 0, 0)`;
    }

    function touchEnd(e) {
      if (!isDragging) return;
      isDragging = false;
      wrapper.style.transition = 'transform 0.75s cubic-bezier(0.32, 0.72, 0, 1)';

      const movedPercent = ((e.type.includes('mouse') ? e.pageX : e.changedTouches[0].clientX) - startX) / swiper.clientWidth * 100;

      if (movedPercent < -25) nextSlide();
      else if (movedPercent > 25) prevSlide();
      else updateTransform();
    }

    function init() {
      prevBtn.onclick = prevSlide;
      nextBtn.onclick = nextSlide;

      swiper.addEventListener('touchstart', touchStart, { passive: true });
      swiper.addEventListener('touchmove', touchMove, { passive: true });
      swiper.addEventListener('touchend', touchEnd);

      swiper.addEventListener('mousedown', touchStart);
      window.addEventListener('mousemove', touchMove);
      window.addEventListener('mouseup', touchEnd);

      window.addEventListener('resize', updateTransform);
    }

    // Запуск
    createSlides();
    init();
    setTimeout(updateTransform, 100);   // даём браузеру время на рендер
  </script>




{{ footer.section(user) }}
{% endblock %}