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

{% block title %}Сервис Автопостинга{% endblock %}

{% block head %}
<!-- <meta property="og:title" content="Сервис Автопостинга">
<meta property="og:description" content="Сервис создан для художников, скульпторов, искусствоведов, журналистов,  галеристов, музеев и разных выставочных пространств с возможностью выложить пост картины, скульптуры, новостей, анонсов выставок  или любую другую информацию, разместив сразу в нескольких Ваших социальных сетях интернета, арт-маркетплейсах и сообществах партнёров сервиса одним нажатием!">
<meta property="og:image" content="https://avtopost.kultmost.ru/favicon.ico">
<meta name="facebook-domain-verification" content="uwjj4p3kr1xlxvcux4ujv7b6qujhl8">
<meta property="og:url" content="https://avtopost.kultmost.ru/">
<meta name="description" content="Сервис создан для художников, скульпторов, искусствоведов, журналистов,  галеристов, музеев и разных выставочных пространств с возможностью выложить пост картины, скульптуры, новостей, анонсов выставок  или любую другую информацию, разместив сразу в нескольких Ваших социальных сетях интернета, арт-маркетплейсах и сообществах партнёров сервиса одним нажатием!">
<meta property="og:site_name" content="KULTMOST.АВТОПОСТ"> -->
{{ header.style() }}
<style>
    /* Base (common) styles */
    .b_0a7ub {
        -webkit-box-orient: vertical;
        color: #000;
        display: -webkit-box;
        flex: 1 0 0;
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 10px 16px;
    }

    .b_pozuu {
        -webkit-box-orient: vertical;
        align-self: stretch;
        color: rgba(58, 58, 58, 0.75);
        display: -webkit-box;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: pre-line;
    }

    .b_r81yh {
        align-items: center;
        align-self: stretch;
        display: flex;
        flex-direction: column;
        gap: 30px;
    }
.c_383ex{margin-bottom: 100px;}
    /* Mobile */
    @media (max-width: 699px) {
        .c_70z5u {
            align-items: center;
            display: flex;
            justify-content: center;
            width: 335px;
        }

        .c_catap {
            height: 400px;
            width: 355px;
        }

        .c_15oiq {
            align-items: flex-start;
            align-self: stretch;
            background: #FFF;
            display: flex;
            flex-direction: column;
            gap: 10px;
            justify-content: center;
            min-width: 335px;
            padding: 10px 30px;
        }

        .c_383ex {
            align-items: flex-start;
            background: #FFF;
            display: flex;
            flex-direction: column;
            gap: 30px;
            margin: auto;
            width: 375px;
        }
    }

    /* Tablet */
    @media (min-width: 700px) and (max-width: 900px) {
        .c_70z5u {
            align-items: center;
            display: flex;
            justify-content: center;
            width: 760px;
        }

        .c_catap {
            height: 400px;
            width: 668px;
        }

        .c_15oiq {
            align-items: flex-start;
            align-self: stretch;
            background: #FFF;
            display: flex;
            flex-direction: column;
            gap: 10px;
            justify-content: center;
            min-width: 335px;
            padding: 10px 50px;
        }

        .c_383ex {
            align-items: flex-start;
            background: #FFF;
            display: flex;
            flex-direction: column;
            gap: 30px;
            width: 800px;
        }
    }

    /* Desktop */
    @media (min-width: 901px) {
        .c_70z5u {
            align-items: center;
            display: flex;
            justify-content: center;
            padding: 0 100px;
        }

        .c_catap {
            flex: 1 0 0;
            height: 400px;
        }

        .c_15oiq {
            align-items: flex-start;
            background: #FFF;
            display: flex;
            flex-direction: column;
            flex: 1 0 0;
            gap: 10px;
            justify-content: center;
            min-width: 335px;
            padding: 10px 60px;
        }

        .c_0a6al {
            align-items: flex-start;
            align-self: stretch;
            display: flex;
            gap: 30px;
            flex-direction: row;
            padding: 0 100px;
        }

        .c_383ex {
            align-items: flex-start;
            background: #FFF;
            display: flex;
            flex-direction: column;
            gap: 30px;
            width: 1600px;
        }
    }
</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>
{{ footer.style() }}
{% endblock %}

{% block content %}
{{ header.section(user) }}
<section class="c_383ex">
    <header class="c_70z5u">
        <h3 class="c_kz6u4 b_0a7ub">{{news.title}}</h3>
    </header>
    <div class="c_0a6al b_r81yh">
              <div class="swiper" id="swiper">
    <div class="swiper-wrapper" id="wrapper"></div>
    {% if news.orig_media|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 news.orig_media|length == 1%}style="display: none;"{% endif %}></div>
  </div>
        <div class="c_15oiq">
            <p class="c_r2zvv b_pozuu">{{news.description}}</p>
        </div>
    </div>
</section>
<script>
    const images = [
        {% for media in news.orig_media %}
      { src: "/b/news/{{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 %}