{% extends "base.html" %}
{% block title %}Últimas Traducciones{% endblock %}

{% block content %}
<div class="card">
    <h2><i class="fas fa-language" style="color: var(--accent-color); margin-right: 10px;"></i>Últimas Traducciones</h2>
    <p style="color: #666; margin-bottom: 20px;">
        Mostrando las {{ traducciones|length }} traducciones más recientes de un total de {{ total }}.
    </p>
</div>

<div id="traducciones-grid" style="margin-top: 20px;">
    {% for t in traducciones %}
    <article class="noticia-card">
        {% if t.imagen %}
        <img src="{{ t.imagen }}" alt="{{ t.titulo_trad }}" onerror="this.src='/static/placeholder.svg'; this.onerror=null;">
        {% else %}
        <img src="/static/placeholder.svg" alt="Sin imagen">
        {% endif %}
        
        <div class="noticia-meta">
            <span class="lang-badge">{{ t.lang_from|upper }} → {{ t.lang_to|upper }}</span>
            {% if t.categoria_nombre %}
            <span class="category-badge">{{ t.categoria_nombre }}</span>
            {% endif %}
            {% if t.pais_nombre %}
            • {{ t.pais_nombre }}
            {% endif %}
        </div>
        
        <h3>
            <a href="{{ t.link }}" target="_blank" rel="noopener">{{ t.titulo_trad or 'Sin título' }}</a>
        </h3>
        
        <p class="noticia-summary">
            {{ t.resumen_trad[:300] }}{% if t.resumen_trad|length > 300 %}...{% endif %}
        </p>
        
        <div class="noticia-footer">
            <small>
                <i class="fas fa-rss"></i> {{ t.feed_nombre or 'Desconocido' }}
                • <i class="fas fa-clock"></i> {{ t.updated_at|format_date if t.updated_at else 'Fecha desconocida' }}
            </small>
        </div>
    </article>
    {% else %}
    <div class="card" style="text-align: center; padding: 40px;">
        <i class="fas fa-inbox fa-3x" style="color: #ccc; margin-bottom: 20px;"></i>
        <p>No hay traducciones disponibles aún.</p>
    </div>
    {% endfor %}
</div>

{% if total_pages > 1 %}
<div class="pagination" style="margin-top: 30px; text-align: center;">
    {% if page > 1 %}
    <a href="?page={{ page - 1 }}&per_page={{ per_page }}" class="btn btn-secondary">
        <i class="fas fa-chevron-left"></i> Anterior
    </a>
    {% endif %}
    
    <span style="margin: 0 20px;">Página {{ page }} de {{ total_pages }}</span>
    
    {% if page < total_pages %}
    <a href="?page={{ page + 1 }}&per_page={{ per_page }}" class="btn">
        Siguiente <i class="fas fa-chevron-right"></i>
    </a>
    {% endif %}
</div>
{% endif %}

<style>
#traducciones-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 25px;
}

.lang-badge {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
}

.category-badge {
    background: var(--accent-color);
    color: white;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    margin-left: 8px;
}

.noticia-footer {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
    color: #888;
    font-size: 0.85rem;
}

.pagination .btn {
    margin: 0 5px;
}
</style>
{% endblock %}