{% extends "base.html" %}
{% block title %}Importación bancaria{% endblock %}
{% block page_title %}Importación completada{% endblock %}

{% block content %}
<div class="row justify-content-center">
  <div class="col-lg-8">
    <div class="card border-success mb-3">
      <div class="card-body text-center py-4">
        <i class="bi bi-check-circle text-success" style="font-size:2.5rem"></i>
        <h5 class="mt-3 mb-1">
          {% if nuevas %}
            {{ nuevas|length }} movimiento(s) nuevo(s) importado(s)
          {% else %}
            No se ha importado ningún movimiento nuevo
          {% endif %}
        </h5>
        <p class="text-muted small mb-0">
          {{ duplicadas }} duplicado(s) omitido(s){% if errores %} · {{ errores }} fila(s) con error{% endif %}
        </p>
      </div>
    </div>

    {% if nuevas %}
    <div class="card">
      <div class="card-header py-3"><i class="bi bi-list-ul me-2"></i>Movimientos importados</div>
      <div class="table-responsive">
        <table class="table table-hover mb-0">
          <thead><tr><th>Fecha</th><th>Descripción</th><th class="text-end">Importe</th></tr></thead>
          <tbody>
            {% for t in nuevas %}
            <tr>
              <td class="text-muted small">{{ t.fecha }}</td>
              <td class="small">{{ t.descripcion }}</td>
              <td class="text-end fw-semibold {% if t.tipo == 'ingreso' %}text-success{% else %}text-danger{% endif %}">
                {% if t.tipo == 'ingreso' %}+{% else %}−{% endif %}{{ "%.2f"|format(t.importe) }} €
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
    {% endif %}

    <div class="d-flex gap-2 justify-content-center mt-3">
      <a href="{{ url_for('transacciones.lista') }}" class="btn btn-primary">
        <i class="bi bi-arrow-left-right me-1"></i>Ver todas las transacciones
      </a>
      <a href="{{ url_for('banco.index') }}" class="btn btn-outline-secondary">Importar otro archivo</a>
    </div>
  </div>
</div>
{% endblock %}