{% extends "base.html" %}
{% block title %}Mapear columnas{% endblock %}
{% block page_title %}Mapear columnas del CSV{% endblock %}

{% block content %}
<div class="row justify-content-center">
  <div class="col-lg-9">

    <div class="card mb-3">
      <div class="card-header py-3"><i class="bi bi-table me-2"></i>Vista previa ({{ total }} fila(s) detectadas)</div>
      <div class="table-responsive">
        <table class="table table-sm table-bordered mb-0">
          <thead class="table-light">
            <tr>
              {% for col in cabecera %}
              <th class="small">{{ loop.index0 }}: {{ col }}</th>
              {% endfor %}
            </tr>
          </thead>
          <tbody>
            {% for fila in preview %}
            <tr>
              {% for celda in fila %}
              <td class="small text-muted">{{ celda }}</td>
              {% endfor %}
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>

    <div class="card">
      <div class="card-header py-3"><i class="bi bi-diagram-3 me-2"></i>Selecciona qué columna es cada cosa</div>
      <div class="card-body p-4">
        <form method="post">
          <div class="row g-3">
            <div class="col-md-4">
              <label class="form-label">Columna de fecha</label>
              <select name="col_fecha" class="form-select">
                {% for col in cabecera %}
                <option value="{{ loop.index0 }}" {% if loop.index0 == sugerencia.fecha %}selected{% endif %}>
                  {{ loop.index0 }}: {{ col }}
                </option>
                {% endfor %}
              </select>
            </div>
            <div class="col-md-4">
              <label class="form-label">Columna de descripción / concepto</label>
              <select name="col_descripcion" class="form-select">
                {% for col in cabecera %}
                <option value="{{ loop.index0 }}" {% if loop.index0 == sugerencia.descripcion %}selected{% endif %}>
                  {{ loop.index0 }}: {{ col }}
                </option>
                {% endfor %}
              </select>
            </div>
            <div class="col-md-4">
              <label class="form-label">Columna de importe</label>
              <select name="col_importe" class="form-select">
                {% for col in cabecera %}
                <option value="{{ loop.index0 }}" {% if loop.index0 == sugerencia.importe %}selected{% endif %}>
                  {{ loop.index0 }}: {{ col }}
                </option>
                {% endfor %}
              </select>
            </div>
          </div>

          <div class="form-check mt-3">
            <input class="form-check-input" type="checkbox" name="invertir_signo" id="invertirSigno">
            <label class="form-check-label small" for="invertirSigno">
              Invertir signo del importe (marca esto si los gastos aparecen como positivos y los ingresos como negativos en tu CSV)
            </label>
          </div>

          <div class="alert alert-info mt-3 small mb-0">
            <i class="bi bi-info-circle me-1"></i>
            Los importes positivos se importarán como <strong>ingresos</strong> y los negativos como <strong>gastos</strong>.
            Las filas ya importadas anteriormente (misma fecha, descripción e importe) se omiten automáticamente.
          </div>

          <div class="d-flex gap-2 mt-4">
            <button type="submit" class="btn btn-primary">
              <i class="bi bi-check-lg me-1"></i>Importar transacciones
            </button>
            <button type="submit" formaction="{{ url_for('banco.cancelar') }}" class="btn btn-outline-secondary">
              Cancelar
            </button>
          </div>
        </form>
      </div>
    </div>

  </div>
</div>
{% endblock %}