{% extends 'agent/_layout.html.twig' %}

{% block title %}Live Players{% endblock %}

{% block agent_content %}

    <h1 class="fw-bold mb-1 text-white" data-testid="agent-live-players-title">Active Players — Live Racing</h1>

    {% if event %}
        <p class="mb-4" style="font-size:13px; color:#afafaf;">
            {{ event.management.name }} &middot; {{ event.eventDate|date('M d, Y') }}
        </p>

        <div class="row g-3 mb-4">
            <div class="col-6 col-md-3">
                <div class="dark-card">
                    <div class="stat-label">Active Players</div>
                    <div class="stat-value stat-value--lg" data-testid="stat-agent-live-players-count">{{ activeCount }}</div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="dark-card">
                    <div class="stat-label">Total Staked</div>
                    <div class="stat-value stat-value--lg" data-testid="stat-agent-live-players-staked">₱{{ totalStaked|number_format(2) }}</div>
                </div>
            </div>
        </div>

        <div class="card table-card">
            <div class="table-scroll">
                <table class="data-table" data-testid="agent-live-players-table">
                    <thead>
                        <tr class="thead-row--light">
                            <th class="th-white">Name</th>
                            <th class="th-white">Mobile</th>
                            <th class="th-white">Bets</th>
                            <th class="th-white">Total Staked</th>
                            <th class="th-white">Last Bet</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for b in bettors %}
                        <tr class="table-row" data-testid="agent-live-player-row-{{ b.userId }}">
                            <td class="td-cell fw-semibold">{{ b.firstName }} {{ b.lastName }}</td>
                            <td class="td-cell td-cell--muted font-mono-sm">{{ b.mobileNumber }}</td>
                            <td class="td-cell">{{ b.betCount }}</td>
                            <td class="td-cell fw-semibold">₱{{ b.totalStaked|number_format(2) }}</td>
                            <td class="td-cell td-cell--muted td-cell--nowrap">{{ b.lastBetAt|date('M d, H:i') }}</td>
                        </tr>
                        {% else %}
                        <tr>
                            <td colspan="5" class="td-empty">No one in your downline has bet on today's event yet.</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    {% else %}
        <div class="text-center py-5" data-testid="agent-live-players-empty">
            <h3 class="text-body">No Event Today</h3>
            <p class="text-body-secondary">There is no published Live Racing event today.</p>
        </div>
    {% endif %}

{% endblock %}