{% extends 'base.html' %}

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

{% block content %}
      {% include 'includes/breadcrumbs_dark.html' %}

      <section class="sect pt-0 pb-0 article">
        <div class="container">
          <div class="row mb-4">
            <div class="col-lg-8">
              <h1 class="h1">
                {{ article.title }}
              </h1>
            </div>
          </div>
          <div class="row">
            <div class="col-lg-8 content">
              <img src="{{ article.cover.url }}" alt="image" class="articleImg" loading="lazy">
              <div class="caption mb-3">{{ article.get_date }}</div>
              {{ article.content|safe }}
            </div>
            <div class="col-lg-4 mt-3 mt-lg-0">
              <div class="mb-4 mb-lg-5">
                {% for banner in banners %}
                  {% if banner.banner %}
                    <a href="{{ banner.link }}" class="banerSm mb-4 mb-lg-3" style="background-image: url({{ banner.banner.url }});">
                      <div class="banerSmContent d-flex flex-column justify-content-between h-100">
                        <h3 class="banerSmTitle h3 text--white fw-semibold mb-4">
                          {{ banner.title }}
                        </h3>
                        <div class="button button--brown">{{ banner.button_text }}</div>
                      </div>
                    </a>
                  {% endif %}
                {% endfor %}
              </div>

              <h3 class="h3 h2--mobile mb-4 fw-semibold">Другие новости</h3>
              <div class="news--page">
                {% for article in sidebar_articles %}
                  <div class="mb-4">
                    <div class="catalogCard">
                      {% if article.cover %}
                        <a href="{{ article.get_absolute_url }}" class="catalogCardImg catalogCardImg--305">
                          <img src="{{ article.cover.url }}" alt="image" loading="lazy">
                        </a>
                      {% endif %}
                      <div class="catalogCardContent bg--white pt-1 pt-lg-2 px-0">
                        <span class="color-gray5 caption">{{ article.get_date }}</span>
                        <h5 class="catalogCardTitle mt-2"><a href="{{ article.get_absolute_url }}">{{ article.title }}</a></h5>
                      </div>
                    </div><!-- /catalogCard -->
                  </div>
                {% endfor %}
              </div>


            </div>
          </div>


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