{% extends "base.html" %}
{% block title %}
  {% if pais_nombre %}
    Eventos en {{ pais_nombre }}
  {% else %}
    Eventos por país
  {% endif %}
{% endblock %}

{% block content %}
<div class="card">
  <h2><i class="fas fa-globe-europe" style="color: var(--secondary-color); margin-right: 8px;"></i>Eventos por país</h2>

  <form method="get" action="{{ url_for('eventos_pais') }}" id="form-eventos-pais">
    <div style="display: flex; gap: 15px; align-items: flex-end; flex-wrap: wrap;">
      <div style="min-width: 220px;">
        <label for="pais_id">Selecciona un país</label>
        <select name="pais_id" id="pais_id">
          <option value="">— Elegir país —</option>
          {% for p in paises %}
            <option value="{{ p.id }}" {% if pais_id == p.id %}selected{% endif %}>
              {{ p.nombre }}
            </option>
          {% endfor %}
        </select>
      </div>

      <div>
        <button type="submit" class="btn"><i class="fas fa-filter"></i> Ver eventos</button>
        {% if pais_id %}
          <a href="{{ url_for('eventos_pais') }}" class="btn btn-secondary btn-small">
            <i class="fas fa-eraser"></i> Limpiar
          </a>
        {% endif %}
      </div>
    </div>
  </form>
</div>

{% if not pais_id %}
  <div class="card">
    <p>Selecciona un país para ver los eventos agregados de sus noticias.</p>
  </div>
{% else %}

  <div class="card" style="margin-top: 16px;">
    <div class="noticia-meta" style="margin-bottom: 0;">
      <i class="fas fa-flag"></i>
      País: <strong>{{ pais_nombre or 'N/D' }}</strong>
      {% if total_eventos %}
        | <i class="fas fa-stream"></i> Eventos detectados: <strong>{{ total_eventos }}</strong>
      {% endif %}
    </div>
  </div>

  {% if eventos and eventos|length %}
    <ul class="noticias-list" style="margin-top: 16px;">
      {% for e in eventos %}
        {% set lista = noticias_por_evento.get(e.id) or [] %}
        {% set primera = lista[0] if lista else None %}

        <li class="noticia-item">
          {% if primera and primera.imagen_url %}
            <div class="noticia-imagen">
              <a href="{{ primera.url }}" target="_blank" rel="noopener noreferrer">
                <img src="{{ primera.imagen_url }}" alt="Imagen del evento" loading="lazy">
              </a>
            </div>
          {% endif %}

          <div class="noticia-texto">
            <h3 class="m0">
              {{ e.titulo or (primera.titulo_trad or primera.titulo_orig if primera else 'Evento') }}
              {% if e.n_noticias %}
                <span class="badge badge-secondary" title="Número de noticias agrupadas">
                  {{ e.n_noticias }} noticias
                </span>
              {% endif %}
            </h3>

            <div class="noticia-meta">
              {% if e.fecha_inicio %}
                <i class="far fa-calendar-alt"></i>
                {% if e.fecha_inicio is string %}
                  {{ e.fecha_inicio }}
                {% else %}
                  {{ e.fecha_inicio.strftime('%d-%m-%Y') }}
                {% endif %}
              {% endif %}
              {% if e.fecha_fin and e.fecha_fin != e.fecha_inicio %}
                – 
                {% if e.fecha_fin is string %}
                  {{ e.fecha_fin }}
                {% else %}
                  {{ e.fecha_fin.strftime('%d-%m-%Y') }}
                {% endif %}
              {% endif %}
              {% if e.pais_nombre %}
                | <i class="fas fa-globe-americas"></i> {{ e.pais_nombre }}
              {% endif %}
            </div>

            {% if primera %}
              {% set titulo_tr = primera.titulo_trad %}
              {% set resumen_tr = primera.resumen_trad %}
              {% set titulo_orig = primera.titulo_orig %}
              {% set resumen_orig = primera.resumen_orig %}

              <div class="resumen-container">
                {% if titulo_tr or resumen_tr %}
                  <div class="m0" style="margin-bottom:6px;">
                    <a href="{{ primera.url }}" target="_blank" rel="noopener noreferrer">
                      {{ titulo_tr or titulo_orig }}
                    </a>
                    <span class="badge" title="Traducción">{{ (lang or 'es')|upper }}</span>
                  </div>
                  {% if resumen_tr %}
                    <div class="resumen-corto">
                      {{ resumen_tr|safe_html|truncate(280, True) }}
                    </div>
                    <div class="resumen-completo" style="display:none;">
                      {{ resumen_tr|safe_html }}
                    </div>
                    {% if resumen_tr|length > 280 %}
                      <button class="ver-mas-btn" type="button">Ver más</button>
                    {% endif %}
                  {% else %}
                    <div class="resumen-corto">
                      {{ (resumen_orig or '')|safe_html|truncate(280, True) }}
                    </div>
                    <div class="resumen-completo" style="display:none;">
                      {{ (resumen_orig or '')|safe_html }}
                    </div>
                    {% if (resumen_orig or '')|length > 280 %}
                      <button class="ver-mas-btn" type="button">Ver más</button>
                    {% endif %}
                  {% endif %}
                {% else %}
                  <div class="m0" style="margin-bottom:6px;">
                    <a href="{{ primera.url }}" target="_blank" rel="noopener noreferrer">
                      {{ titulo_orig }}
                    </a>
                    <span class="badge badge-secondary">ORIG</span>
                  </div>
                  {% if resumen_orig %}
                    <div class="resumen-corto">
                      {{ resumen_orig|safe_html|truncate(280, True) }}
                    </div>
                    <div class="resumen-completo" style="display:none;">
                      {{ resumen_orig|safe_html }}
                    </div>
                    {% if resumen_orig|length > 280 %}
                      <button class="ver-mas-btn" type="button">Ver más</button>
                    {% endif %}
                  {% endif %}
                {% endif %}
              </div>

              {% if lista|length > 1 %}
                <div style="margin-top:8px; font-size:0.85rem; color:var(--text-color-light);">
                  Otras fuentes de este evento:
                  <ul style="padding-left:18px; margin:4px 0 0 0;">
                    {% for n in lista[1:4] %}
                      <li>
                        <a href="{{ n.url }}" target="_blank" rel="noopener noreferrer">
                          {{ n.titulo_trad or n.titulo_orig }}
                        </a>
                        {% if n.fuente_nombre %}
                          <span class="mini-link">({{ n.fuente_nombre }})</span>
                        {% endif %}
                      </li>
                    {% endfor %}
                    {% if lista|length > 4 %}
                      <li>… y otras {{ lista|length - 4 }} noticias</li>
                    {% endif %}
                  </ul>
                </div>
              {% endif %}
            {% endif %}
          </div>
        </li>
      {% endfor %}
    </ul>

    {% if total_pages and total_pages > 1 %}
      <nav class="pagination" aria-label="Paginación de eventos" style="margin-top:15px;">
        {% set current = page %}
        {% if current > 1 %}
          <a href="{{ url_for('eventos_pais', pais_id=pais_id, page=current-1) }}" class="page-link">&laquo; Anterior</a>
        {% endif %}
        {% set start = 1 if current - 2 < 1 else current - 2 %}
        {% set end = total_pages if current + 2 > total_pages else current + 2 %}
        {% if start > 1 %}
          <a href="{{ url_for('eventos_pais', pais_id=pais_id, page=1) }}" class="page-link">1</a>
          {% if start > 2 %}<span class="page-link">…</span>{% endif %}
        {% endif %}
        {% for p in range(start, end + 1) %}
          {% if p == current %}
            <span class="page-link active">{{ p }}</span>
          {% else %}
            <a href="{{ url_for('eventos_pais', pais_id=pais_id, page=p) }}" class="page-link">{{ p }}</a>
          {% endif %}
        {% endfor %}
        {% if end < total_pages %}
          {% if end < total_pages - 1 %}<span class="page-link">…</span>{% endif %}
          <a href="{{ url_for('eventos_pais', pais_id=pais_id, page=total_pages) }}" class="page-link">{{ total_pages }}</a>
        {% endif %}
        {% if current < total_pages %}
          <a href="{{ url_for('eventos_pais', pais_id=pais_id, page=current+1) }}" class="page-link">Siguiente &raquo;</a>
        {% endif %}
      </nav>
    {% endif %}
  {% else %}
    <div class="card" style="margin-top:16px;">
      <p>No se han encontrado eventos para este país.</p>
    </div>
  {% endif %}
{% endif %}
{% endblock %}