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

{% block title %}{% trans_text 'Actualités' 'News' 'Aktuelles' %} - {{ settings.site_name }}{% endblock %}

{% block content %}
{% trans_text 'Actualités' 'News' 'Aktuelles' as tr_page_title %}
{% trans_text 'Les dernières nouvelles du programme' 'The latest news from the program' 'Die neuesten Nachrichten aus dem Programm' as tr_page_subtitle %}
{% include 'components/breadcrumb.html' with page_title=tr_page_title page_subtitle=tr_page_subtitle %}

<section class="py-16 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid lg:grid-cols-3 gap-8">
            <!-- Main Content -->
            <div class="lg:col-span-2">
                <!-- Featured Article -->
                {% if featured_article %}
                <a href="{% url 'actualite:detail' featured_article.slug %}" class="block mb-8 bg-gray-50 rounded-lg overflow-hidden hover:shadow-lg transition group">
                    {% if featured_article.image %}
                    <img src="{{ featured_article.image.url }}" alt="{{ featured_article.title }}" class="w-full h-64 object-cover group-hover:scale-105 transition duration-300">
                    {% else %}
                    <div class="w-full h-64 bg-gradient-to-br from-primary to-secondary"></div>
                    {% endif %}
                    <div class="p-6">
                        {% if featured_article.category %}
                        <span class="inline-block px-3 py-1 text-sm font-medium rounded" style="background-color: {{ featured_article.category.color }}20; color: {{ featured_article.category.color }}">
                            {{ featured_article.category|translate:'name' }}
                        </span>
                        {% endif %}
                        <h2 class="text-2xl font-bold text-primary mt-3 mb-2 group-hover:text-secondary transition">{{ featured_article|translate:'title' }}</h2>
                        <p class="text-gray-600 mb-4">{{ featured_article.get_excerpt }}</p>
                        <div class="flex items-center text-sm text-gray-500">
                            <span>{{ featured_article.publication_date|date:"d M Y" }}</span>
                            {% if featured_article.author %}
                            <span class="mx-2">|</span>
                            <span>{{ featured_article.author.full_name }}</span>
                            {% endif %}
                        </div>
                    </div>
                </a>
                {% endif %}

                <!-- Category Filters -->
                <div class="mb-8 flex flex-wrap gap-2">
                    <a href="{% url 'actualite:list' %}" class="px-4 py-2 rounded-full text-sm font-medium transition {% if not current_category %}bg-primary text-white{% else %}bg-gray-100 text-gray-600 hover:bg-gray-200{% endif %}">
                        {% trans_text 'Toutes' 'All' 'Alle' %}
                    </a>
                    {% for cat in categories %}
                    <a href="?category={{ cat.slug }}" class="px-4 py-2 rounded-full text-sm font-medium transition {% if current_category == cat.slug %}bg-primary text-white{% else %}bg-gray-100 text-gray-600 hover:bg-gray-200{% endif %}">
                        {{ cat|translate:'name' }}
                    </a>
                    {% endfor %}
                </div>

                <!-- Articles Grid -->
                <div class="grid md:grid-cols-2 gap-6">
                    {% for article in articles %}
                    <a href="{% url 'actualite:detail' article.slug %}" class="bg-gray-50 rounded-lg overflow-hidden hover:shadow-lg transition group">
                        {% if article.image %}
                        <img src="{{ article.image.url }}" alt="{{ article.title }}" class="w-full h-40 object-cover group-hover:scale-105 transition duration-300">
                        {% else %}
                        <div class="w-full h-40 bg-gradient-to-br from-secondary to-primary"></div>
                        {% endif %}
                        <div class="p-4">
                            {% if article.category %}
                            <span class="text-xs px-2 py-1 rounded" style="background-color: {{ article.category.color }}20; color: {{ article.category.color }}">
                                {{ article.category|translate:'name' }}
                            </span>
                            {% endif %}
                            <h3 class="font-semibold text-primary mt-2 mb-2 group-hover:text-secondary transition">{{ article|translate:'title' }}</h3>
                            <p class="text-gray-600 text-sm mb-3">{{ article.get_excerpt }}</p>
                            <span class="text-xs text-gray-400">{{ article.publication_date|date:"d M Y" }}</span>
                        </div>
                    </a>
                    {% empty %}
                    <div class="col-span-full text-center py-12 text-gray-500">
                        {% trans_text 'Aucune actualité disponible pour le moment.' 'No news available at the moment.' 'Derzeit keine Nachrichten verfügbar.' %}
                    </div>
                    {% endfor %}
                </div>

                <!-- Pagination -->
                {% if page_obj.has_other_pages %}
                <div class="mt-8 flex justify-center gap-2">
                    {% if page_obj.has_previous %}
                    <a href="?page={{ page_obj.previous_page_number }}" class="px-4 py-2 bg-gray-100 rounded hover:bg-gray-200 transition">{% trans_text 'Précédent' 'Previous' 'Zurück' %}</a>
                    {% endif %}
                    <span class="px-4 py-2 bg-primary text-white rounded">{{ page_obj.number }}</span>
                    {% if page_obj.has_next %}
                    <a href="?page={{ page_obj.next_page_number }}" class="px-4 py-2 bg-gray-100 rounded hover:bg-gray-200 transition">{% trans_text 'Suivant' 'Next' 'Weiter' %}</a>
                    {% endif %}
                </div>
                {% endif %}
            </div>

            <!-- Sidebar -->
            <div class="lg:col-span-1">
                <!-- Upcoming Events -->
                {% if upcoming_events %}
                <div class="bg-gray-50 rounded-lg p-6 mb-6">
                    <h3 class="font-semibold text-primary mb-4">{% trans_text 'Événements à venir' 'Upcoming Events' 'Kommende Veranstaltungen' %}</h3>
                    <div class="space-y-4">
                        {% for event in upcoming_events %}
                        <a href="{% url 'actualite:event_detail' event.slug %}" class="block hover:bg-gray-100 p-3 -mx-3 rounded transition">
                            <div class="flex items-start">
                                <div class="flex-shrink-0 bg-primary text-white text-center rounded p-2 mr-3">
                                    <div class="text-lg font-bold">{{ event.event_date|date:"d" }}</div>
                                    <div class="text-xs uppercase">{{ event.event_date|date:"M" }}</div>
                                </div>
                                <div>
                                    <h4 class="font-medium text-gray-800 text-sm">{{ event|translate:'title' }}</h4>
                                    <p class="text-xs text-gray-500">{{ event.location|default:"Online" }}</p>
                                </div>
                            </div>
                        </a>
                        {% endfor %}
                    </div>
                    <a href="{% url 'actualite:events' %}" class="block text-center text-secondary text-sm hover:text-primary mt-4 transition">
                        {% trans_text 'Voir tous les événements' 'View all events' 'Alle Veranstaltungen anzeigen' %} &rarr;
                    </a>
                </div>
                {% endif %}

                <!-- Newsletter -->
                <div class="bg-gradient-to-br from-primary to-secondary rounded-lg p-6 text-white">
                    <h3 class="font-semibold mb-2">Newsletter</h3>
                    <p class="text-sm text-gray-200 mb-4">{% trans_text 'Restez informé de nos actualités' 'Stay informed about our news' 'Bleiben Sie über unsere Neuigkeiten informiert' %}</p>
                    <form action="{% url 'contact:newsletter' %}" method="post">
                        {% csrf_token %}
                        <input type="email" name="email" placeholder="{% trans_text 'Votre email' 'Your email' 'Ihre E-Mail' %}" required
                               class="w-full px-4 py-2 bg-white/10 border border-white/20 rounded text-white placeholder-gray-300 mb-3 focus:outline-none focus:border-white">
                        <button type="submit" class="w-full bg-accent text-primary font-medium py-2 rounded hover:bg-yellow-400 transition">
                            {% trans_text "S'inscrire" 'Subscribe' 'Abonnieren' %}
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}