{% extends "lotus/base.html" %}
{% load i18n %}

{% block header-title %}{% trans "Categories" %} | {{ django_blog_plus_site_name|default:"Blog" }}{% endblock header-title %}

{% block lotus_content %}
<div class="lotus-extras-blog-container">
    <div class="lotus-extras-page-header">
        <h1 class="lotus-extras-page-title">{% trans "Categories" %}</h1>
        <p class="lotus-extras-page-description">{% trans "Browse articles by category" %}</p>
    </div>

    {% if category_list %}
    <div class="lotus-extras-articles-grid">
        {% for category in category_list %}
        <a href="{{ category.get_absolute_url }}" class="lotus-extras-article-card">
            {% if category.cover %}
            <div class="lotus-extras-article-card-image-wrapper">
                <img src="{{ category.cover.url }}" class="lotus-extras-article-card-image" alt="{{ category.title }}">
            </div>
            {% endif %}
            <div class="lotus-extras-article-card-body">
                <h2 class="lotus-extras-article-card-title">{{ category.title }}</h2>
                {% if category.description %}
                <p class="lotus-extras-article-card-intro">{{ category.description|truncatewords:20 }}</p>
                {% endif %}
            </div>
        </a>
        {% endfor %}
    </div>
    {% else %}
    <p>{% trans "No categories found." %}</p>
    {% endif %}

    {% include "lotus/pagination.html" %}
</div>
{% endblock lotus_content %}