<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pickleball Results - {{ date }}</title>
</head>
<body style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; background: #f5f5f5; padding: 20px;">
    <div style="max-width: 600px; margin: 0 auto; background: white; border-radius: 8px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
        <h1 style="color: #003594; margin-top: 0;">🏓 Pickleball Results</h1>
        <p style="color: #666; font-size: 14px;">{{ date }}</p>
        
        {% if summary.total_matches > 0 %}
        <div style="background: linear-gradient(135deg, #003594 0%, #001a4d 100%); color: white; padding: 20px; border-radius: 6px; margin: 20px 0;">
            <p style="margin: 10px 0;"><strong>Matches Played:</strong> {{ summary.total_matches }}</p>
            <p style="margin: 10px 0;"><strong>Total Players:</strong> {{ summary.total_players }}</p>
        </div>
        
        <h2 style="color: #003594; border-bottom: 2px solid #FFB81C; padding-bottom: 10px;">📊 Top Performers</h2>
        
        {% if summary.top_winners %}
        <table style="width: 100%; border-collapse: collapse; margin: 20px 0;">
            <thead>
                <tr style="background: #f5f5f5; border-bottom: 2px solid #ddd;">
                    <th style="padding: 10px; text-align: left; border: 1px solid #ddd;">Player</th>
                    <th style="padding: 10px; text-align: center; border: 1px solid #ddd;">Rating Change</th>
                </tr>
            </thead>
            <tbody>
                {% for winner in summary.top_winners %}
                <tr style="border-bottom: 1px solid #ddd;">
                    <td style="padding: 10px; border: 1px solid #ddd;">{{ winner.name }}</td>
                    <td style="padding: 10px; text-align: center; border: 1px solid #ddd; color: #27ae60; font-weight: bold;">
                        +{{ winner.rating_change }}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% endif %}
        
        {% if summary.all_matches %}
        <h2 style="color: #003594; border-bottom: 2px solid #FFB81C; padding-bottom: 10px;">🎾 All Matches</h2>
        
        {% for match in summary.all_matches %}
        <div style="background: #f9f9f9; padding: 15px; border-radius: 6px; margin: 10px 0; border-left: 4px solid #003594;">
            <p style="margin: 5px 0;"><strong>{{ match.team1_display }}</strong> vs <strong>{{ match.team2_display }}</strong></p>
            <p style="margin: 5px 0; color: #666;">Score: {{ match.team1_score }}-{{ match.team2_score }}</p>
        </div>
        {% endfor %}
        {% endif %}
        {% else %}
        <div style="background: #d1ecf1; color: #0c5460; padding: 15px; border-radius: 6px; border: 1px solid #bee5eb;">
            <p style="margin: 0;">No matches recorded for today.</p>
        </div>
        {% endif %}
        
        <hr style="border: none; border-top: 1px solid #ddd; margin: 30px 0;">
        
        <p style="color: #999; font-size: 12px; text-align: center; margin: 0;">
            <a href="http://localhost:3000" style="color: #003594; text-decoration: none;">View Full Leaderboard</a> | 
            <a href="http://localhost:3000/daily" style="color: #003594; text-decoration: none;">View All Sessions</a>
        </p>
    </div>
</body>
</html>
