{% extends "base.html" %}

{% block title %}Daily Summary - Pickleball ELO Tracker{% endblock %}

{% block content %}
<div class="max-w-6xl mx-auto">
    <h1 class="pitt-primary text-4xl font-bold mb-8 text-center">📈 Daily Summary</h1>
    
    {% include "components/nav.html" %}
    
    <div class="card mb-8">
        <h2 class="pitt-primary text-2xl font-bold mb-4">🎯 Today's Matches</h2>
        {% if daily_matches.is_empty() %}
            <p class="text-gray-600">No matches recorded today.</p>
        {% else %}
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-blue-900 text-white">
                        <tr>
                            <th class="px-4 py-3 text-left">Type</th>
                            <th class="px-4 py-3 text-left">Team 1</th>
                            <th class="px-4 py-3 text-center">Score</th>
                            <th class="px-4 py-3 text-left">Team 2</th>
                            <th class="px-4 py-3 text-left">Time</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for match in daily_matches %}
                        <tr class="border-b hover:bg-gray-50">
                            <td class="px-4 py-3 capitalize font-semibold">{{ match.match_type }}</td>
                            <td class="px-4 py-3">
                                {% for player in match.team1_players %}
                                    <div class="pitt-primary font-semibold">
                                        <a href="/players/{{ player.id }}" class="hover:underline">{{ player.name }}</a>
                                        <span class="{% if player.rating_change >= 0.0 %}text-green-600{% else %}text-red-600{% endif %}">{{ player.rating_change_display }}</span>
                                    </div>
                                {% endfor %}
                            </td>
                            <td class="px-4 py-3 text-center font-bold">{{ match.team1_score }}-{{ match.team2_score }}</td>
                            <td class="px-4 py-3">
                                {% for player in match.team2_players %}
                                    <div class="pitt-primary font-semibold">
                                        <a href="/players/{{ player.id }}" class="hover:underline">{{ player.name }}</a>
                                        <span class="{% if player.rating_change >= 0.0 %}text-green-600{% else %}text-red-600{% endif %}">{{ player.rating_change_display }}</span>
                                    </div>
                                {% endfor %}
                            </td>
                            <td class="px-4 py-3 text-sm text-gray-600">{{ match.match_time }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% endif %}
    </div>
    
    <div class="card">
        <h2 class="pitt-primary text-2xl font-bold mb-4">👥 Leaderboard</h2>
        {% if leaderboard.is_empty() %}
            <p class="text-gray-600">No players with matches yet.</p>
        {% else %}
            <div class="space-y-2">
                {% for (rank, player) in leaderboard %}
                <div class="leaderboard-entry">
                    <div class="rank">{{ rank }}</div>
                    <div class="flex-1">
                        <a href="/players/{{ player.id }}" class="pitt-primary font-bold hover:underline">
                            {{ player.name }}
                        </a>
                    </div>
                    <div class="player-rating">{{ player.rating_display }}</div>
                </div>
                {% endfor %}
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}