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

{% block title %}Dashboard | {{ project_name }}{% endblock %}

{% block content %}
<div class="container py-5">
    <!-- Hero / Market Overview -->
    <div class="row mb-5">
        <div class="col-lg-8">
            <h1 class="display-5 fw-bold mb-3">Track Parliament's Portfolio</h1>
            <p class="lead text-muted">Real-time reconnaissance of investment disclosures by Canadian Members of Parliament. See what they know, when they know it.</p>
        </div>
        <div class="col-lg-4 d-flex align-items-center justify-content-lg-end">
            <div class="stats-card p-4 rounded-4 w-100">
                <div class="d-flex justify-content-between mb-2">
                    <span class="text-muted">Total Disclosures</span>
                    <span class="text-success fw-bold">Live</span>
                </div>
                <h2 class="mb-0">{{ total_trades }}</h2>
            </div>
        </div>
    </div>

    <div class="row g-4">
        <!-- Live Trade Feed -->
        <div class="col-lg-8">
            <div class="card bg-card border-0 rounded-4 p-4">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h3 class="h5 mb-0">Live Disclosure Feed</h3>
                    <div class="dropdown">
                        <button class="btn btn-dark btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown">
                            All Parties
                        </button>
                        <ul class="dropdown-menu dropdown-menu-dark">
                            <li><a class="dropdown-item" href="#">Liberal</a></li>
                            <li><a class="dropdown-item" href="#">Conservative</a></li>
                            <li><a class="dropdown-item" href="#">NDP</a></li>
                        </ul>
                    </div>
                </div>

                <div class="table-responsive">
                    <table class="table table-dark table-hover align-middle custom-table">
                        <thead>
                            <tr>
                                <th class="text-muted fw-normal">MP</th>
                                <th class="text-muted fw-normal">Ticker</th>
                                <th class="text-muted fw-normal">Type</th>
                                <th class="text-muted fw-normal">Amount</th>
                                <th class="text-muted fw-normal">Date</th>
                                <th class="text-end"></th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for trade in trades %}
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="avatar me-3">{{ trade.mp.name|slice:":1" }}</div>
                                        <div>
                                            <div class="fw-bold">{{ trade.mp.name }}</div>
                                            <div class="small text-muted">{{ trade.mp.party }}</div>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="fw-bold">{{ trade.ticker }}</div>
                                    <div class="small text-muted">{{ trade.company_name }}</div>
                                </td>
                                <td>
                                    {% if trade.trade_type == 'BUY' %}
                                        <span class="badge bg-success-subtle text-success border border-success px-3 py-2">BUY</span>
                                    {% else %}
                                        <span class="badge bg-danger-subtle text-danger border border-danger px-3 py-2">SELL</span>
                                    {% endif %}
                                </td>
                                <td>{{ trade.amount_range }}</td>
                                <td>{{ trade.disclosure_date|date:"M d, Y" }}</td>
                                <td class="text-end">
                                    <button class="btn btn-outline-light btn-sm rounded-pill px-3">Follow</button>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="6" class="text-center py-5 text-muted">No disclosures found yet.</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                <div class="mt-4 text-center">
                    <a href="{% url 'mp_list' %}" class="btn btn-dark rounded-pill px-4">View All {{ total_mps }} MPs</a>
                </div>
            </div>
        </div>

        <!-- Sidebar: Trending / Watchlist -->
        <div class="col-lg-4">
            <div class="card bg-card border-0 rounded-4 p-4 mb-4">
                <h3 class="h5 mb-4">Trending Assets</h3>
                <div class="list-group list-group-flush bg-transparent">
                    <div class="list-group-item bg-transparent border-secondary border-opacity-25 px-0 py-3 d-flex justify-content-between align-items-center">
                        <div class="d-flex align-items-center">
                            <div class="ticker-icon bg-blue me-3">S</div>
                            <div>
                                <div class="fw-bold">SHOP</div>
                                <div class="small text-muted">Shopify Inc.</div>
                            </div>
                        </div>
                        <div class="text-end">
                            <div class="fw-bold">8 Trades</div>
                            <div class="small text-success">+4.2%</div>
                        </div>
                    </div>
                    <div class="list-group-item bg-transparent border-secondary border-opacity-25 px-0 py-3 d-flex justify-content-between align-items-center">
                        <div class="d-flex align-items-center">
                            <div class="ticker-icon bg-success me-3">T</div>
                            <div>
                                <div class="fw-bold">TD</div>
                                <div class="small text-muted">TD Bank</div>
                            </div>
                        </div>
                        <div class="text-end">
                            <div class="fw-bold">5 Trades</div>
                            <div class="small text-danger">-1.5%</div>
                        </div>
                    </div>
                </div>
                <button class="btn btn-dark w-100 mt-3 rounded-3">View All Markets</button>
            </div>

            <div class="card bg-primary-custom border-0 rounded-4 p-4 text-dark shadow-lg">
                <h3 class="h5 mb-3 fw-bold">Start Your Portfolio</h3>
                <p class="small mb-4 opacity-75">Connect your account to set alerts and follow specific MPs or tickers.</p>
                <a href="{% url 'login' %}" class="btn btn-dark w-100 rounded-3 fw-bold">Create Free Account</a>
            </div>
        </div>
    </div>
</div>

<style>
    .bg-card {
        background-color: var(--card-bg) !important;
    }
    .stats-card {
        background: linear-gradient(135deg, #1e2126 0%, #0a0b0d 100%);
        border: 1px solid var(--border-color);
    }
    .bg-primary-custom {
        background-color: var(--accent-green) !important;
    }
    .custom-table {
        border-collapse: separate;
        border-spacing: 0 10px;
    }
    .custom-table tr {
        background-color: rgba(255, 255, 255, 0.02);
        transition: background-color 0.2s ease;
    }
    .custom-table tr:hover {
        background-color: rgba(255, 255, 255, 0.05) !important;
    }
    .custom-table td, .custom-table th {
        border: none;
        padding: 1.25rem 1rem;
    }
    .avatar {
        width: 40px;
        height: 40px;
        background-color: var(--border-color);
        color: var(--accent-green);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-weight: 700;
        font-family: 'Lexend', sans-serif;
    }
    .ticker-icon {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 0.8rem;
    }
    .bg-blue { background-color: #3b82f6; }
    .bg-success { background-color: #10b981; }
</style>
{% endblock %}