{% extends "base.html" %}
{% block title %}Gestión de Feeds RSS{% endblock %}
{% block content %}
  <h1>Gestión de Feeds RSS</h1>
  <a href="/" class="top-link">← Volver a últimas noticias</a>

  <div class="card">
    <h2>Añadir un nuevo feed</h2>
    <form action="/add" method="post" autocomplete="off">
      <label for="nombre">Nombre del feed</label>
      <input id="nombre" name="nombre" placeholder="Nombre del feed" required>

      <label for="descripcion">Descripción</label>
      <textarea id="descripcion" name="descripcion" placeholder="Breve descripción del feed" rows="2"></textarea>

      <label for="url">URL del RSS</label>
      <input id="url" name="url" placeholder="URL del RSS" required>

      <label for="categoria_id">Categoría</label>
      <select id="categoria_id" name="categoria_id" required>
        <option value="">— Elige categoría —</option>
        {% for cid, cnom in categorias %}
          <option value="{{ cid }}">{{ cnom }}</option>
        {% endfor %}
      </select>

      <label for="continente_id">Continente</label>
      <select name="continente_id" id="continente_id" onchange="filtrarPaisesPorContinente()">
        <option value="">— Elige continente —</option>
        {% for coid, conom in continentes %}
          <option value="{{ coid }}">{{ conom }}</option>
        {% endfor %}
      </select>

      <label for="pais_id">País</label>
      <select name="pais_id" id="pais_id">
        <option value="">— N/A —</option>
        {% for pid, pnom, contid in paises %}
          <option value="{{ pid }}">{{ pnom }}</option>
        {% endfor %}
      </select>

      <!-- Nuevo campo: idioma -->
      <label for="idioma">Idioma</label>
      <input id="idioma" name="idioma" maxlength="2" placeholder="Ej: es, en, fr">

      <button class="btn" type="submit">Añadir</button>
      <!-- Datos en JSON para el filtro dinámico de países -->
      <script type="application/json" id="paises-data">{{ paises|tojson }}</script>
    </form>
  </div>

  <div class="card">
    <h2>Lista de Feeds</h2>
    <a href="/backup_feeds" target="_blank" class="btn">⬇️ Descargar backup de feeds (CSV)</a>
    <a href="/restore_feeds" class="btn" style="margin-left:10px;">🔄 Restaurar feeds desde backup</a>
    <table>
      <thead>
        <tr>
          <th>Nombre y descripción</th>
          <th>URL</th>
          <th>Categoría</th>
          <th>País</th>
          <th style="min-width: 80px;">Estado</th>
          <th style="min-width: 60px;">Fallos</th>
          <th>Acciones</th>
        </tr>
      </thead>
      <tbody>
        {% for id, nombre, descripcion, url, categoria_id, pais_id, activo, fallos, cat_nom, pais_nom in feeds %}
        <tr>
          <td>
            <strong>{{ nombre }}</strong>
            {% if descripcion %}
              <div style="font-size:0.95em; color:#64748b;">{{ descripcion }}</div>
            {% endif %}
          </td>
          <td><a href="{{ url }}" target="_blank">{{ url }}</a></td>
          <td>{{ cat_nom or 'N/A' }}</td>
          <td>{{ pais_nom or 'N/A' }}</td>
          <td>
            {% if not activo %}
              <span class="badge-ko" title="Inactivo: {{ fallos }} fallos">KO</span>
            {% elif fallos > 0 %}
              <span class="badge-warn" title="{{ fallos }} fallos recientes">⚠️</span>
            {% else %}
              <span class="badge-ok">OK</span>
            {% endif %}
          </td>
          <td>
            {% if fallos > 0 %}
              <span style="color:orange;">{{ fallos }}</span>
            {% else %}
              0
            {% endif %}
          </td>
          <td class="actions">
            <a href="/edit/{{ id }}">Editar</a> |
            <a href="/delete/{{ id }}" onclick="return confirm('¿Seguro que quieres eliminar este feed?');">Eliminar</a>
            {% if not activo %}
              | <a href="/reactivar_feed/{{ id }}" style="color:#198754;" title="Reactivar feed">Reactivar</a>
            {% endif %}
          </td>
        </tr>
        {% else %}
        <tr>
          <td colspan="7">No hay feeds aún.</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <a href="/" class="top-link">← Volver a últimas noticias</a>

  <script>
    function filtrarPaisesPorContinente() {
      const continenteId = document.getElementById('continente_id').value;
      const paises = JSON.parse(document.getElementById('paises-data').textContent);
      const selectPais = document.getElementById('pais_id');
      selectPais.innerHTML = '';
      // Opción N/A siempre presente
      const optionNA = document.createElement('option');
      optionNA.value = '';
      optionNA.textContent = '— N/A —';
      selectPais.appendChild(optionNA);
      paises.forEach(([id, nombre, contId]) => {
        if (!continenteId || contId == continenteId || contId == Number(continenteId)) {
          const opt = document.createElement('option');
          opt.value = id;
          opt.textContent = nombre;
          selectPais.appendChild(opt);
        }
      });
    }
  </script>
{% endblock %}