{% extends 'base.html' %}

{% block content %}
{% load static %}
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
<br><br>
    <div class="article-container">
        <h1>{{article.title}}</h1>
        <p style="text-align: left">{{article.date}}</p>

        <img src="{{article.img.url}}" alt="Zdjęcie artykułu" class="article-detail-image">
        <h4>{{article.content|linebreaksbr}}</h4>
    </div>
    <div class="imposed-container" id="latest-articles">
        <div class="latest-articles-grid">
            {% for art in articles %}
                {% if forloop.counter <= 3 %}
                    <a class="article-tile article-grid" href="{% url 'article_detail' art.id %}">
                        <img src="{{art.img.url}}" alt="Zdjęcie artykułu" class="article-image">
                        <div>
                            <p class="article-category">AKTUALNOŚCI</p>
                            <h2 class="article-title">{{art.title}}</h2>
                            <p class="article-description">{{art.description}}</p>
                            <span class="article-readmore">Czytaj więcej</span>
                        </div>
                    </a>
                {% endif %}
            {% endfor %}
        </div>
    </div>
{% endblock %}