{% extends "dashboard/base.html" %}

{% block dashboard_content %}
<div class="stat-card">
    <h3>Game Statistics</h3>
    <div class="stat-grid">
        <div class="stat-item">
            <div class="stat-value">{{ game_stats.total }}</div>
            <div class="stat-label">Total Games</div>
        </div>
        <div class="stat-item">
            <div class="stat-value">{{ game_stats.scheduled }}</div>
            <div class="stat-label">Scheduled</div>
        </div>
        <div class="stat-item">
            <div class="stat-value">{{ game_stats.final }}</div>
            <div class="stat-label">Final</div>
        </div>
        <div class="stat-item">
            <div class="stat-value">{{ game_stats.today }}</div>
            <div class="stat-label">Today</div>
        </div>
        <div class="stat-item">
            <div class="stat-value">{{ game_stats.this_week }}</div>
            <div class="stat-label">This Week</div>
        </div>
    </div>
</div>

<div class="stat-card">
    <h3>CloudKit Sync Statistics</h3>
    <div class="stat-grid">
        <div class="stat-item">
            <div class="stat-value">{{ sync_stats.total }}</div>
            <div class="stat-label">Total Records</div>
        </div>
        <div class="stat-item">
            <div class="stat-value" style="color: #5cb85c;">{{ sync_stats.synced }}</div>
            <div class="stat-label">Synced</div>
        </div>
        <div class="stat-item">
            <div class="stat-value" style="color: #f0ad4e;">{{ sync_stats.pending }}</div>
            <div class="stat-label">Pending</div>
        </div>
        <div class="stat-item">
            <div class="stat-value" style="color: #d9534f;">{{ sync_stats.failed }}</div>
            <div class="stat-label">Failed</div>
        </div>
    </div>
</div>

<div class="stat-card">
    <h3>Data by Sport</h3>
    <div class="table-responsive">
        <table class="dashboard-table">
            <thead>
                <tr>
                    <th>Sport</th>
                    <th>Teams</th>
                    <th>Stadiums</th>
                    <th>Games</th>
                    <th>Pending Reviews</th>
                </tr>
            </thead>
            <tbody>
                {% for stat in sport_stats %}
                <tr>
                    <td><strong>{{ stat.sport.short_name }}</strong> - {{ stat.sport.name }}</td>
                    <td>{{ stat.teams }}</td>
                    <td>{{ stat.stadiums }}</td>
                    <td>{{ stat.games }}</td>
                    <td>
                        {% if stat.pending_reviews %}
                        <span style="color: #f0ad4e; font-weight: bold;">{{ stat.pending_reviews }}</span>
                        {% else %}
                        <span style="color: #5cb85c;">0</span>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}