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

<section class="catalogSliderW sect">
    <div class="container">
      <div class="d-flex justify-content-between align-items-center gap-3 flex-wrap sectHead">
        <div class="d-flex align-items-start gap-2 gap-lg-3">
          <img src="{% static 'img/admin/flag/gruz.png' %}?v=1" alt="flag" class="title-flag">
          <h2 class="h2 title-flag-h2">Каталог спецтехники и грузовых автомобилей</h2>
        </div>
        <a href="{% url 'core:catalog_machinery' %}" class="d-none d-lg-flex button button--brown gap-2">
          Каталог
          <img src="{% static 'img/icons/btn-arrow-white.svg' %}?v=1" alt="arrow">
        </a>
      </div><!-- /sectHead -->

      <div class="d-none d-lg-flex align-items-end justify-content-between flex-wrap gap-3">

        <div class="d-flex gap-2 flex-wrap catLogoW">
          {% for machinery_filter in machinery_filters %}
            <a class="carLogo px-4 gap-3" href="{% url 'core:catalog_machinery' %}?type={{ machinery_filter.id }}">
              <img src="{{ machinery_filter.icon.url }}" alt="logo">
              {{ machinery_filter.title }}
            </a>
          {% endfor%}
        </div><!-- /brand-cats -->

        <div class="sliderNav gap-2">
          <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><!-- /sliderNav -->

      </div>

      <div class="swiper catalogSlider">
        <div class="swiper-wrapper">
          {% for lot in machinery_lots %}
            <div class="swiper-slide catalogSlide">
              <div class="catalogCard catalogCardCar">
                <a href="{{ lot.get_absolute_url }}" class="catalogCardImg">
                  <img src="{{ lot.cover }}" alt="image">
                </a>
                <div class="catalogCardContent bg--gray1 p-4">
                  <div class="d-flex flex-column justify-content-between h-100">
                    <h5 class="catalogCardTitle"><a href="{{ lot.get_absolute_url }}">{{ lot.full_title }}</a></h5>
                    <div class="d-block">
                      <div class="catalogCardPrice d-flex flex-wrap align-items-center gap-1 my-3">
                        <span class="catalogCardPrice--main">{{ lot.currency_price_readable }}</span>
                        <span class="catalogCardPrice--second caption">~{{ lot.rub_price }}</span>
                      </div><!-- /catalogCardPrice -->
                      <div class="d-flex gap-1 gap-lg-3 flex-wrap">
                        <span class="caption color-gray5">Лот {{ lot.lot }}</span>
                        <span class="caption color-gray5">{{ lot.auction }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div><!-- /catalogCard -->
            </div><!-- /catalogSlide -->
          {% endfor %}

        </div>
      </div>
      <a href="{% url 'core:catalog_machinery' %}" class="d-flex d-lg-none button button--brown gap-2 mt-4 catalogBtn">
        Перейти в каталог
        <img src="{% static 'img/icons/btn-arrow-white.svg' %}?v=1" alt="arrow">
      </a>

    </div>
  </section>