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

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

{% block content %}
<div class="container py-5">
    <div class="row mb-5">
        <div class="col-lg-8">
            <h1 class="display-5 fw-bold mb-3">Ticker Directory</h1>
            <p class="lead text-muted">Browse every asset, stock, and security traded by Canadian Members of Parliament.</p>
        </div>
    </div>

    <div class="card bg-card border-0 rounded-4 p-4">
        <form method="get" class="row mb-4 g-3">
            <div class="col-md-6">
                <div class="input-group">
                    <span class="input-group-text bg-dark border-0 text-muted"><i class="bi bi-search"></i></span>
                    <input type="text" name="q" class="form-control bg-dark border-0 text-white" 
                           placeholder="Search by ticker or company..." value="{{ search_query }}">
                </div>
            </div>
            <div class="col-md-3">
                <select class="form-select bg-dark border-0 text-white">
                    <option value="">All Sectors</option>
                    <option value="tech">Technology</option>
                    <option value="finance">Finance</option>
                    <option value="energy">Energy</option>
                </select>
            </div>
            <div class="col-md-3">
                <button type="submit" class="btn btn-primary-custom w-100">Search</button>
            </div>
        </form>

        <div class="table-responsive">
            <table class="table table-dark table-hover align-middle custom-table">
                <thead>
                    <tr>
                        <th class="text-muted fw-normal">Asset</th>
                        <th class="text-muted fw-normal text-center">Unique MPs</th>
                        <th class="text-muted fw-normal text-center">Total Trades</th>
                        <th class="text-muted fw-normal">Last Action</th>
                        <th class="text-end"></th>
                    </tr>
                </thead>
                <tbody>
                    {% for ticker in tickers %}
                    <tr>
                        <td>
                            <a href="{% url 'ticker_detail' ticker.ticker %}" class="text-decoration-none text-white d-flex align-items-center">
                                <div class="ticker-icon bg-primary-subtle text-primary me-3">{{ ticker.ticker|slice:":1" }}</div>
                                <div>
                                    <div class="fw-bold">{{ ticker.ticker }}</div>
                                    <div class="small text-muted">{{ ticker.company_name }}</div>
                                </div>
                            </a>
                        </td>
                        <td class="text-center">
                            <span class="badge bg-dark rounded-pill px-3">{{ ticker.mp_count }} MPs</span>
                        </td>
                        <td class="text-center">
                            <span class="fw-bold">{{ ticker.trade_count }}</span>
                        </td>
                        <td>
                            <span class="small text-muted">N/A</span>
                        </td>
                        <td class="text-end">
                            <a href="{% url 'ticker_detail' ticker.ticker %}" class="btn btn-outline-light btn-sm rounded-pill px-3">Details</a>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="5" class="text-center py-5 text-muted">No tickers found matching your search.</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<style>
    .bg-card {
        background-color: var(--card-bg) !important;
    }
    .custom-table tr {
        background-color: rgba(255, 255, 255, 0.02);
    }
    .custom-table td {
        padding: 1.25rem 1rem;
    }
    .ticker-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        background-color: rgba(255,255,255,0.05) !important;
    }
    .form-control:focus, .form-select:focus {
        background-color: #1e2126;
        box-shadow: none;
        color: white;
    }
</style>
{% endblock %}