{% extends "cartera/base.html" %}

{% block title %}Desglose FIFO - Bolsa{% endblock %}

{% block content %}
<h2 class="mb-4">🧮 Plusvalías por FIFO</h2>

<div class="row mb-4">
    {% for anyo, importe in fiscal.items %}
    <div class="col-md-3">
        <div class="card text-center mb-2">
            <div class="card-body py-2">
                <h6 class="text-muted mb-1">{{ anyo }}</h6>
                <h5 class="{% if importe >= 0 %}text-success{% else %}text-danger{% endif %} mb-0">
                    {{ importe }} €
                </h5>
            </div>
        </div>
    </div>
    {% endfor %}
</div>

<p class="text-muted small">Resúmenes anuales en euros, con el cambio de moneda registrado en cada venta.</p>

{% if filas %}
<div class="card">
    <table class="table table-hover mb-0">
        <thead class="table-light">
            <tr>
                <th>Fecha venta</th>
                <th>Ticker</th>
                <th class="text-center">Div.</th>
                <th class="text-end">Acciones</th>
                <th class="text-end">Precio venta</th>
                <th class="text-end">Importe</th>
                <th class="text-end">Coste (FIFO)</th>
                <th class="text-end">Resultado</th>
            </tr>
        </thead>
        <tbody>
            {% for f in filas %}
            <tr>
                <td>{{ f.fecha }}</td>
                <td><strong>{{ f.valor.ticker }}</strong></td>
                <td class="text-center"><span class="badge bg-secondary">{{ f.divisa }}</span></td>
                <td class="text-end">{{ f.cantidad|floatformat:0 }}</td>
                <td class="text-end">{{ f.precio_venta|floatformat:4 }} {{ f.divisa }}</td>
                <td class="text-end">{{ f.importe }} {{ f.divisa }}</td>
                <td class="text-end">{{ f.coste }} {{ f.divisa }}</td>
                <td class="text-end {% if f.resultado >= 0 %}text-success{% else %}text-danger{% endif %}">
                    {% if f.resultado is None %}?{% else %}{{ f.resultado }} {{ f.divisa }}{% endif %}
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% else %}
<p class="text-muted">No hay ventas registradas todavía.</p>
{% endif %}
{% endblock %}