{% extends "base.html" %}

{% block title %}{{ user.display_name }} - Week {{ week }}{% endblock %}

{% block content %}

<!-- Header with user name and week navigation -->
<header class="dashboard-header">
    <h1>{{ user.display_name }}</h1>
    <div class="week-nav">
        <a href="/{{ user.username }}/{{ week - 1 }}" class="week-btn">&larr; Week {{ week - 1 }}</a>
        <span class="current-week">Week {{ week }}</span>
        <a href="/{{ user.username }}/{{ week + 1 }}" class="week-btn">Week {{ week + 1 }} &rarr;</a>
    </div>
    <!-- Server-side refresh -->
    <div class="refresh-nav">
        <form method="post" action="/{{ user.username }}/{{ week }}/refresh" style="display: inline;">
            <button type="submit" class="refresh-btn">🔄 Refresh Scores</button>
        </form>
    </div>
</header>

<!-- Compact league scores at top -->
<section class="scores-summary">
    {% for league_info in league_data %}
    <div class="score-row {{ league_info.match_status }}">
        <div class="league-info">
            <!-- League color dot -->
            <span class="league-dot" style="background-color: {{ league_info.league_color }};"></span>
            <span class="league-name">{{ league_info.league.name }}</span>
        </div>
        <div class="score-compact">
            <!-- Win/Loss indicator -->
            <span class="match-indicator {{ league_info.match_status }}">
                {% if league_info.match_status == 'winning' %}
                    <span class="indicator-icon">↗️</span>
                    <span class="indicator-text">W</span>
                {% elif league_info.match_status == 'losing' %}
                    <span class="indicator-icon">↘️</span>
                    <span class="indicator-text">L</span>
                {% else %}
                    <span class="indicator-icon">↔️</span>
                    <span class="indicator-text">T</span>
                {% endif %}
            </span>
            
            <span class="user-name">{{ user.display_name }}</span>
            <span class="score user-score {{ league_info.match_status }}" id="user-score-{{ league_info.league.league_id }}">
                {{ league_info.user_points|round(1) }}
            </span>
            <span class="vs-compact">vs</span>
            <span class="score opp-score" id="opp-score-{{ league_info.league.league_id }}">
                {{ league_info.opponent_points|round(1) }}
            </span>
            <span class="opp-name">{{ league_info.opponent_user.display_name if league_info.opponent_user else 'Opponent' }}</span>
        </div>
    </div>
    {% endfor %}
</section>

<!-- Main calendar section -->
<section class="schedule-section">
    <h2>Week {{ week }} Games 
        {% if session.get('user_timezone') %}
            <span class="timezone-info">({{ session.get('user_timezone')|replace('_', ' ')|replace('America/', '') }})</span>
        {% else %}
            <span class="timezone-info">(PST/PDT)</span>
        {% endif %}
    </h2>
    <div class="calendar-rows">
        <!-- Track if we have any games using namespace -->
        {% set ns = namespace(has_games=false) %}
        
        <!-- Loop through days that have games -->
        {% for day_key, day_info in schedule.items() if day_info.games %}
        {% set ns.has_games = true %}
        <div class="day-row {% if day_info.is_past %}collapsed{% endif %}" data-day="{{ day_key }}">
            <div class="day-header" onclick="toggleDay('{{ day_key }}')">
                <div class="day-header-content">
                    <h3>{{ day_info.day_name }} {{ day_info.date }}</h3>
                    <span class="collapse-indicator">{% if day_info.is_past %}▶{% else %}▼{% endif %}</span>
                </div>
            </div>
            <div class="day-games" id="day-{{ day_key }}">
                <!-- Games for this day -->
                {% for game in day_info.games %}
                <div class="game-card {% if game.is_past %}collapsed{% endif %}" data-game="{{ loop.index }}">
                    <div class="game-header" onclick="toggleGame('{{ day_key }}', '{{ loop.index }}')">
                        <div class="game-info">
                            <div class="game-time">{{ game.time }}</div>
                            <div class="matchup">
                                <span class="away-team">{{ game.away_team }}</span>
                                <span class="at">@</span>
                                <span class="home-team">{{ game.home_team }}</span>
                            </div>
                            <span class="game-collapse-indicator">{% if game.is_past %}▶{% else %}▼{% endif %}</span>
                        </div>
                    </div>
                    <div class="game-content" id="game-{{ day_key }}-{{ loop.index }}">
                    
                        <!-- Show user's players in this game, grouped by league -->
                        <div class="game-players">
                            {% for league_info in league_data %}
                                {% set players_in_game = [] %}
                                {% for player in league_info.all_players %}
                                    {% if player.team in game.teams %}
                                        {% set _ = players_in_game.append(player) %}
                                    {% endif %}
                                {% endfor %}
                                
                                {% if players_in_game %}
                                <div class="league-player-group" style="border-left: 5px solid {{ league_info.league_color }}; border-right: 5px solid {{ league_info.league_color }}">
                                    <!-- Sort players: starters and bench -->
                                    {% set starters = [] %}
                                    {% set bench_players = [] %}
                                    {% for player in players_in_game %}
                                        {% if player.get('is_starter', False) %}
                                            {% set _ = starters.append(player) %}
                                        {% else %}
                                            {% set _ = bench_players.append(player) %}
                                        {% endif %}
                                    {% endfor %}
                                    
                                    <!-- Starters container (left-aligned) -->
                                    {% if starters %}
                                    <div class="starters-container">
                                        {% for player in starters %}
                                        <div class="player-pill starter {{ player.fantasy_positions[0]|lower if player.fantasy_positions else 'flex' }}">
                                            <span class="pos">{{ player.fantasy_positions[0] if player.fantasy_positions else 'FLEX' }}</span>
                                            <span class="name">{{ player.last_name }}</span>
                                        </div>
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                    
                                    <!-- Bench players container (right-aligned) -->
                                    {% if bench_players %}
                                    <div class="bench-container">
                                        {% for player in bench_players %}
                                        <div class="player-pill bench {{ player.fantasy_positions[0]|lower if player.fantasy_positions else 'flex' }}">
                                            <span class="pos">{{ player.fantasy_positions[0] if player.fantasy_positions else 'FLEX' }}</span>
                                            <span class="name">{{ player.last_name }}</span>
                                        </div>
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endfor %}
        
        <!-- Show message if no games found -->
        {% if not ns.has_games %}
        <div class="no-games-week">
            <p>No games found for week {{ week }}</p>
        </div>
        {% endif %}
    </div>
</section>
{% endblock %}