{% extends "base.html" %}
{% block title %}Lista Detallada de Feeds{% endblock %}

{% block content %}
<header>
    <h1>Lista de Feeds</h1>
    <p class="subtitle">Mostrando {{ feeds|length }} de {{ total_feeds }} feeds. Página {{ page }} de {{ total_pages }}.</p>
    <a href="{{ url_for('dashboard') }}" class="top-link" style="margin-top:15px;">← Volver al Dashboard</a>
</header>

{% if total_pages > 1 %}
<nav class="pagination">
    {% if page > 1 %}
        <a href="{{ url_for('manage_feeds', page=page-1) }}" class="page-link">&laquo; Anterior</a>
    {% endif %}
    
    {% for p in range(1, total_pages + 1) %}
        {% if p == page %}
            <a href="#" class="page-link active">{{ p }}</a>
        {% else %}
            <a href="{{ url_for('manage_feeds', page=p) }}" class="page-link">{{ p }}</a>
        {% endif %}
    {% endfor %}

    {% if page < total_pages %}
        <a href="{{ url_for('manage_feeds', page=page+1) }}" class="page-link">Siguiente &raquo;</a>
    {% endif %}
</nav>
{% endif %}

{% for feed in feeds %}
<div class="card feed-detail-card">
    <div class="feed-header">
        <h2>{{ feed.nombre }}</h2>
        <div class="actions">
            <a href="{{ url_for('edit_feed', feed_id=feed.id) }}" class="btn btn-small">Editar</a>
        </div>
    </div>
    <div class="feed-body">
        <dl>
            <dt>ID:</dt><dd>{{ feed.id }}</dd>
            <dt>URL:</dt><dd><a href="{{ feed.url }}" target="_blank" rel="noopener">{{ feed.url }}</a></dd>
            <dt>Descripción:</dt><dd>{{ feed.descripcion or 'N/A' }}</dd>
            <dt>Idioma:</dt><dd>{{ feed.idioma or 'N/D' }}</dd>
            <dt>Estado:</dt><dd>
                {% if feed.activo %}
                    <span style="color: #27ae60; font-weight:bold;">Activo</span>
                {% else %}
                    <span style="color: #c0392b; font-weight: bold;">Inactivo</span>
                {% endif %}
            </dd>
            <dt>Fallos:</dt><dd>{{ feed.fallos }}</dd>
        </dl>
    </div>
</div>
{% endfor %}

{% if not feeds %}
<div class="card" style="text-align:center;">
    <p>No hay feeds para mostrar.</p>
</div>
{% endif %}

{% endblock %}