{% extends 'base.html' %}

{% load static %}
{% load filters  %}
{% load thumbnail %}

{% block content %}
      {% include 'includes/breadcrumbs_dark.html' %}
      <section class="sect pt-0 productSect">
        <div class="container">
          <h1 class="h1 productTitle">{{ lot.full_title }}</h1>
          <div class="row">
            <div class="col-lg-6">
              <div class="productSliderW">
                <div class="swiper productSlider">
                  <div class="swiper-wrapper">
                    {% if lot.cover %}
                      <a class="swiper-slide productSlide" data-fancybox="gallery" href="{{ lot.cover }}">
                        <img src="{{ lot.cover }}" alt="image">
                      </a>
                    {% endif %}
                    {% if lot.images %}
                      {% for photo in lot.images|separate_images %}
                        <a class="swiper-slide productSlide" data-fancybox="gallery" href="{{ photo }}">
                          <img src="{{ photo }}" alt="image">
                        </a>
                      {% endfor %}
                    {% endif %}

                  </div>
                  <div class="productSliderNav">
                    <button class="navArrow navArrowPrev">
                      <svg>
                        <use xlink:href="{% static 'img/icons/icons.svg' %}?v=1#arrow-prev"></use>
                      </svg>
                    </button>
                    <button class="navArrow navArrowNext">
                      <svg>
                        <use xlink:href="{% static 'img/icons/icons.svg' %}?v=1#arrow-next"></use>
                      </svg>
                    </button>
                  </div>
                </div>
                <div class="swiper productThumbSlider">
                  <div class="swiper-wrapper">
                    {% if lot.cover %}
                      <div class="swiper-slide productThumbSlide">
                        <img src="{{ lot.cover }}" alt="image">
                      </div><!-- /finishedPhotoThumbSlide -->
                    {% endif %}
                    {% if lot.images %}
                      {% for photo in lot.images|separate_images %}
                        <div class="swiper-slide productThumbSlide">
                          <img src="{{ photo }}" alt="image">
                        </div><!-- /finishedPhotoThumbSlide -->
                      {% endfor %}
                    {% endif %}

                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-6 mt-2 mt-lg-0">
              <div class="board bg--gray1">
                <div class="paramList pb-4 paramList--border-b">
                  {% if lot.year %}
                    <div class="paramItem">
                      <div class="paramItemName">Год выпуска</div>
                      <div class="paramItemText">{{ lot.year }} г.</div>
                    </div><!-- /paramItem -->
                  {% endif %}
                  {% if lot.mileage %}
                    <div class="paramItem">
                      <div class="paramItemName">Пробег</div>
                      <div class="paramItemText">
                        {{ lot.mileage|readable_int }} км</div>
                    </div><!-- /paramItem -->
                  {% endif %}
                  {% if lot.kuzov %}
                  <div class="paramItem">
                    <div class="paramItemName">Кузов</div>
                    <div class="paramItemText">{{ lot.kuzov }}</div>
                  </div><!-- /paramItem -->
                  {% endif %}
                  {% if lot.rate %}
                    <div class="paramItem">
                      <div class="paramItemName">Оценка</div>
                      <div class="paramItemText">{{ lot.rate }}</div>
                    </div><!-- /paramItem -->
                  {% endif %}
                  {% if lot.eng_v %}
                    <div class="paramItem">
                      <div class="paramItemName">Объем двигателя</div>
                      <div class="paramItemText">{{ lot.eng_v }} см³</div>
                    </div><!-- /paramItem -->
                  {% endif %}
                  {% if lot.pw %}
                    <div class="paramItem">
                      <div class="paramItemName">Мощность</div>
                      <div class="paramItemText">{{ lot.pw }} л.с</div>
                    </div><!-- /paramItem -->
                  {% endif %}
                  {% if lot.priv %}
                    <div class="paramItem">
                      <div class="paramItemName">Привод</div>
                      <div class="paramItemText">{{ lot.priv }}</div>
                    </div><!-- /paramItem -->
                  {% endif %}
                  {% if lot.kpp %}
                    <div class="paramItem">
                      <div class="paramItemName">Трансмиссия</div>
                      <div class="paramItemText">{{ lot.kpp }}</div>
                    </div><!-- /paramItem -->
                  {% endif %}
                  {% if lot.equip %}
                    <div class="paramItem">
                      <div class="paramItemName">Комплектация</div>
                      <div class="paramItemText">{{ lot.equip|safe }}</div>
                    </div><!-- /paramItem -->
                  {% endif %}


                </div>
                <div class="paramList py-4 paramList--border-b">
                  {% if lot.auction %}
                    <div class="paramItem">
                      <div class="paramItemName">Аукцион</div>
                      <div class="paramItemText">{{ lot.auction }}</div>
                    </div><!-- /paramItem -->
                  {% endif %}
                  {% if lot.auction_date %}
                    <div class="paramItem">
                      <div class="paramItemName">Дата аукциона</div>
                      <div class="paramItemText">
                        {{ lot.auction_date }}</div>
                    </div><!-- /paramItem -->
                  {% endif %}
                  {% if lot.lot %}
                  <div class="paramItem">
                    <div class="paramItemName">Лот</div>
                    <div class="paramItemText">{{ lot.lot }}</div>
                  </div><!-- /paramItem -->
                  {% endif %}

                </div>
                <div class="d-flex align-items-center pt-4 gap-4 flex-wrap justify-content-between">
                  <div class="d-block">
                    <h5 class="custom-card-title">Акция!</h5>
                    <p class="custom-card-text">Нашли дешевле? Сделаем скидку!</p>
                  </div>
                  <div class="d-block">
                    <span class="h5 h5--mobile color-gray5">Стартовая цена на аукционе*</span>
                    <div class="catalogCardPrice d-flex flex-wrap align-items-center gap-1 mt-1">
                      <span class="catalogCardPrice--main">{{ lot.currency_price_readable }}</span>
                      <span class="catalogCardPrice--second caption">~{{ lot.rub_price }}</span>
                    </div><!-- /catalogCardPrice -->
                  </div>
                  <div class="d-flex justify-content-between align-items-center gap-3">
                    <button class="button button--brown productBtn" data-src="#modalOrderBudget" data-fancybox onclick="ym(91395761,'reachGoal','view'); return true;" style="font-size: 0.9rem;">Подобрать под ваш бюджет</button>
                    <button class="button button--red productBtn" data-src="#modalOrder" data-fancybox onclick="ym(91395761,'reachGoal','view'); return true;">Оставить заявку</button>
                  </div>
                  <div class="text--sm text-end ms-auto">*не является публичной офертой</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      {% include 'includes/promos.html' %}
      <section class="sect py-0 auctionSect">
        <div class="container">
          <div class="row">
            {% if lot.auction_list or lot.info %}
            <div class="col-lg-7 col-xl-8">
              {% if lot.auction_list and lot.auction_list|is_image %}
                <h3 class="h3 fw-semibold mb-4">Аукционный лист</h3>
                <div class="board bg--gray1 mb-2">
                  <a class="pt-3 border-gray-3 auctionImg mx-auto" href="{{ lot.auction_list }}" data-fancybox>
                    <img class="mx-auto" src="{{ lot.auction_list }}" alt="image">
                  </a>
                </div>
              {% endif %}
              {% if lot.info %}
                <div class="col-lg-7 col-xl-8">
                    <div class="tabs productTabs" data-tabs="popup">
                      <div class="d-flex align-items-center justify-content-between flex-wrap gap-3 mb-3">
                        <h3 class="h3 fw-semibold mb-0">Описание лота</h3>
                        <ul class="tabs__nav gap-2">
                          <li class="tabs__nav-item">
                            <button class="tabs__nav-btn gap-2" type="button">
                              <img src="{% static 'img/icons/lang.svg' %}?v=1" alt="">
                              Перевод
                            </button>
                          </li>
                          <li class="tabs__nav-item">
                            <button class="tabs__nav-btn" type="button">
                              Язык оригинала
                            </button>
                          </li>
                        </ul>
                      </div>
      
                      <div class="tabs__content">
                        <div class="tabs__panel p-0">
                          <div class="board board--content bg--gray1 mb-2">
                            <div class="content content--h5">
                              {% if lot.info_rus %}
                                {{ lot.info_rus|remove_json_symbols|safe }}
                              {% else %}
                                {{ lot.info|remove_json_symbols|safe }}
                              {% endif %}
                            </div>
                          </div>
                        </div>
                        <div class="tabs__panel p-0">
                          <div class="board board--content bg--gray1 mb-2">
                            <div class="content content--h5">
                              {{ lot.info|remove_json_symbols|safe }}
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    {% endif %}
                  </div>
            </div>
            {% endif %}
            <div class="col-lg-5 col-xl-4 mt-5 mt-lg-0">
              <h3 class="h3 fw-semibold mb-4">Порядок работы</h3>

              <div class="accordion accordion-steps" id="accordion-steps">
                <div class="accordion-item">
                  <h4 class="accordion-header h4" id="heading_1">
                    <button class="accordion-button collapsed d-flex gap-3" type="button" data-bs-toggle="collapse"
                      data-bs-target="#collapse_1" aria-expanded="true" aria-controls="collapse_1">
                      <img src="{% static 'img/icons/step-1.svg' %}?v=1" alt="step-icon">
                      <div class="d-flex gap-2 pt-2">
                        <span>1.</span>
                        Покупка автомобиля
                      </div>

                    </button>
                  </h4>
                  <div id="collapse_1" class="accordion-collapse collapse" aria-labelledby="heading_1">
                    <div class="accordion-body">
                      <ul>
                        <li>
                          <strong>Заключаем с вами договор</strong> на услуги по подбору, помощи при покупке, доставке и
                          таможенном оформлении.
                        </li>
                        <li>
                          <strong>Вносите предоплату</strong> за услуги (гарантийный платеж)
                        </li>
                        <li>
                          <strong>Менеджер консультирует</strong> по выбранному вами лоту или подбирает лот под ваш
                          запрос.
                        </li>
                        <li>
                          <strong>Торгуем на аукционе</strong> и пробуем выкупить понравившейся вам лот. Если выкупить
                          не
                          получилось (ставка
                          превысила желаемую сумму или аукцион не состоялся), то подбираем другой вариант, либо ждем
                          повторных
                          торгов по лоту.
                        </li>
                        <li>
                          <strong>Оплачиваете инвойс</strong> (счет, выставленный продавцом), который включает в себя
                          стоимость авто, расходы
                          по Японии (хранение и транспортировка), расходы на перевозку по морю.
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
                <div class="accordion-item">
                  <h2 class="accordion-header" id="heading_2">
                    <button class="accordion-button collapsed d-flex gap-3" type="button" data-bs-toggle="collapse"
                      data-bs-target="#collapse_2" aria-expanded="false" aria-controls="collapse_2">
                      <img src="{% static 'img/icons/step-2.svg' %}?v=1" alt="step-icon">
                      <div class="d-flex gap-2 pt-2">
                        <span>2.</span>
                        Доставка во Владивосток
                      </div>
                    </button>
                  </h2>
                  <div id="collapse_2" class="accordion-collapse collapse" aria-labelledby="heading_2">
                    <div class="accordion-body">
                      <ul>
                        <li>
                          <strong>Контролируем процесс перевозки</strong>
                        </li>
                        <li>
                          <strong>Сопровождаем при прохождении таможни </strong> и оформлении всех необходимых
                          документов
                        </li>
                        <li>
                          <strong>Оплачиваете остаток</strong> по договору.
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
                <div class="accordion-item accordion-item--disabled">
                  <h2 class="accordion-header" id="heading_3">
                    <button class="accordion-button collapsed d-flex gap-3" type="button">
                      <img src="{% static 'img/icons/step-3.svg' %}?v=1" alt="step-icon">
                      <div class="d-flex gap-2 pt-2">
                        <span>3.</span>
                        Передаем вам автомобиль или Отправляем его в ваш регион.
                      </div>
                    </button>
                  </h2>
                </div>
              </div><!-- /accordion-steps -->

              <div class="warning mt-4">
                <div class="warningTitle d-flex align-items-center gap-2 mb-3">
                  <img src="{% static 'img/icons/warn.png' %}?v=1" alt="warn">
                  <div class="h4">Осторожно, мошенники!</div>
                </div>
                <div class="content">
                  <p>
                    В связи с большим спросом на услуги по доставке авто из-за рубежа, к сожалению, на этом рынке
                    появляется все больше мошеннических схем, в результате которых покупатели теряют свои деньги или
                    все-таки покупают автомобили, но с очень большими наценками. 
                  </p>
                  <p>
                    Мы собрали несколько советов, которые помогут вам избежать обмана.
                  </p>
                </div>
                <a class="color-brown color-brown-hover-black" href="{% url 'core:warning' %}">Подробнее...</a>
              </div>

            </div>
          </div>
        </div>
      </section>
      {% include 'includes/alike_lots.html' %}
      {% include 'includes/form_lot.html' %}
      {% include 'includes/reviews.html' %}
      {% include 'includes/about.html' %}
      {% include 'includes/auction_machinery.html' %}
{% endblock %}