{% extends "base.html" %}
{% block title %}Importar movimientos bancarios{% endblock %}
{% block page_title %}Importar movimientos bancarios{% endblock %}

{% block topbar_actions %}
<a href="{{ url_for('banco.conciliar') }}" class="btn btn-outline-primary btn-sm">
  <i class="bi bi-link-45deg me-1"></i>Conciliación bancaria
</a>
{% endblock %}

{% block content %}
<div class="row justify-content-center">
  <div class="col-lg-7">
    <div class="card">
      <div class="card-header py-3"><i class="bi bi-file-earmark-spreadsheet me-2"></i>Importar extracto CSV</div>
      <div class="card-body p-4">
        <p class="text-muted small">
          Descarga el extracto de movimientos de tu banca online en formato <strong>Excel (.xlsx)</strong> o
          <strong>CSV</strong> y súbelo aquí. ContaApp detectará las columnas automáticamente y creará una
          transacción por cada movimiento, evitando duplicados si vuelves a subir el mismo archivo.
        </p>
        <form method="post" action="{{ url_for('banco.subir_csv') }}" enctype="multipart/form-data" class="mt-4">
          <div class="mb-3">
            <label class="form-label">Archivo CSV</label>
            <input type="file" name="archivo" accept=".xlsx,.xls,.csv,.txt" class="form-control" required>
          </div>
          <div class="mb-3">
            <label class="form-label">Filas a omitir al principio</label>
            <input type="number" name="omitir_filas" class="form-control" value="0" min="0" style="max-width:140px">
            <div class="form-text">
              Algunos bancos añaden líneas de cabecera (nombre, IBAN, saldo...) antes de la tabla de movimientos.
              Si la vista previa sale mal, aumenta este número.
            </div>
          </div>
          <button type="submit" class="btn btn-primary">
            <i class="bi bi-upload me-1"></i>Subir y previsualizar
          </button>
        </form>
      </div>
    </div>

    <div class="card mt-3">
      <div class="card-body">
        <div class="text-muted small fw-semibold mb-1">¿Cómo exportar el CSV?</div>
        <ul class="text-muted small mb-0">
          <li>Entra en la banca online de tu banco</li>
          <li>Ve al listado de movimientos de la cuenta</li>
          <li>Busca un botón de "Exportar", "Descargar" o un icono de Excel/CSV</li>
          <li>Guarda el archivo y súbelo aquí</li>
        </ul>
      </div>
    </div>
  </div>
</div>
{% endblock %}