{% from "components/_tabs.html" import tabs_intro %}
<header class="page-heading">
  <p class="eyebrow">MEMORIA IMPERIAL</p>
  <h1>Historia del universo</h1>
  <p>Consulta guerras, tratados, colonizaciones, proyectos, elecciones, encuentros y cualquier informe persistente. Las instantáneas permiten comparar dos fechas.</p>
</header>
<div data-tab-scope="timeline" data-tab-auto>
{{ tabs_intro('timeline', 'Apartados de la historia', 'Consulta novedades, filtros, comparaciones, acontecimientos y marcadores por separado.') }}

<section class="panel" aria-labelledby="since-title">
  <h2 id="since-title">Qué cambió desde tu última visita</h2>
  {% if since_last_visit %}
    <ul>{% for row in since_last_visit %}<li>{{ row.n }} {{ row.category }}</li>{% endfor %}</ul>
  {% else %}<p>No hay acontecimientos nuevos desde la última consulta de esta cronología.</p>{% endif %}
</section>

<section class="panel" aria-labelledby="timeline-filter-title">
  <h2 id="timeline-filter-title">Filtrar cronología</h2>
  <form method="get" action="{{ url_for('game_view', section='timeline') }}" class="form-grid">
    <label>Categoría
      <select name="category"><option value="">Todas</option>{% for row in timeline_categories %}<option value="{{ row.category }}" {% if timeline_filters.category == row.category %}selected{% endif %}>{{ row.category }} ({{ row.n }})</option>{% endfor %}</select>
    </label>
    <label>Período
      <select name="period"><option value="all">Todo</option><option value="day" {% if timeline_filters.period == 'day' %}selected{% endif %}>Último día</option><option value="week" {% if timeline_filters.period == 'week' %}selected{% endif %}>Última semana</option><option value="month" {% if timeline_filters.period == 'month' %}selected{% endif %}>Último mes</option></select>
    </label>
    <label>Planeta
      <select name="timeline_planet"><option value="">Todos</option>{% for item in planets %}<option value="{{ item.id }}" {% if timeline_filters.planet == item.id %}selected{% endif %}>{{ item.name }}</option>{% endfor %}</select>
    </label>
    <button class="button" type="submit">Aplicar filtros</button>
  </form>
</section>

<section class="panel" aria-labelledby="snapshots-title">
  <h2 id="snapshots-title">Instantáneas y comparación</h2>
  <form method="post" action="{{ url_for('timeline_snapshot_action') }}" class="inline-form">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <label>Nombre de la instantánea <input name="label" maxlength="60" placeholder="Antes de la guerra"></label>
    <button class="button" type="submit">Guardar estado actual</button>
  </form>
  {% if timeline_snapshots %}
    <form method="get" action="{{ url_for('game_view', section='timeline') }}" class="form-grid">
      <label>Desde
        <select name="snapshot_from" required>{% for snap_item in timeline_snapshots %}<option value="{{ snap_item.id }}">{{ snap_item.label }} · {{ snap_item.created_at|date_label }}</option>{% endfor %}</select>
      </label>
      <label>Hasta
        <select name="snapshot_to" required>{% for snap_item in timeline_snapshots %}<option value="{{ snap_item.id }}">{{ snap_item.label }} · {{ snap_item.created_at|date_label }}</option>{% endfor %}</select>
      </label>
      <button class="button" type="submit">Comparar</button>
    </form>
  {% endif %}
  {% if snapshot_comparison %}
    <div class="table-wrap"><table><caption>Cambios entre {{ snapshot_comparison.from.label }} y {{ snapshot_comparison.to.label }}</caption><thead><tr><th>Magnitud</th><th>Cambio</th></tr></thead><tbody>
      {% for key, amount in snapshot_comparison.resources.items() %}<tr><th scope="row">{{ key }}</th><td>{{ '+' if amount >= 0 else '' }}{{ amount|number }}</td></tr>{% endfor %}
      <tr><th scope="row">Puntuación</th><td>{{ snapshot_comparison.score }}</td></tr>
      <tr><th scope="row">Planetas</th><td>{{ snapshot_comparison.planets }}</td></tr>
      <tr><th scope="row">Flotas</th><td>{{ snapshot_comparison.fleets }}</td></tr>
      <tr><th scope="row">Población</th><td>{{ snapshot_comparison.population|number }}</td></tr>
    </tbody></table></div>
  {% endif %}
</section>

<section class="panel" aria-labelledby="entries-title">
  <h2 id="entries-title">Acontecimientos</h2>
  {% if timeline_entries %}
    <ol class="report-list">{% for entry in timeline_entries %}<li><article>
      <header><span class="tag">{{ entry.category }}</span><time datetime="{{ entry.created_at|date_iso }}">{{ entry.created_at|date_label }}</time><h3>{{ entry.title }}</h3></header>
      <p>{{ entry.detail }}</p>
      <form method="post" action="{{ url_for('timeline_marker_action') }}" class="inline-form">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"><input type="hidden" name="entry_id" value="{{ entry.id }}">
        <label>Etiqueta <input name="label" maxlength="60" value="Recordar"></label><label>Nota <input name="note" maxlength="500"></label>
        <button class="button button-small" type="submit">Crear marcador permanente</button>
      </form>
    </article></li>{% endfor %}</ol>
  {% else %}<p>No hay entradas que coincidan con los filtros.</p>{% endif %}
</section>

{% if timeline_markers %}<section class="panel" aria-labelledby="markers-title"><h2 id="markers-title">Marcadores permanentes</h2><dl class="compact-definition-list">{% for marker in timeline_markers %}<div><dt>{{ marker.label }}</dt><dd>{{ marker.title or 'Entrada eliminada' }}. {{ marker.note }}</dd></div>{% endfor %}</dl></section>{% endif %}
</div>