rss/templates/_noticias_list.html

<ul class="noticias-list">
  {% for noticia in noticias %}
  <li 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="Imagen para {{ noticia.titulo }}" loading="lazy">
      </a>
    </div>
    {% endif %}

    <div class="noticia-texto">
      <h3 style="margin:0 0 6px 0;">
        <a href="{{ noticia.url }}" target="_blank" rel="noopener noreferrer">{{ noticia.titulo }}</a>
        {% if use_tr %}
          <span class="badge" title="Mostrando traducciones por defecto" style="margin-left:8px;">Traducido</span>
        {% endif %}
      </h3>

      <div class="noticia-meta">
        <span>
          <i class="far fa-calendar-alt"></i>
          {% if noticia.fecha %}
            {% if noticia.fecha is string %}
              {{ noticia.fecha }}
            {% else %}
              {{ noticia.fecha.strftime('%d-%m-%Y %H:%M') }}
            {% endif %}
          {% else %}
            N/D
          {% endif %}
        </span>
        {% if noticia.fuente_nombre %}
          | <span><i class="fas fa-newspaper"></i> <strong>{{ noticia.fuente_nombre }}</strong></span>
        {% endif %}
        {% if noticia.categoria %}
          | <span><i class="fas fa-tag"></i> {{ noticia.categoria }}</span>
        {% endif %}
        {% if noticia.pais %}
          | <span><i class="fas fa-globe-americas"></i> {{ noticia.pais }}</span>
        {% endif %}
      </div>

      <div class="resumen-container">
        {% set resumen_txt = noticia.resumen | safe_html %}
        <div class="resumen-corto">
          {{ resumen_txt | truncate(280, True) }}
        </div>
        <div class="resumen-completo" style="display:none;">
          {{ resumen_txt }}
        </div>
        {% if noticia.resumen and noticia.resumen|length > 280 %}
          <button class="ver-mas-btn" type="button">Ver más</button>
        {% endif %}
      </div>
    </div>
  </li>
  {% else %}
  <li class="text-center p-4">
    <i class="fas fa-info-circle"></i> No hay noticias que mostrar con los filtros seleccionados.
  </li>
  {% endfor %}
</ul>

{# Resumen y paginación #}
{% if total_results and total_results > 0 %}
  <div style="text-align:center; margin-top:10px; color: var(--text-color-light);">
    {% set start_i = (page - 1) * per_page + 1 %}
    {% set end_i = (page - 1) * per_page + (noticias|length) %}
    Mostrando {{ start_i }}–{{ end_i }} de {{ total_results }}
  </div>
{% endif %}

{% if total_pages and total_pages > 1 %}
<nav class="pagination" aria-label="Paginación de noticias" style="margin-top:15px;">
  {% set current = page %}

  {# Anterior #}
  {% if current > 1 %}
    <a href="#" class="page-link" data-page="{{ current - 1 }}">&laquo; Anterior</a>
  {% endif %}

  {# Ventana de páginas (máx 5 alrededor) #}
  {% 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="#" class="page-link" data-page="1">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="#" class="page-link" data-page="{{ p }}">{{ p }}</a>
    {% endif %}
  {% endfor %}

  {% if end < total_pages %}
    {% if end < total_pages - 1 %}<span class="page-link">…</span>{% endif %}
    <a href="#" class="page-link" data-page="{{ total_pages }}">{{ total_pages }}</a>
  {% endif %}

  {# Siguiente #}
  {% if current < total_pages %}
    <a href="#" class="page-link" data-page="{{ current + 1 }}">Siguiente &raquo;</a>
  {% endif %}
</nav>
{% endif %}

{# Toggle "Ver más / Ver menos" con delegación; se liga una sola vez #}
<script>
(function () {
  if (window.__noticiasToggleBound) return;
  window.__noticiasToggleBound = true;

  const container = document.getElementById('noticias-container') || document;
  container.addEventListener('click', function (e) {
    const btn = e.target.closest('.ver-mas-btn');
    if (!btn) return;

    const wrap = btn.closest('.resumen-container');
    if (!wrap) return;

    const corto = wrap.querySelector('.resumen-corto');
    const completo = wrap.querySelector('.resumen-completo');
    if (!corto || !completo) return;

    const expanded = completo.style.display === 'block';
    completo.style.display = expanded ? 'none' : 'block';
    corto.style.display = expanded ? 'block' : 'none';
    btn.textContent = expanded ? 'Ver más' : 'Ver menos';
  });
})();
</script>