{% load i18n %}

<header class="blog-premium-overview__hero mb-4 mb-lg-5">
    <div class="blog-premium-overview__hero-surface">
        <div class="row g-4 align-items-end">
            <div class="col-12 col-xl-7">
                <p class="blog-premium-overview__eyebrow mb-3">{% trans "Journal" %}</p>
                <h1 class="blog-premium-overview__title display-4 mb-3">{{ page.title }}</h1>
                <p class="blog-premium-overview__summary mb-0">
                    {% trans "Articles, announcements, and practical insights presented in a premium editorial layout." %}
                </p>
            </div>
            <div class="col-12 col-xl-5">
                <div class="blog-premium-overview__stats">
                    {% if paginator and paginator.count %}
                        <div class="blog-premium-overview__stat">
                            <span class="blog-premium-overview__stat-value">{{ paginator.count }}</span>
                            <span class="blog-premium-overview__stat-label">{% trans "Published articles" %}</span>
                        </div>
                    {% endif %}
                    {% if paginator and paginator.num_pages > 1 %}
                        <div class="blog-premium-overview__stat">
                            <span class="blog-premium-overview__stat-value">{{ current_page }}/{{ paginator.num_pages }}</span>
                            <span class="blog-premium-overview__stat-label">{% trans "Current page" %}</span>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</header>