{% extends "base.html" %}

{% block title %}Últimas Noticias RSS{% endblock %}

{% block content %}
    <header>
        <h1>Agregador de Noticias</h1>
        <p class="subtitle">Tus fuentes de información, en un solo lugar.</p>
    <a href="{{ url_for('dashboard') }}" class="top-link" style="margin-top:15px;">⚙️ Gestionar Feeds</a>
    </header>

    <div class="card">
        <h2>Filtrar Noticias</h2>
        <form method="get" action="{{ url_for('home') }}">
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; align-items: flex-end;">
                <div>
                    <label for="categoria_id">Categoría</label>
                    <select name="categoria_id" id="categoria_id">
                        <option value="">— Todas —</option>
                        {% for cat in categorias %}
                            <option value="{{ cat.id }}" {% if cat_id == cat.id %}selected{% endif %}>{{ cat.nombre }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label for="continente_id">Continente</label>
                    <select name="continente_id" id="continente_id" onchange="filtrarPaises()">
                        <option value="">— Todos —</option>
                        {% for cont in continentes %}
                            <option value="{{ cont.id }}" {% if cont_id == cont.id %}selected{% endif %}>{{ cont.nombre }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label for="pais_id">País</label>
                    <select name="pais_id" id="pais_id">
                        <option value="">— Todos —</option>
                        {# El JavaScript llenará esto dinámicamente, pero mostramos el seleccionado si existe #}
                        {% for pais in paises %}
                            {% if pais_id == pais.id %}
                                <option value="{{ pais.id }}" selected>{{ pais.nombre }}</option>
                            {% endif %}
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <button type="submit" class="btn">Filtrar</button>
                </div>
            </div>
        </form>
    </div>

    <div class="noticias-list">
        {% for noticia in noticias %}
            <article class="noticia-item">
                {% if noticia.imagen_url %}
                <div class="noticia-imagen">
                    <a href="{{ noticia.url }}" target="_blank" rel="noopener noreferrer"><img src="{{ noticia.imagen_url }}" alt="{{ noticia.titulo }}"></a>
                </div>
                {% endif %}
                <div class="noticia-texto">
                    <h3><a href="{{ noticia.url }}" target="_blank" rel="noopener noreferrer">{{ noticia.titulo }}</a></h3>
                    <div class="noticia-meta">
                        <span>🗓️ {{ noticia.fecha.strftime('%d-%m-%Y %H:%M') if noticia.fecha else 'Fecha no disponible' }}</span> | 
                        <span>{{ noticia.categoria or 'N/A' }}</span> | 
                        <span>{{ noticia.pais or 'Global' }}</span>
                    </div>
                    <p>{{ noticia.resumen | striptags | safe_html | truncate(280) }}</p>
                </div>
            </article>
        {% else %}
            <div class="card" style="text-align:center;">
                <p>No hay noticias que mostrar con los filtros seleccionados.</p>
            </div>
        {% endfor %}
    </div>

    <script type="application/json" id="paises-data">{{ paises | tojson }}</script>
    <script>
        const todosLosPaises = JSON.parse(document.getElementById('paises-data').textContent);
        const continenteSelect = document.getElementById('continente_id');
        const paisSelect = document.getElementById('pais_id');
        const paisSeleccionadoId = '{{ pais_id or '' }}';

        function filtrarPaises() {
            const continenteId = continenteSelect.value;
            // Guardamos el valor actual por si necesitamos restaurarlo
            const valorActualPais = paisSelect.value;
            
            paisSelect.innerHTML = '<option value="">— Todos —</option>'; // Opción por defecto

            if (todosLosPaises) {
                todosLosPaises.forEach(pais => {
                    if (!continenteId || pais.continente_id == continenteId) {
                        const option = document.createElement('option');
                        option.value = pais.id;
                        option.textContent = pais.nombre;
                        // Si el ID del país coincide con el que estaba seleccionado, lo volvemos a seleccionar
                        if (pais.id == valorActualPais || pais.id == paisSeleccionadoId) {
                            option.selected = true;
                        }
                        paisSelect.appendChild(option);
                    }
                });
            }
        }

        // Ejecutamos la función una vez al cargar la página para inicializar el select de países
        // según el continente que ya esté seleccionado.
        document.addEventListener('DOMContentLoaded', filtrarPaises);
    </script>
{% endblock %}