{% extends "base.html" %}

{% block title %}Informe: {{ pais.nombre }}{% endblock %}

{% block content %}
<header class="monitor-header">
    <a href="{{ url_for('topics.monitor', days=days) }}" class="back-link">← Volver al Monitor</a>
    <div class="header-content">
        <h1>{{ pais.nombre }}</h1>
        <p>Informe de Inteligencia (Últimos {{ days }} días)</p>
    </div>
</header>

<div class="dashboard-layout">

    <!-- Left Column: Top News -->
    <section class="top-news-section">
        <h2><i class="fas fa-newspaper"></i> Noticias de Alto Impacto</h2>
        {% for n in news %}
        <article class="impact-news-card">
            <div class="impact-score">{{ n.impact_score }}</div>
            <div class="content">
                <h3><a href="{{ url_for('noticia.noticia', id=n.id) }}">{{ n.titulo }}</a></h3>
                <div class="meta">
                    <span>{{ n.fecha.strftime('%d/%m %H:%M') }}</span> |
                    <span>{{ n.fuente_nombre }}</span>
                </div>
                <p>{{ n.resumen[:200] }}...</p>
            </div>
        </article>
        {% else %}
        <p>No se han detectado noticias de alto impacto recientemente.</p>
        {% endfor %}
    </section>

    <!-- Right Column: Active Topics -->
    <aside class="topics-sidebar">
        <h2><i class="fas fa-tags"></i> Temas Activos</h2>
        <ul class="topic-ranking">
            {% for t in active_topics %}
            <li>
                <span class="topic-name">{{ t.name }}</span>
                <span class="topic-vol">{{ t.topic_volume }} pts</span>
                <div class="topic-bar"
                    style="width: {% if active_topics|length > 0 %}{{ (t.topic_volume / active_topics[0].topic_volume) * 100 }}{% else %}0{% endif %}%">
                </div>
            </li>
            {% endfor %}
        </ul>
    </aside>

</div>

<style>
    .dashboard-layout {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 40px;
        margin-top: 30px;
    }

    @media (max-width: 768px) {
        .dashboard-layout {
            grid-template-columns: 1fr;
        }
    }

    .monitor-header {
        margin-bottom: 20px;
        border-bottom: 2px solid #eee;
        padding-bottom: 20px;
    }

    .impact-news-card {
        display: flex;
        gap: 20px;
        background: white;
        padding: 20px;
        margin-bottom: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        border-left: 4px solid #e74c3c;
    }

    .impact-score {
        font-size: 1.5rem;
        font-weight: bold;
        color: #e74c3c;
        min-width: 60px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fdeaea;
        border-radius: 50%;
        height: 60px;
    }

    .impact-news-card h3 {
        margin-top: 0;
    }

    .impact-news-card h3 a {
        text-decoration: none;
        color: #2c3e50;
    }

    .topic-ranking {
        list-style: none;
        padding: 0;
    }

    .topic-ranking li {
        margin-bottom: 15px;
        position: relative;
        padding-bottom: 5px;
    }

    .topic-name {
        display: block;
        font-weight: bold;
        z-index: 2;
        position: relative;
    }

    .topic-vol {
        float: right;
        font-size: 0.9rem;
        color: #666;
        z-index: 2;
        position: relative;
    }

    .topic-bar {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 4px;
        background: #3498db;
        border-radius: 2px;
    }
</style>
{% endblock %}