{% load static %}
<section class="reviews sect reviewsSliderW">
    <div class="container">

      <div class="d-flex justify-content-between align-items-center sectHead">
        <h2><a class="h2 reviewsTitle pb-2 border-b-gray-4" href="{% url 'core:reviews' %}">Отзывы</a></h2>
        <div class="sliderNav gap-2 d-none d-lg-flex">
          <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 reviewsSlider">
        <div class="swiper-wrapper">
          
        {% for review in reviews %}
          <div class="swiper-slide reviewsSlide">
            <div class="reviewsCard cardText">
              <div class="d-flex justify-content-between flex-wrap gap-2 mb-3">
                <div class="d-flex align-items-center gap-1">
                  <img src="{% static 'img/icons/avatar.svg' %}?v=1" alt="person" class="reviewsCardPersonIcon">
                  <div class="d-block">
                    <span class="fw-medium d-block text--lg">{{ review.name }}</span>
                    <span class="fw-medium d-block text--15 color-gray5 ">{{ review.get_date }}</span>
                  </div>
                </div>
                {% if review.source == '1' %}
                    <img src="{% static 'img/admin/reviews/logo-1.png' %}?v=1" alt="logo" class="reviewsCardLogo d-none d-sm-block">
                {% elif review.source == '2' %}
                    <img src="{% static 'img/admin/reviews/2gis.svg' %}?v=1" alt="logo" class="reviewsCardLogo d-none d-sm-block">
                {% else %}
                    <img src="{% static 'img/admin/reviews/vl.svg' %}?v=1" alt="logo" class="reviewsCardLogo d-none d-sm-block">
                {% endif %}
              </div>
              <div class="content content--hidden my-1">
                {{ review.text|linebreaks }}
              </div>
              {% if review.source == '1' %}
                <img src="{% static 'img/admin/reviews/logo-1.png' %}?v=1" alt="logo" class="reviewsCardLogo d-block d-sm-none my-4">
              {% elif review.source == '2' %}
                <img src="{% static 'img/admin/reviews/2gis.svg' %}?v=1" alt="logo" class="reviewsCardLogo d-block d-sm-none my-4">
              {% else %}
                <img src="{% static 'img/admin/reviews/vl.svg' %}?v=1" alt="logo" class="reviewsCardLogo d-block d-sm-none my-4">
              {% endif %}
              <button class="button button--white mt-3 reviewsCardBtn" data-src="#modalReviews"
                data-bs-name="{{ review.name }}"
                data-bs-date="{{ review.get_date }}"
                data-bs-id="{{ review.id }}"
                data-bs-text="{{ review.text|linebreaks }}"
                {% if review.screen %}
                    data-bs-screen="{{ review.screen.url }}"
                {% else %}
                    data-bs-screen="#"
                {% endif %}
                {% if review.source == '1' %}
                    data-bs-source="{% static 'img/admin/reviews/logo-1.png' %}?v=1"
                {% elif review.source == '2' %}
                    data-bs-source="{% static 'img/admin/reviews/2gis.svg' %}?v=1"
                {% else %}
                    data-bs-source="{% static 'img/admin/reviews/vl.svg' %}?v=1"
                {% endif %}
                data-fancybox>Подробнее</button>
            </div><!-- /reviewsCard -->
          </div><!-- /reviewsSlide -->
        {% endfor %}
        </div>
      </div>

    </div>
  </section>

{% block js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const reviewModal= document.getElementById('modalReviews')
        if (reviewModal) {
            reviewButtons = document.querySelectorAll('.reviewsCardBtn')
            reviewButtons.forEach(button => {
                button.addEventListener('click', function(event) {
                    const review_id = button.getAttribute('data-bs-id')
                    
                    const review_source = button.getAttribute('data-bs-source')
                    const review_screen = button.getAttribute('data-bs-screen')
                    const review_date = button.getAttribute('data-bs-date')
                    const review_name = button.getAttribute('data-bs-name')
                    const review_text = button.getAttribute('data-bs-text')
        
                    const reviewModalName = reviewModal.querySelector('#reviewName')
                    const reviewModalDate = reviewModal.querySelector('#reviewDate')
                    const reviewModalScreen = reviewModal.querySelector('#reviewScreen')
                    const reviewModalText = reviewModal.querySelector('#reviewText')
                    const reviewModalSource = reviewModal.querySelector('#reviewSource')
                    const reviewModalSourceSecond = reviewModal.querySelector('#reviewSourceSecond')

                    reviewModalName.textContent = review_name
                    reviewModalDate.textContent = review_date
                    reviewModalText.innerHTML = review_text
                    reviewModalScreen.src = review_screen
                    reviewModalSource.src = review_source
                    reviewModalSourceSecond.src = review_source
            });
            
        })}
    });

</script>
{% endblock %}