RosterHash/templates/dashboard.html

{% 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>RosterHash for {{ user.display_name }}</h1>
    <div class="week-nav">
        <a href="/{{ user.username }}/{{ week - 1 }}{% if is_debug_mode %}?debug=true{% endif %}" class="week-btn">&larr; Week {{ week - 1 }}</a>
        <span class="current-week">Week {{ week }}</span>
        <a href="/{{ user.username }}/{{ week + 1 }}{% if is_debug_mode %}?debug=true{% endif %}" class="week-btn">Week {{ week + 1 }} &rarr;</a>
    </div>
    <!-- Server-side refresh and navigation -->
    <div class="refresh-nav">
        <form method="post" action="/{{ user.username }}/{{ week }}/refresh{% if is_debug_mode %}?debug=true{% endif %}" style="display: inline;">
            <button type="submit" class="refresh-btn-small">Refresh</button>
        </form>
        <a href="/change-username" class="change-username-btn">Change Username</a>
    </div>
    
    <!-- Debug Time Picker (only shown when ?debug=true) -->
    {% if is_debug_mode %}
    <div class="debug-time-picker">
        <form method="post" action="/set_debug_time?debug=true" style="display: inline-block;">
            <label for="debug_time" style="color: #ff6b6b; font-size: 14px; font-weight: bold;">🐛 Debug Time:</label>
            <input type="datetime-local" 
                   id="debug_time" 
                   name="debug_time" 
                   value="{% if debug_time_override %}{{ debug_time_override.strftime('%Y-%m-%dT%H:%M') }}{% endif %}"
                   style="margin: 0 8px; padding: 4px 8px; border: 2px solid #ff6b6b; border-radius: 4px; background: var(--bg-color); color: var(--text-color);">
            <input type="hidden" name="return_url" value="{{ request.url }}">
            <button type="submit" style="padding: 4px 12px; background: #ff6b6b; color: white; border: none; border-radius: 4px; cursor: pointer;">Set</button>
            <button type="submit" onclick="document.getElementById('debug_time').value=''; return true;" style="padding: 4px 12px; background: #666; color: white; border: none; border-radius: 4px; cursor: pointer; margin-left: 4px;">Clear</button>
        </form>
        {% if debug_time_override %}
        <div style="color: #ff6b6b; font-size: 12px; margin-top: 4px;">
            Current override: {{ debug_time_override.strftime('%Y-%m-%d %H:%M') }}
        </div>
        {% endif %}
    </div>
    {% endif %}
</header>

<!-- Compact league scores at top -->
<section class="scores-summary">
    {% for league_info in league_data %}
    <div class="score-row">
        <div class="league-info">
            <!-- League color dot -->
            <span class="league-dot" style="background-color: {{ league_info.league_color }};"></span>
            <a href="https://sleeper.app/leagues/{{ league_info.league.league_id }}" target="_blank" class="league-name-link">
                <span class="league-name">{{ league_info.league.name }}</span>
            </a>
        </div>
        <div class="score-compact">
            <!-- Win/Loss indicator -->
            <span class="match-indicator">
                {% if league_info.match_status == 'winning' %}
                    <span class="indicator-icon">↗️</span>
                {% elif league_info.match_status == 'losing' %}
                    <span class="indicator-icon">↘️</span>
                {% else %}
                    <span class="indicator-icon">↔️</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>

<!-- Favorites Section (hidden by default, shown by JavaScript if favorites exist) -->
<section class="favorites-section-main" id="favorites-section-main">
    <h2>⭐ Favorite Teams</h2>
    <div id="favorites-display" class="favorites-display">
        <!-- Populated by JavaScript -->
    </div>
</section>

<!-- Main calendar section -->
<section class="schedule-section">
    <h2>Week {{ week }} Games 
    <br> 
        {% if session.get('user_timezone') %}
            <span class="timezone-info">timezone: ({{ session.get('user_timezone') }})</span>
        {% else %}
            <span class="timezone-info">timezone: (PST/PDT)</span>
        {% endif %}
    </h2>
    <div class="calendar-rows">
        <!-- Track if we have any games using namespace -->
        {% set ns = namespace(has_games=false) %}
        
        <!-- Sort days: live/future days first, then completed days, then by date -->
        {% set live_future_days = [] %}
        {% set completed_days = [] %}
        {% for day_key, day_info in schedule.items() if day_info.games %}
            {% if day_info.has_live_games or day_info.has_future_games %}
                {% set _ = live_future_days.append((day_key, day_info)) %}
            {% else %}
                {% set _ = completed_days.append((day_key, day_info)) %}
            {% endif %}
        {% endfor %}
        {% set sorted_live_future = live_future_days|sort(attribute='1.date_obj') %}
        {% set sorted_completed = completed_days|sort(attribute='1.date_obj') %}
        
        <!-- Loop through days: live/future first, then completed -->
        {% for day_key, day_info in sorted_live_future + sorted_completed %}
        {% 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 and not game.is_live %}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 }}
                                {% if game.is_live %}
                                    <span class="live-indicator"></span>
                                    <span class="live-text">LIVE</span>
                                {% endif %}
                            </div>
                            <div class="matchup">
                                <span class="away-team">{{ game.away_team }}</span>
                                {% if game.away_score is not none %}
                                    <span class="nfl-score">{{ game.away_score }}</span>
                                {% endif %}
                                <span class="at">@</span>
                                {% if game.home_score is not none %}
                                    <span class="nfl-score">{{ game.home_score }}</span>
                                {% endif %}
                                <span class="home-team">{{ game.home_team }}</span>
                            </div>
                            <span class="game-collapse-indicator">{% if game.is_past and not game.is_live %}▶{% 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 %}
                                        <a href="https://sleeper.app/leagues/{{ league_info.league.league_id }}" target="_blank" class="player-pill-link">
                                            <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' }}-{{ player.team if player.team else 'FA' }}</span>
                                                <span class="name">{{ player.last_name }}
                                                    {% if player.injury_status %}
                                                        <span class="injury-status">{{ player.injury_status }}</span>
                                                    {% endif %}
                                                </span>
                                                <span class="points">{{ player.points|round(1) }}pts</span>
                                            </div>
                                        </a>
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                    
                                    <!-- Bench players container (right-aligned) -->
                                    {% if bench_players %}
                                    <div class="bench-container">
                                        {% for player in bench_players %}
                                        <a href="https://sleeper.app/leagues/{{ league_info.league.league_id }}" target="_blank" class="player-pill-link">
                                            <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' }}-{{ player.team if player.team else 'FA' }}</span>
                                                <span class="name">{{ player.last_name }}
                                                    {% if player.injury_status %}
                                                        <span class="injury-status">{{ player.injury_status }}</span>
                                                    {% endif %}
                                                </span>
                                                <span class="points">{{ player.points|round(1) }}pts</span>
                                            </div>
                                        </a>
                                        {% endfor %}
                                    </div>
                                    {% endif %}
                                </div>
                                {% endif %}
                            {% endfor %}
                        </div>
                        
                        <!-- Small league info footer -->
                        <div class="game-league-footer">
                            {% 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-footer-item">
                                    <span class="league-dot" style="background-color: {{ league_info.league_color }};"></span>
                                    <span class="league-name-small">{{ league_info.league.name }}</span>
                                    <span class="player-count">({{ players_in_game|length }})</span>
                                </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 %}