{% for n in noticias %}
{% if n.traduccion_id %}
{% set detalle_url = url_for('noticia.noticia', tr_id=n.traduccion_id) %}
{% else %}
{% set detalle_url = url_for('noticia.noticia', id=n.id) %}
{% endif %}

<article class="noticia-card">
  <div class="noticia-card-image-wrapper">
    <a href="{{ detalle_url }}">
      {% if n.imagen_url %}
      <img src="{{ n.imagen_url }}" alt="{{ n.titulo }}" loading="lazy"
        onerror="this.style.display='none'; this.parentElement.querySelector('.no-image-placeholder').style.display='flex';">
      <div class="no-image-placeholder" style="display:none;"></div>
      {% else %}
      <div class="no-image-placeholder"></div>
      {% endif %}
    </a>
  </div>

  <div class="noticia-card-content">
    <div class="noticia-meta">
      {{ n.fuente_nombre }}
      {% if n.fecha %} &bull; {{ n.fecha|format_date }}{% endif %}
      {% if n.pais %} &bull; {{ n.pais }}{% endif %}
    </div>

    <h3>
      <a href="{{ detalle_url }}">
        {% if use_tr and n.tiene_traduccion %}
        {{ n.titulo_traducido }}
        {% else %}
        {{ n.titulo_original or n.titulo }}
        {% endif %}
      </a>
    </h3>

    <div class="noticia-summary">
      {% if use_tr and n.tiene_traduccion %}
      {{ (n.resumen_traducido or '') | striptags | truncate(200) }}
      {% else %}
      {{ (n.resumen_original or n.resumen) | striptags | truncate(200) }}
      {% endif %}
    </div>

    <div class="noticia-actions">
      <button class="btn-fav" data-id="{{ n.id }}" onclick="toggleFav(this)" title="Guardar">
        <i class="far fa-star"></i>
      </button>
      <a href="{{ detalle_url }}" class="btn btn-sm">Leer más</a>
    </div>
  </div>
</article>
{% else %}
<div style="grid-column: 1 / -1; text-align: center; padding: 50px;">
  <p>No hay noticias para mostrar.</p>
</div>
{% endfor %}

{# Pagination Logic #}
{% if total_pages and total_pages > 1 %}
<div
  style="grid-column: 1 / -1; margin-top: 30px; text-align: center; padding-top: 20px; border-top: 1px solid var(--border-color);">
  {% set current = page %}
  {% if current > 1 %}
  <button class="btn" data-page="{{ current - 1 }}"
    onclick="setPage(this.getAttribute('data-page')); cargarNoticias(true);">Newer</button>
  {% endif %}

  <span style="margin: 0 15px; font-weight: bold; font-family: var(--secondary-font);">
    Page {{ current }} of {{ total_pages }}
  </span>

  {% if current < total_pages %} <button class="btn" data-page="{{ current + 1 }}"
    onclick="setPage(this.getAttribute('data-page')); cargarNoticias(true);">
    Older</button>
    {% endif %}
</div>
{% endif %}