{% extends 'base.html' %}

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

{% block content %}
      {% include 'includes/breadcrumbs_dark.html' %}
      <section class="sect pt-2 news news--page">
        <div class="container">

          <h1 class="h1 mb-4 mb-lg-5">Новости</h1>

          <div class="d-none d-lg-flex gap-2 flex-wrap catLogoW catLogoW--border-gray sectHead">
            <a class="carLogo {% if not filter_query %}carLogo--array{% else %}px-4 gap-3{% endif %}" href="{% url 'core:articles' %}">
              Все новости
            </a>
            {% for category in categories %}
              <a class="carLogo {% if filter_query == category.id|int_to_str %}carLogo--array{% else %}px-4 gap-3{% endif %}" href="{% url 'core:articles' %}?filter={{ category.id }}">
                {{ category.title}}
              </a>
            {% endfor %}
          </div><!-- /brand-cats -->
          <form method="GET">
            <select name="filter" id="newsCat" class="d-block d-lg-none formSelect formSelect--gray mb-4" onchange="this.form.submit()">
              <option value="">Все новости</option>
              {% for category in categories %}
                <option value="{{ category.id }}" {% if filter_query == category.id|int_to_str %}selected{% endif %}>{{ category.title }}</option>
              {% endfor %}
            </select>
          </form>

          <div class="row mt-3 reviewsPage">
            {% for article in articles %}
              <div class="col-md-6 col-xl-4 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-3 pt-lg-4 px-0">
                    <span class="color-gray5 caption">{{ article.get_date }}</span>
                    <h5 class="catalogCardTitle mt-3"><a href="{{ article.get_absolute_url }}">{{ article.title }}</a></h5>
                  </div>
                </div><!-- /catalogCard -->
              </div>
            {% endfor %}
          </div>
          {% include 'includes/pagination.html' %}
      </section>
      {% include 'includes/form.html' with mparam="mb-5" %}
      {% include 'includes/about.html' %}
{% endblock %}