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

{% block content %}
<section class="page-banner">
    <div class="container">
        <h1>News & Events</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 active">News</li>
            </ol>
        </nav>
    </div>
</section>

<section class="py-3 bg-light">
    <div class="container">
        <div class="d-flex flex-wrap gap-2 py-2">
            <a href="{% url 'news' %}" class="btn btn-sm {% if not category %}btn-primary{% else %}btn-outline-primary{% endif %}">All</a>
            {% for cat_key, cat_name in categories %}
            <a href="{% url 'news' %}?category={{ cat_key }}" class="btn btn-sm {% if category == cat_key %}btn-primary{% else %}btn-outline-primary{% endif %}">{{ cat_name }}</a>
            {% endfor %}
        </div>
    </div>
</section>

<section class="py-5">
    <div class="container">
        <div class="row">
            {% for item in news %}
            <div class="col-lg-4 col-md-6 mb-4" data-aos="fade-up">
                <div class="news-card h-100">
                    {% if item.image %}
                    <div class="news-card-img">
                        <img src="{{ item.image.url }}" alt="{{ item.title }}" class="img-fluid">
                    </div>
                    {% else %}
                    <div style="height:160px;background:linear-gradient(135deg,#1a3a6b,#2a5298);display:flex;align-items:center;justify-content:center;">
                        <i class="fas fa-newspaper fa-3x text-white opacity-50"></i>
                    </div>
                    {% endif %}
                    <div class="news-card-body">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span class="badge" style="background:var(--accent);">{{ item.get_category_display }}</span>
                            <small class="text-muted">{{ item.published_date|date:"d M Y" }}</small>
                        </div>
                        <h5><a href="{% url 'news_detail' item.pk %}">{{ item.title|truncatewords:12 }}</a></h5>
                        <p class="small">{{ item.excerpt|default:item.content|truncatewords:30 }}</p>
                        <a href="{% url 'news_detail' item.pk %}" class="read-more">Read More <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
            </div>
            {% empty %}
            <div class="col-12 text-center py-5">
                <i class="fas fa-newspaper fa-4x text-muted mb-3"></i>
                <h4 class="text-muted">No news articles available yet.</h4>
            </div>
            {% endfor %}
        </div>
        {% if news.has_other_pages %}
        <nav class="mt-4">
            <ul class="pagination justify-content-center">
                {% if news.has_previous %}<li class="page-item"><a class="page-link" href="?page={{ news.previous_page_number }}">Previous</a></li>{% endif %}
                {% for num in news.paginator.page_range %}
                <li class="page-item {% if news.number == num %}active{% endif %}"><a class="page-link" href="?page={{ num }}">{{ num }}</a></li>
                {% endfor %}
                {% if news.has_next %}<li class="page-item"><a class="page-link" href="?page={{ news.next_page_number }}">Next</a></li>{% endif %}
            </ul>
        </nav>
        {% endif %}
    </div>
</section>
{% endblock %}