{% extends "base.html" %}

{% block content %}
<div class="articles-grid">
    {% for article in articles_page.object_list %}
    <article class="article-card">
        <div class="article-meta">
            {% if article.category %}
            <a href="{{ SITEURL }}/{{ article.category.url }}" class="article-category">{{ article.category }}</a>
            {% endif %}
            {% if article.tags %}
              <div class="article-tags">
                  {% for tag in article.tags %}
                  <a href="{{ SITEURL }}/{{ tag.url }}" class="tag-pill">{{ tag }}</a>
                  {% endfor %}
              </div>
            {% endif %}

        </div>
        <h2 class="article-title">
            <a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a>
        </h2>
        {% if article.content %}
        <div class="article-content">
            {{ article.content }}
        </div>
        {% endif %}
    </article>
    {% endfor %}
</div>

{% if articles_page.has_other_pages() %}
<nav class="pagination">
    {% if articles_page.has_previous() %}
    <a href="{{ SITEURL }}/{{ articles_previous_page.url }}" class="pagination-link pagination-prev">← Newer</a>
    {% endif %}
    <span class="pagination-info">Page {{ articles_page.number }} of {{ articles_paginator.num_pages }}</span>
    {% if articles_page.has_next() %}
    <a href="{{ SITEURL }}/{{ articles_next_page.url }}" class="pagination-link pagination-next">Older →</a>
    {% endif %}
</nav>
{% endif %}
{% endblock %}