{% extends 'main/base.html' %}
{% block title %}{{ news_item.title }} - Monaco Institute{% endblock %}

{% block content %}
<section class="page-banner">
    <div class="container">
        <h1>{{ news_item.title|truncatewords:8 }}</h1>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb breadcrumb-custom">
                <li class="breadcrumb-item"><a href="{% url 'home' %}">Home</a></li>
                <li class="breadcrumb-item"><a href="{% url 'news' %}">News</a></li>
                <li class="breadcrumb-item active">Article</li>
            </ol>
        </nav>
    </div>
</section>

<section class="py-5">
    <div class="container">
        <div class="row">
            <div class="col-lg-8">
                <article data-aos="fade-up">
                    <div class="d-flex align-items-center gap-3 mb-3">
                        <span class="badge" style="background:var(--accent);">{{ news_item.get_category_display }}</span>
                        <small class="text-muted"><i class="fas fa-calendar me-1"></i>{{ news_item.published_date|date:"d F Y" }}</small>
                    </div>
                    <h2 class="section-title">{{ news_item.title }}</h2>
                    {% if news_item.image %}
                    <img src="{{ news_item.image.url }}" alt="{{ news_item.title }}" class="img-fluid rounded mb-4 w-100" style="max-height:400px;object-fit:cover;">
                    {% endif %}
                    <div class="article-content" style="line-height:1.9;font-size:15.5px;">
                        {{ news_item.content|linebreaks }}
                    </div>
                </article>
                <div class="mt-4">
                    <a href="{% url 'news' %}" class="btn btn-outline-primary"><i class="fas fa-arrow-left me-2"></i>Back to News</a>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="sidebar-widget" data-aos="fade-left">
                    <h5 class="widget-title">Recent News</h5>
                    {% for item in recent_news %}
                    <div class="mb-3 pb-3 border-bottom">
                        <small class="text-muted">{{ item.published_date|date:"d M Y" }}</small>
                        <p class="mb-1"><a href="{% url 'news_detail' item.pk %}" style="color:var(--primary);text-decoration:none;font-weight:600;font-size:13.5px;">{{ item.title|truncatewords:10 }}</a></p>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}