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

{% block title %}账户持仓 - {{ account.account_name }} - AgomTradePro{% endblock %}

{% block content %}
<div class="account-container">
    <div class="account-header">
        <div class="header-title-row">
            <div>
                <h1>{{ account.account_name }} - 持仓</h1>
                <p class="subtitle">账户持仓 · 类型：{{ account_type }}</p>
            </div>
            <div class="header-actions">
                <a href="{% url 'simulated_trading:my-account-detail' account.id %}" class="btn btn-secondary">返回账户详情</a>
                {% if manual_trade_portfolio_id %}
                <a href="{% url 'audit:manual_trades' %}?portfolio_id={{ manual_trade_portfolio_id }}" class="btn btn-primary">导入成交流水</a>
                {% endif %}
                <a href="{% url 'simulated_trading:my-accounts' %}" class="btn btn-secondary">账户列表</a>
            </div>
        </div>
    </div>

    <!-- 账户摘要 -->
    <section class="account-section">
        <h2 class="section-title">账户摘要</h2>
        <div class="account-stats">
            <div class="stat-card">
                <span class="stat-label">总资产</span>
                <span class="stat-value">¥{{ account.total_value|floatformat:2 }}</span>
            </div>
            <div class="stat-card">
                <span class="stat-label">持仓市值</span>
                <span class="stat-value">¥{{ account.current_market_value|floatformat:2 }}</span>
            </div>
            <div class="stat-card">
                <span class="stat-label">可用现金</span>
                <span class="stat-value">¥{{ account.current_cash|floatformat:2 }}</span>
            </div>
            <div class="stat-card {% if account.total_return >= 0 %}stat-positive{% else %}stat-negative{% endif %}">
                <span class="stat-label">总收益率</span>
                <span class="stat-value">
                    {% if account.total_return is None %}-{% else %}{{ account.total_return|floatformat:2 }}%{% endif %}
                </span>
            </div>
            <div class="stat-card">
                <span class="stat-label">持仓数量</span>
                <span class="stat-value">{{ positions.count }}</span>
            </div>
        </div>
    </section>

    <!-- 持仓列表 -->
    <section class="account-section">
        <h2 class="section-title">持仓列表</h2>
        {% if positions %}
        <table class="table">
            <thead>
                <tr>
                    <th>资产代码</th>
                    <th>资产名称</th>
                    <th>数量</th>
                    <th>可用数量</th>
                    <th>成本价</th>
                    <th>现价</th>
                    <th>市值</th>
                    <th>盈亏</th>
                    <th>盈亏%</th>
                    <th>首次买入日</th>
                </tr>
            </thead>
            <tbody>
                {% for position in positions %}
                <tr>
                    <td><strong>{{ position.asset_code }}</strong></td>
                    <td>{{ position.asset_name|default:"-" }}</td>
                    <td>{{ position.quantity|floatformat:2 }}</td>
                    <td>{{ position.available_quantity|floatformat:2 }}</td>
                    <td>¥{{ position.avg_cost|floatformat:2 }}</td>
                    <td>¥{{ position.current_price|floatformat:2 }}</td>
                    <td>¥{{ position.market_value|floatformat:2 }}</td>
                    <td class="{% if position.unrealized_pnl >= 0 %}positive{% else %}negative{% endif %}">
                        ¥{{ position.unrealized_pnl|floatformat:2 }}
                    </td>
                    <td class="{% if position.unrealized_pnl_pct >= 0 %}positive{% else %}negative{% endif %}">
                        {{ position.unrealized_pnl_pct|floatformat:2 }}%
                    </td>
                    <td>{{ position.first_buy_date|date:"Y-m-d" }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% else %}
        <div class="empty-state">
            <div class="empty-icon">📭</div>
            <p>暂无持仓</p>
        </div>
        {% endif %}
    </section>
</div>

<style>
.account-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px;
}

.account-header {
    margin-bottom: 24px;
}

.header-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.account-header h1 {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 4px;
}

.subtitle {
    color: #54595D;
    font-size: 14px;
}

.header-actions {
    display: flex;
    gap: 12px;
}

.account-section {
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 24px;
}

.section-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
}

.account-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.stat-card {
    background: #F8F9FA;
    padding: 16px;
    border-radius: 4px;
    text-align: center;
}

.stat-positive {
    background: var(--color-rise-soft);
    border: 1px solid var(--color-rise);
}

.stat-negative {
    background: var(--color-fall-soft);
    border: 1px solid var(--color-fall);
}

.stat-label {
    display: block;
    font-size: 12px;
    color: #54595D;
    margin-bottom: 8px;
}

.stat-value {
    display: block;
    font-size: 18px;
    font-weight: 600;
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table thead {
    background: #F8F9FA;
}

.table th {
    padding: 12px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    border-bottom: 1px solid #E0E0E0;
}

.table td {
    padding: 12px;
    font-size: 14px;
    border-bottom: 1px solid #E0E0E0;
}

.positive { color: var(--color-rise); }
.negative { color: var(--color-fall); }

.btn {
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    text-decoration: none;
    display: inline-block;
}

.btn-secondary {
    background: #F8F9FA;
    color: #202122;
    border: 1px solid #E0E0E0;
}

.empty-state {
    text-align: center;
    padding: 40px;
    color: #54595D;
}

.empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .account-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .header-title-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}
</style>
{% endblock %}