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

{% block header-title %}{% trans "Tag:" %} {{ tag_object.name }} | {{ 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">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{% url 'lotus:article-index' %}">{% trans "Blog" %}</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ tag_object.name }}</li>
            </ol>
        </nav>
        <h1 class="lotus-extras-page-title">{{ tag_object.name }}</h1>
    </div>

    {% if article_list %}
    <div class="lotus-extras-articles-grid">
        {% for article in article_list %}
        <a href="{{ article.get_absolute_url }}" class="lotus-extras-article-card">
            <div class="lotus-extras-article-card-image-wrapper" style="background-color: {{ article|article_cover_bg }};">
                {% if article.cover %}
                    <img src="{{ article.cover.url }}" class="lotus-extras-article-card-image" alt="{{ article.cover_alt_text|default:article.title }}">
                {% else %}
                    <div class="lotus-extras-article-card-placeholder">{{ article.title|slice:":1"|upper }}</div>
                {% endif %}
            </div>
            <div class="lotus-extras-article-card-body">
                <div class="lotus-extras-article-card-meta">
                    <span class="lotus-extras-article-card-date">{{ article.publish_datetime|date:"M d, Y" }}</span>
                </div>
                <h2 class="lotus-extras-article-card-title">{{ article.title }}</h2>
                <p class="lotus-extras-article-card-intro">{{ article.introduction|striptags|unescape_html|truncatewords:20 }}</p>
            </div>
        </a>
        {% endfor %}
    </div>
    {% else %}
    <p>{% trans "No articles with this tag yet." %}</p>
    {% endif %}

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