{% extends "base.html" %}
{% block title %}{{ inv.asset_name }}{% endblock %}
{% block page_title %}{{ inv.asset_name }}{% endblock %}

{% block topbar_actions %}
<a href="{{ url_for('investments.add_transaction', id=inv.id) }}" class="btn btn-sm btn-primary" style="font-size:12px;"><i class="bi bi-plus-lg me-1"></i>Add Transaction</a>
<a href="{{ url_for('investments.edit', id=inv.id) }}" class="btn btn-sm btn-outline-secondary ms-1" style="font-size:12px;"><i class="bi bi-pencil me-1"></i>Edit</a>
{% endblock %}

{% block content %}
<!-- Holding summary -->
<div class="row g-3 mb-4">
    <div class="col-12 col-md-5">
        <div class="pcard h-100" style="border-left:4px solid {{ asset_colors.get(inv.asset_type,'#94a3b8') }};">
            <div class="d-flex justify-content-between align-items-start mb-3">
                <div>
                    <div style="font-size:18px;font-weight:700;">{{ inv.asset_name }}</div>
                    <div style="font-size:12px;color:var(--muted);">
                        {% if inv.ticker %}<span class="mono">{{ inv.ticker }}</span> · {% endif %}
                        <span style="background:{{ asset_colors.get(inv.asset_type,'#94a3b8') }}22;color:{{ asset_colors.get(inv.asset_type,'#94a3b8') }};padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600;">
                            {{ asset_labels.get(inv.asset_type, inv.asset_type) }}
                        </span>
                    </div>
                </div>
                <form method="POST" action="{{ url_for('investments.delete', id=inv.id) }}" onsubmit="return confirm('Remove this holding?')">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <button type="submit" class="btn btn-sm btn-outline-danger" style="font-size:11px;">Remove</button>
                </form>
            </div>

            <div class="row g-2 mt-1">
                <div class="col-6">
                    <div style="font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;">Shares</div>
                    <div class="mono" style="font-size:16px;font-weight:600;">{{ "%.6f"|format(inv.shares|float)|replace('000000','').rstrip('0').rstrip('.') }}</div>
                </div>
                <div class="col-6">
                    <div style="font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;">Avg Cost</div>
                    <div class="mono" style="font-size:16px;font-weight:600;">{{ inv.avg_cost_basis | currency }}</div>
                </div>
                <div class="col-6">
                    <div style="font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;">Current Price</div>
                    <div class="mono" style="font-size:16px;font-weight:600;">
                        {% if inv.current_price %}{{ inv.current_price | currency }}
                        {% else %}<span class="text-muted">—</span>{% endif %}
                    </div>
                    {% if inv.last_price_update %}
                    <div style="font-size:10px;color:var(--muted);">{{ inv.last_price_update.strftime('%b %d, %H:%M') }}</div>
                    {% endif %}
                </div>
                <div class="col-6">
                    <div style="font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;">Market Value</div>
                    <div class="mono text-invest" style="font-size:16px;font-weight:600;">{{ inv.current_value | currency }}</div>
                </div>
            </div>

            <hr style="border-color:var(--border);">
            <div class="d-flex justify-content-between">
                <div>
                    <div style="font-size:11px;color:var(--muted);">Total Cost Basis</div>
                    <div class="mono" style="font-size:14px;">{{ inv.total_cost | currency }}</div>
                </div>
                <div class="text-end">
                    <div style="font-size:11px;color:var(--muted);">Unrealized P&amp;L</div>
                    <div class="mono {% if inv.unrealized_gain >= 0 %}text-income{% else %}text-expense{% endif %}" style="font-size:14px;font-weight:600;">
                        {% if inv.unrealized_gain >= 0 %}+{% endif %}{{ inv.unrealized_gain | currency }}
                        <span style="font-size:11px;">({% if inv.unrealized_gain_pct >= 0 %}+{% endif %}{{ inv.unrealized_gain_pct }}%)</span>
                    </div>
                </div>
            </div>

            {% if inv.notes %}
            <div style="font-size:12px;color:var(--muted);margin-top:12px;padding-top:12px;border-top:1px solid var(--border);">{{ inv.notes }}</div>
            {% endif %}
        </div>
    </div>

    <div class="col-12 col-md-7">
        <div class="pcard p-0 h-100">
            <div class="d-flex justify-content-between align-items-center px-4 py-3" style="border-bottom:1px solid var(--border);">
                <span class="pcard-title mb-0">Transaction History</span>
                <a href="{{ url_for('investments.add_transaction', id=inv.id) }}" class="btn btn-sm btn-outline-primary" style="font-size:11px;padding:2px 8px;"><i class="bi bi-plus-lg"></i></a>
            </div>
            {% if txns %}
            <table class="pfm-table">
                <thead>
                    <tr>
                        <th style="padding-left:20px;">Date</th>
                        <th>Type</th>
                        <th class="text-end">Shares</th>
                        <th class="text-end">Price</th>
                        <th class="text-end">Total</th>
                        <th class="text-end" style="padding-right:20px;"></th>
                    </tr>
                </thead>
                <tbody>
                {% for txn in txns %}
                <tr>
                    <td style="padding-left:20px;font-size:12px;color:var(--muted);white-space:nowrap;">{{ txn.date.strftime('%b %d, %Y') }}</td>
                    <td>
                        <span class="badge" style="font-size:11px;{% if txn.transaction_type == 'buy' %}background:#d1fae5;color:#065f46;{% elif txn.transaction_type == 'sell' %}background:#fee2e2;color:#991b1b;{% elif txn.transaction_type == 'dividend' %}background:#dbeafe;color:#1e40af;{% else %}background:#f3e8ff;color:#6b21a8;{% endif %}">
                            {{ txn.transaction_type | title }}
                        </span>
                    </td>
                    <td class="text-end mono" style="font-size:12px;">{{ txn.shares }}</td>
                    <td class="text-end mono" style="font-size:12px;">{{ txn.price_per_share | currency }}</td>
                    <td class="text-end mono {% if txn.transaction_type == 'buy' %}text-expense{% else %}text-income{% endif %}" style="font-size:12px;font-weight:500;">
                        {{ txn.total_amount | currency }}
                    </td>
                    <td class="text-end" style="padding-right:20px;">
                        <form method="POST" action="{{ url_for('investments.delete_transaction', id=txn.id) }}" onsubmit="return confirm('Delete this transaction?')">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            <button type="submit" class="btn btn-sm btn-outline-danger" style="font-size:11px;padding:2px 6px;">×</button>
                        </form>
                    </td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
            {% else %}
            <div class="text-center py-5">
                <p class="text-muted small mb-2">No transactions yet.</p>
                <a href="{{ url_for('investments.add_transaction', id=inv.id) }}" class="btn btn-sm btn-primary">Record First Buy</a>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<a href="{{ url_for('investments.index') }}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-arrow-left me-1"></i>Back to Portfolio</a>
{% endblock %}