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

{% block title %}Cartera - Bolsa{% endblock %}

{% block content %}
<h2 class="mb-4">📊 Mi cartera</h2>

<form method="post" action="{% url 'cartera:actualizar' %}" class="mb-3">
    {% csrf_token %}
    <button type="submit" class="btn btn-outline-primary btn-sm">
        🔄 Actualizar precios
    </button>
</form>

<div class="row mb-4">
    <div class="col-md-4">
        <div class="card text-center">
            <div class="card-body">
                <h6 class="text-muted">Valoración cartera</h6>
                <h3>{{ totales.valoracion }} €</h3>
                <small class="{% if totales.latente >= 0 %}text-success{% else %}text-danger{% endif %}">
                    {% if totales.latente >= 0 %}+{% endif %}{{ totales.latente }} € latente
                </small>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card text-center">
            <div class="card-body">
                <h6 class="text-muted">Plusvalías realizadas</h6>
                <h3 class="{% if totales.plusvalias >= 0 %}text-success{% else %}text-danger{% endif %}">
                    {{ totales.plusvalias }} €
                </h3>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card text-center">
            <div class="card-body">
                <h6 class="text-muted">Dividendos netos</h6>
                <h3 class="text-success">{{ totales.dividendos }} €</h3>
            </div>
        </div>
    </div>
</div>

<h4>Posiciones abiertas</h4>
{% if abiertas %}
<div class="card mb-4">
    <table class="table table-hover mb-0">
        <thead class="table-light">
            <tr>
                <th>Ticker</th>
                <th>Nombre</th>
                <th class="text-end">Acciones</th>
                <th class="text-end">Precio medio</th>
                <th class="text-end">Precio actual</th>
                <th class="text-end">Invertido</th>
                <th class="text-end">Valoración</th>
                <th class="text-end">Latente</th>
                <th class="text-end">Dividendos netos</th>
            </tr>
        </thead>
        <tbody>
            {% for p in abiertas %}
            <tr>
                <td><strong>{{ p.valor.ticker }}</strong></td>
                <td>{{ p.valor.nombre }}</td>
                <td class="text-end">{{ p.acciones|floatformat:0 }}</td>
                <td class="text-end">{{ p.precio_medio|floatformat:4 }} €</td>
                <td class="text-end">
                    {% if p.valor.precio_actual %}{{ p.valor.precio_actual|floatformat:4 }} €{% else %}—{% endif %}
                </td>
                <td class="text-end">{{ p.invertido }} €</td>
                <td class="text-end">
                    {% if p.valoracion %}{{ p.valoracion }} €{% else %}—{% endif %}
                </td>
                <td class="text-end {% if p.latente >= 0 %}text-success{% else %}text-danger{% endif %}">
                    {% if p.valoracion %}{% if p.latente >= 0 %}+{% endif %}{{ p.latente }} €{% else %}—{% endif %}
                </td>
                <td class="text-end">{{ p.dividendos }} €</td>
            </tr>
            {% endfor %}
        </tbody>
        </tbody>
        <tfoot class="table-light">
            <tr>
                <th colspan="4">Total</th>
                <th class="text-end">{{ totales.invertido }} €</th>
                <th class="text-end"></th>
            </tr>
        </tfoot>
    </table>
</div>
{% else %}
<p class="text-muted">No hay posiciones abiertas.</p>
{% endif %}

<h4>Posiciones cerradas</h4>
{% if cerradas %}
<div class="card">
    <table class="table table-hover mb-0">
        <thead class="table-light">
            <tr>
                <th>Ticker</th>
                <th>Nombre</th>
                <th class="text-end">Plusvalías realizadas</th>
                <th class="text-end">Dividendos cobrados</th>
            </tr>
        </thead>
        <tbody>
            {% for p in cerradas %}
            <tr>
                <td><strong>{{ p.valor.ticker }}</strong></td>
                <td>{{ p.valor.nombre }}</td>
                <td class="text-end {% if p.plusvalias >= 0 %}text-success{% else %}text-danger{% endif %}">
                    {{ p.plusvalias }} €
                </td>
                <td class="text-end">{{ p.dividendos }} €</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% else %}
<p class="text-muted">Todavía no hay posiciones cerradas.</p>
{% endif %}
{% endblock %}