{% extends "main/master.html" %}

{% block content %}
<div class="category-header mb-5 p-4 bg-light rounded">
    <h1 class="mb-3">{{ category.name }}</h1>
    {% if category.description %}
    <p class="lead mb-0">{{ category.description }}</p>
    {% endif %}
</div>

<div class="blog-posts">
    {% if posts %}
        {% for post in posts %}
        <article class="blog-post">
            <h2 class="h3"><a href="/post/{{ post.slug }}" class="text-dark">{{ post.title }}</a></h2>
            <div class="post-meta">
                <span><i class="far fa-calendar"></i> {{ post.created_at|truncate(10, true, '') }}</span>
                {% if post.author %}
                <span class="ml-3"><i class="far fa-user"></i> {{ post.author }}</span>
                {% endif %}
                {% if post.tags %}
                <span class="ml-3"><i class="fas fa-tags"></i> 
                    {% for tag in post.tags %}
                    <a href="/tag/{{ tag }}" class="text-muted">{{ tag }}</a>{% if not loop.last %}, {% endif %}
                    {% endfor %}
                </span>
                {% endif %}
            </div>
            <div class="post-excerpt">{{ post.description }}</div>
            <a href="/post/{{ post.slug }}" class="read-more">Read More <i class="fas fa-arrow-right ml-1"></i></a>
        </article>
        {% endfor %}
    {% else %}
        <div class="alert alert-info">
            <i class="fas fa-info-circle mr-2"></i> No posts found in this category.
        </div>
    {% endif %}
</div>
{% endblock %}