{% extends "base.html" %}
{% load static i18n humanize %}

{% block title %}{{ portfolio.name }} - Portfolio{% endblock %}

{% block content %}
<div class="mb-4">
    <a href="{% url 'invest-dashboard' %}" class="text-stone-400 hover:text-stone-700 text-sm">← Dashboard</a>
</div>

<div class="mb-2">
    <p class="text-xs font-semibold tracking-widest text-stone-500 uppercase">{{ portfolio.name }}</p>
</div>

<!-- Total value card -->
<div class="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-4">
    <div class="bg-white rounded-lg p-5 shadow-sm">
        <p class="text-xs font-semibold tracking-widest text-stone-400 uppercase mb-1">Live Total Value</p>
        <p class="text-3xl font-bold text-stone-900">${{ summary.total_value|floatformat:0|intcomma }}</p>
        <p class="text-sm text-stone-400 mt-1">{{ summary.holdings|length }} position{{ summary.holdings|length|pluralize }}</p>
    </div>
    <div class="bg-white rounded-lg p-5 shadow-sm">
        <p class="text-xs font-semibold tracking-widest text-stone-400 uppercase mb-1">Transactions</p>
        <a href="{% url 'invest-portfolio-transactions' portfolio.id %}" class="text-3xl font-bold text-stone-700 hover:text-stone-900">
            {{ portfolio.transactions.count }}
        </a>
        <p class="text-sm text-stone-400 mt-1">Total recorded</p>
    </div>
</div>

<!-- Holdings table -->
<div class="bg-white rounded-lg shadow-sm overflow-hidden">
    <div class="px-6 py-4 border-b border-stone-100">
        <p class="text-xs font-semibold tracking-widest text-stone-500 uppercase">Current Holdings</p>
    </div>
    {% if summary.holdings %}
    <table class="w-full text-sm">
        <thead>
            <tr class="text-xs font-semibold tracking-widest text-stone-400 uppercase border-b border-stone-100">
                <th class="px-6 py-3 text-left">Stock</th>
                <th class="px-6 py-3 text-right">Quantity</th>
                <th class="px-6 py-3 text-right">Current Price</th>
                <th class="px-6 py-3 text-right">Value</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-stone-50">
            {% for stock in summary.holdings %}
            <tr class="hover:bg-stone-50">
                <td class="px-6 py-3 font-semibold text-stone-900">{{ stock.stock_code }}</td>
                <td class="px-6 py-3 text-right text-stone-600">{{ stock.quantity|floatformat:2|intcomma }}</td>
                <td class="px-6 py-3 text-right text-stone-600">
                    {% if stock.current_price > 0 %}${{ stock.current_price|floatformat:2|intcomma }}{% else %}<span class="text-stone-300">—</span>{% endif %}
                </td>
                <td class="px-6 py-3 text-right font-medium text-stone-900">${{ stock.current_value|floatformat:0|intcomma }}</td>
            </tr>
            {% endfor %}
        </tbody>
        <tfoot>
            <tr class="border-t-2 border-stone-200 bg-stone-50">
                <td class="px-6 py-3 font-semibold text-stone-500 text-xs uppercase tracking-wide" colspan="3">Total</td>
                <td class="px-6 py-3 text-right font-bold text-stone-900">${{ summary.total_value|floatformat:0|intcomma }}</td>
            </tr>
        </tfoot>
    </table>
    {% else %}
    <div class="px-6 py-12 text-center">
        <p class="text-stone-400">No holdings in this portfolio.</p>
    </div>
    {% endif %}
</div>
{% endblock %}