{% extends 'base.html' %}

{% load static %}

{% block content %}

<link rel="stylesheet" href="{% static 'css/blog.css' %}">
<div class="big-container">
    <div class="background">
        <img class="background-photo" src="{% static 'imgs/blog-grafika.png' %}">
        
      </div>
      <div class="background-container"></div>
          <p class="big-text">Blog</p>
  
          <p class="undertitle">Zapraszam do śledzenia aktualności</p>

    <div class="imposed-container">
        <br>
        <div class="articles">
            {% for article in articles %}

                <a class="article-tile article-grid" href="{% url 'article_detail' article.id %}">
                    <img src="{{article.img.url}}" alt="Zdjęcie artykułu" class="article-image">
                    <div>
                        <p class="article-category">AKTUALNOŚCI</p>
                        <h2 class="article-title">{{article.title}}</h2>
                        <p class="article-description">{{article.description}}</p>
                        <span class="article-readmore">Czytaj więcej</span>
                    </div>
                </a>
            {% endfor %}
            <div class="pagination">
                <span class="step-links">
                    {% if articles.has_previous %}
                        <a href="?page=1"><img class="skip-icon" src="{% static 'imgs/back.png' %}"></a>
                        <a href="?page={{ articles.previous_page_number }}"><img class="skip-icon" src="{% static 'imgs/arrow.png' %}"></a>
                    {% endif %}
                    
                    <span class="current-page">Strona {{ articles.number }} z {{ articles.paginator.num_pages }}</span>
                    
                    {% if articles.has_next %}
                        <a href="?page={{ articles.next_page_number }}"><img class="skip-icon" src="{% static 'imgs/arrow-right.png' %}"></a>
                        <a href="?page={{ articles.paginator.num_pages }}"><img class="skip-icon" src="{% static 'imgs/chevron.png' %}"></a>
                    {% endif %}
                </span>
            </div>
        </div>
    </div>
</div>

{% endblock %}