{% extends "base.html" %}

{% block title %}Timeline: {{ conflict.name }}{% endblock %}

{% block content %}
<div style="margin-bottom: 2rem;">
    <div style="display: flex; justify-content: space-between; align-items: center;">
        <h2>
            <a href="{{ url_for('conflicts.index') }}" style="text-decoration: none; color: inherit;">
                <i class="fas fa-arrow-left" style="font-size: 1rem; vertical-align: middle;"></i>
            </a>
            Timeline: {{ conflict.name }}
        </h2>
        <span class="badge" style="font-size: 1rem;">{{ noticias|length }} eventos</span>
    </div>
    <p style="color: #666;">
        Keywords: {{ conflict.keywords }}
    </p>
</div>

{% if not noticias %}
<div class="card" style="text-align: center; padding: 3rem;">
    <p>No se encontraron noticias recientes con las palabras clave especificadas.</p>
</div>
{% else %}

<div class="timeline">
    {% for n in noticias %}
    <div class="timeline-item">
        <div class="timeline-date">
            {% if n.fecha %}
            <span class="date-day">{{ n.fecha.strftime('%d') }}</span>
            <span class="date-month">{{ n.fecha.strftime('%b') }}</span>
            <span class="date-year">{{ n.fecha.strftime('%Y') }}</span>
            {% endif %}
        </div>
        <div class="timeline-marker"></div>
        <div class="timeline-content card">
            {% if n.imagen_url %}
            <div class="timeline-img">
                <img src="{{ n.imagen_url }}" loading="lazy" onerror="this.style.display='none'">
            </div>
            {% endif %}

            <h3>
                <a
                    href="{{ url_for('noticia.noticia', tr_id=n.tr_id if n.tr_id else None, id=n.id if not n.tr_id else None) }}">
                    {{ n.titulo }}
                </a>
            </h3>

            <div class="noticia-meta">
                {{ n.fuente_nombre }}
                {% if n.pais %}| {{ n.pais }}{% endif %}
            </div>

            <p>{{ (n.resumen or '') | safe_html | truncate(150) }}</p>
        </div>
    </div>
    {% endfor %}
</div>

{% endif %}

<style>
    /* Timeline Styles */
    .timeline {
        position: relative;
        max-width: 900px;
        margin: 0 auto;
        padding: 20px 0;
    }

    /* Vertical Line */
    .timeline::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 80px;
        /* Position of line */
        width: 2px;
        background: var(--border-color);
    }

    .timeline-item {
        position: relative;
        margin-bottom: 40px;
        padding-left: 120px;
        /* Space for date and line */
    }

    .timeline-date {
        position: absolute;
        left: 0;
        top: 0;
        width: 60px;
        text-align: center;
        line-height: 1.2;
    }

    .date-day {
        display: block;
        font-size: 1.5rem;
        font-weight: bold;
        color: var(--accent-color);
    }

    .date-month {
        display: block;
        font-size: 0.9rem;
        text-transform: uppercase;
        font-weight: bold;
    }

    .date-year {
        display: block;
        font-size: 0.8rem;
        color: #888;
    }

    .timeline-marker {
        position: absolute;
        left: 74px;
        /* On the line (80px - 6px radius) */
        top: 10px;
        width: 14px;
        height: 14px;
        background: var(--paper-color);
        border: 3px solid var(--accent-color);
        border-radius: 50%;
        z-index: 1;
    }

    .timeline-content {
        position: relative;
        padding: 1.5rem;
        border-left: 4px solid var(--accent-color);
    }

    .timeline-content h3 {
        font-size: 1.3rem;
        margin-top: 0;
    }

    .timeline-img img {
        width: 100%;
        height: 150px;
        object-fit: cover;
        border-radius: 4px;
        margin-bottom: 10px;
    }

    /* Dark Mode Overrides */
    .dark-mode .timeline::before {
        background: #444;
    }

    .dark-mode .timeline-marker {
        background: #1a1a2e;
    }
</style>
{% endblock %}