{% extends "base.html" %}

{% block title %}Home - Pickleball ELO Tracker{% endblock %}

{% block content %}
<div style="max-width: 700px; text-align: center; margin: 0 auto;">
    <h1>🏓 Pickleball ELO Tracker</h1>
    <p style="color: #666;">Pure ELO Rating System v3.0</p>
    
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-value">{{ match_count }}</div>
            <div class="stat-label">Matches</div>
        </div>
        <div class="stat-card">
            <div class="stat-value">{{ player_count }}</div>
            <div class="stat-label">Players</div>
        </div>
        <div class="stat-card">
            <div class="stat-value">{{ session_count }}</div>
            <div class="stat-label">Sessions</div>
        </div>
    </div>
    
    {% include "components/nav.html" %}
    
    <div style="margin-top: 40px; text-align: left; background: #f9f9f9; padding: 25px; border-radius: 12px;">
        <h2 style="color: #003594; margin-top: 0;">📊 How Ratings Work</h2>
        
        <p><strong>One unified rating</strong> — Singles and doubles matches both contribute to a single ELO rating. Everyone starts at 1500.</p>
        
        <p><strong>Per-point scoring</strong> — Your rating change depends on your actual point performance (points won ÷ total points), not just whether you won or lost. Winning 11-2 earns more than winning 11-9.</p>
        
        <p><strong>Smart doubles scoring</strong> — In doubles, we calculate your "effective opponent" using:<br>
        <code style="background: #e9e9e9; padding: 2px 6px; border-radius: 4px;">Effective Opponent = Opp1 + Opp2 - Teammate</code></p>
        
        <p>This means:</p>
        <ul style="margin-left: 20px;">
            <li><strong>Strong teammate</strong> → lower effective opponent → less credit for winning</li>
            <li><strong>Weak teammate</strong> → higher effective opponent → more credit for winning</li>
        </ul>
        
        <p><strong>The formula:</strong><br>
        <code style="background: #e9e9e9; padding: 4px 8px; border-radius: 4px; display: inline-block; margin-top: 5px;">
        Rating Change = 32 × (Actual Performance - Expected Performance)
        </code></p>
        
        <p style="color: #666; font-size: 13px; margin-bottom: 0;">Fair, transparent, and no mysterious "volatility" numbers. Just skill vs. expectations.</p>
    </div>
</div>
{% endblock %}