{% extends 'base.html' %}

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

{% block content %}
      {% include 'includes/breadcrumbs_dark.html' %}
      <section class="sect pt-0">
        <div class="container">
          <div class="sectHead">
            <h1 class="h1">
              Видеообзоры
            </h1>
          </div>
          <div class="row">
            {% for video in videos %}
              <div class="col-md-6 col-lg-4 mb-5">
                <div class="swiper-slide videoSlide">
                  <div class="videoSlideImg">
                    <iframe src="{{ video.player_link }}" allow="encrypted-media; fullscreen; picture-in-picture; screen-wake-lock;" frameborder="0" allowfullscreen style="height: 100%; width: 100%"></iframe>
                  </div>
                  <div class="videoSlideTitle fw-medium text--lg text--lg-sm-14 mt-4">
                    <a href="{{ video.link }}" target="_blank">{{ video.title }}</a>
                  </div>
                </div>
                {% comment %} <div class="swiper-slide videoSlide" href="{{ video.link }}" data-fancybox="">
                  <div class="videoSlideImg" style="background-image: url({{ video.cover }});">
                    <button class="videoSlideBtn">
                      <img src="{% static 'img/icons/play-blue.svg' %}?v=1" alt="play">
                    </button>
                  </div>
                  <div class="videoSlideTitle fw-medium text--lg text--lg-sm-14 mt-4">
                    {{ video.title }}
                  </div>
                </div><!-- /videoSlide --> {% endcomment %}
              </div>
            {% endfor %}

          </div>
          {% include 'includes/pagination.html' %}
        </div>
      </section>
      {% include 'includes/form.html' with mparam="mb-5" %}
      {% include 'includes/about.html' %}
{% endblock %}