{% extends 'base.html' %}
{% load i18n %}

{% block title %}{{ article.title }}{% endblock %}

{% block breadcrumbs %}
<div class="breadcrumb-container">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="/"><i class="fa-solid fa-house me-1"></i> {% trans "Home" %}</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ article.title }}</li>
            </ol>
        </nav>
    </div>
</div>
{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="mb-4">
        <a href="/" class="btn btn-outline-secondary btn-sm">
            <i class="fa-solid fa-arrow-left me-1"></i> {% trans "Back to Home" %}
        </a>
    </div>

    <h1>{{ article.title }}</h1>
    {% if article.created_at %}
    <p class="text-muted">{% trans "Published on" %} {{ article.created_at|date:"F d, Y" }}</p>
    {% endif %}
    <hr>
    <div class="bg-white p-4 rounded shadow-sm">
        {{ article.content|safe|linebreaks }}
    </div>
</div>
{% endblock %}