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

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

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2>💰 Dividendos</h2>
    <a href="{% url 'cartera:dividendo_nuevo' %}" class="btn btn-primary">+ Nuevo dividendo</a>
</div>

{% if dividendos %}
<div class="card">
    <table class="table table-hover mb-0">
        <thead class="table-light">
            <tr>
                <th>Fecha</th>
                <th>Ticker</th>
                <th class="text-end">Bruto</th>
                <th class="text-end">Retención</th>
                <th class="text-end">Neto</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            {% for d in dividendos %}
            <tr>
                <td>{{ d.fecha }}</td>
                <td><strong>{{ d.valor.ticker }}</strong></td>
                <td class="text-end">{{ d.bruto }} {{ d.valor.divisa.codigo }}</td>
                <td class="text-end">{{ d.retencion }} {{ d.valor.divisa.codigo }}</td>
                <td class="text-end text-success"><strong>{{ d.neto }} {{ d.valor.divisa.codigo }}</strong></td>
                <td class="text-end text-nowrap">
                    <a class="btn btn-outline-secondary btn-sm" href="{% url 'cartera:dividendo_editar' d.pk %}">✏️</a>
                    <a class="btn btn-outline-danger btn-sm" href="{% url 'cartera:dividendo_borrar' d.pk %}">🗑️</a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% else %}
<p class="text-muted">No hay dividendos registrados.</p>
{% endif %}
{% endblock %}