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

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

{% block metas %}
    <meta name="description" content="{{ django_blog_plus_site_description|default:'Latest articles and updates.' }}">
    <meta property="og:type" content="website">
    <meta property="og:title" content="{{ django_blog_plus_site_name|default:'Blog' }}">
    <meta property="og:description" content="{{ django_blog_plus_site_description|default:'Latest articles and updates.' }}">
    <meta property="og:url" content="{{ request.build_absolute_uri }}">
{% endblock metas %}

{% block lotus_content %}{% spaceless %}
<div class="lotus-extras-blog-container">

    {% if article_list %}
        {% with article_list|first as featured_article %}
            {# Featured Article - Full Width Hero #}
            <a href="{{ featured_article.get_absolute_url }}" class="lotus-extras-featured-article">
                <div class="lotus-extras-featured-article-bg" style="background-color: {{ featured_article|article_cover_bg }}; {% if featured_article.cover %}background-image: url('{{ featured_article.cover.url }}');{% endif %}"></div>
                <div class="lotus-extras-featured-article-overlay"></div>
                <div class="lotus-extras-featured-article-content">
                    <div class="lotus-extras-featured-article-meta">
                        {% with article_categories=featured_article.get_categories %}
                            {% if article_categories %}
                                <span class="lotus-extras-featured-article-category">{{ article_categories.0.title }}</span>
                            {% endif %}
                        {% endwith %}
                        <span class="lotus-extras-featured-article-date">{{ featured_article.publish_datetime|date:"M d, Y" }}</span>
                        <span class="lotus-extras-featured-article-readtime">· {% reading_time featured_article.content %} min read</span>
                    </div>
                    <h1 class="lotus-extras-featured-article-title">{{ featured_article.title }}</h1>
                    <p class="lotus-extras-featured-article-intro">{{ featured_article.introduction|striptags|unescape_html|truncatewords:30 }}</p>
                </div>
            </a>
        {% endwith %}

        {# Remaining Articles Grid #}
        {% with article_list|slice:"1:" as remaining_articles %}
            {% if remaining_articles %}
                <div class="lotus-extras-articles-grid">
                    {% for article in remaining_articles %}
                        <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">
                                    {% with article_categories=article.get_categories %}
                                        {% if article_categories %}
                                            <span class="lotus-extras-article-card-category">{{ article_categories.0.title }}</span>
                                            <span class="lotus-extras-article-card-date">·</span>
                                        {% endif %}
                                    {% endwith %}
                                    <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>
            {% endif %}
        {% endwith %}

        {% include "lotus/pagination.html" %}

    {% else %}
        <div class="lotus-extras-page-header">
            <h1 class="lotus-extras-page-title">{% trans "No articles yet" %}</h1>
            <p class="lotus-extras-page-description">{% trans "Check back soon for new content!" %}</p>
        </div>
    {% endif %}

</div>
{% endspaceless %}{% endblock lotus_content %}