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

{% block header-title %}{{ article_object.seo_title|default:article_object.title }} | {{ django_blog_plus_site_name|default:"Blog" }}{% endblock header-title %}

{% block metas %}
    <meta name="description" content="{{ article_object.lead|default:article_object.introduction|striptags|truncatewords:30 }}">
    <meta property="og:type" content="article">
    <meta property="og:title" content="{{ article_object.seo_title|default:article_object.title }}">
    <meta property="og:description" content="{{ article_object.lead|default:article_object.introduction|striptags|truncatewords:30 }}">
    <meta property="og:url" content="{{ request.build_absolute_uri }}">
    {% if article_object.cover %}
    <meta property="og:image" content="{{ request.scheme }}://{{ request.get_host }}{{ article_object.cover.url }}">
    {% endif %}
    <meta property="article:published_time" content="{{ article_object.publish_datetime|date:'c' }}">
    {% for author in article_object.get_authors %}
    <meta property="article:author" content="{{ author.get_full_name }}">
    {% endfor %}
{% endblock metas %}

{% block lotus_content %}
{# Track view count #}
{% increment_article_view article_object.id %}

<article class="lotus-extras-article-detail">
    {# Breadcrumb #}
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'lotus:article-index' %}">{% trans "Blog" %}</a></li>
            {% with article_categories=article_object.get_categories %}
                {% if article_categories %}
                    <li class="breadcrumb-item"><a href="{{ article_categories.0.get_absolute_url }}">{{ article_categories.0.title }}</a></li>
                {% endif %}
            {% endwith %}
            <li class="breadcrumb-item active" aria-current="page">{{ article_object.title|truncatewords:5 }}</li>
        </ol>
    </nav>

    {# Cover Image #}
    {% if article_object.cover %}
    <div class="lotus-extras-article-cover" style="background-color: {{ article_object|article_cover_bg }};">
        <img src="{{ article_object.cover.url }}" alt="{{ article_object.cover_alt_text|default:article_object.title }}" class="lotus-extras-article-cover-image">
    </div>
    {% endif %}

    {# Title #}
    <h1 class="lotus-extras-article-title">{{ article_object.title }}</h1>

    {# Meta #}
    <div class="lotus-extras-article-meta">
        <span>{{ article_object.publish_datetime|date:"F d, Y" }}</span>
        <span>·</span>
        <span>{% reading_time article_object.content %} {% trans "min read" %}</span>
        {% with article_authors=article_object.get_authors %}
            {% if article_authors %}
                <span>·</span>
                <span>{% trans "By" %} {{ article_authors.0.get_full_name }}</span>
            {% endif %}
        {% endwith %}
    </div>

    {# Introduction #}
    {% if article_object.introduction %}
    <div class="lotus-extras-article-introduction">
        {{ article_object.introduction|safe }}
    </div>
    {% endif %}

    {# Content #}
    <div class="lotus-extras-article-content">
        {{ article_object.content|demote_headings|safe }}
    </div>

    {# Featured Image (before CTA) #}
    {% if article_object.image %}
    <div class="lotus-extras-article-featured-image">
        <img src="{{ article_object.image.url }}" alt="{{ article_object.image_alt_text|default:article_object.title }}">
    </div>
    {% endif %}

    {# Call to Action #}
    {% get_article_cta article_object.id as cta %}
    {% if cta %}
    <div class="lotus-extras-cta-block">
        <h3>{{ cta.title }}</h3>
        {% if cta.image %}
        <img src="{{ cta.image.url }}" alt="{{ cta.title }}" class="lotus-extras-cta-image">
        {% endif %}
        <div class="lotus-extras-cta-text">{{ cta.text|safe }}</div>
        {% if cta.button_text and cta.button_url %}
        <a href="{{ cta.button_url }}" class="lotus-extras-cta-button">{{ cta.button_text }}</a>
        {% endif %}
    </div>
    {% endif %}

    {# Tags #}
    {% with article_tags=article_object.tags.all %}
        {% if article_tags %}
        <div class="lotus-extras-article-tags">
            <strong>{% trans "Tags" %}:</strong>
            {% for tag in article_tags %}
                <a href="{% url 'lotus:tag-detail' slug=tag.slug %}" class="lotus-extras-tag">{{ tag.name }}</a>
            {% endfor %}
        </div>
        {% endif %}
    {% endwith %}

    {# Author Box #}
    {% with article_authors=article_object.get_authors %}
        {% if article_authors %}
        <div class="lotus-extras-author-box">
            {% with author=article_authors.0 %}
                {% if author.userprofile.avatar %}
                <img src="{{ author.userprofile.avatar.url }}" alt="{{ author.get_full_name }}" class="lotus-extras-author-avatar">
                {% endif %}
                <div class="lotus-extras-author-info">
                    <h4>{{ author.get_full_name }}</h4>
                    {% if author.userprofile.author_description %}
                    <p>{{ author.userprofile.author_description }}</p>
                    {% endif %}
                </div>
            {% endwith %}
        </div>
        {% endif %}
    {% endwith %}

    {# Previous/Next Navigation #}
    {% get_adjacent_articles article_object as nav %}
    {% if nav.previous or nav.next %}
    <nav class="lotus-extras-article-nav">
        {% if nav.previous %}
        <a href="{{ nav.previous.get_absolute_url }}" class="lotus-extras-article-nav-prev">
            <span>← {% trans "Previous" %}</span>
            <strong>{{ nav.previous.title }}</strong>
        </a>
        {% endif %}
        {% if nav.next %}
        <a href="{{ nav.next.get_absolute_url }}" class="lotus-extras-article-nav-next">
            <span>{% trans "Next" %} →</span>
            <strong>{{ nav.next.title }}</strong>
        </a>
        {% endif %}
    </nav>
    {% endif %}
</article>
{% endblock lotus_content %}