templates/leaderboard.html

{% extends "base.html" %}

{% block title %}Leaderboard - TTS Arena{% endblock %}

{% block current_page %}Leaderboard{% endblock %}

{% block extra_head %}
<style>
    .leaderboard-container {
        background: white;
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        overflow: hidden;
        width: 100%;
        overflow-x: auto; /* Allow horizontal scrolling on small screens */
    }

    .leaderboard-header {
        display: grid;
        grid-template-columns: 80px 1fr 120px 120px 120px;
        padding: 16px;
        background-color: var(--light-gray);
        border-bottom: 1px solid var(--border-color);
        font-weight: 600;
        min-width: 600px; /* Ensure minimum width for the grid */
    }

    .leaderboard-row {
        display: grid;
        grid-template-columns: 80px 1fr 120px 120px 120px;
        padding: 16px;
        border-bottom: 1px solid var(--border-color);
        align-items: center;
        min-width: 600px; /* Ensure minimum width for the grid */
    }

    .leaderboard-row:last-child {
        border-bottom: none;
    }

    .rank {
        font-weight: 600;
        color: var(--primary-color);
    }

    .model-name {
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .model-name-link {
        text-decoration: none;
        color: var(--text-color);
    }

    .model-name-link:hover {
        text-decoration: underline;
    }
    
    .license-icon {
        width: 12px;
        height: 12px;
        cursor: help;
        position: relative;
        opacity: 0.7;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .license-icon img {
        width: 12px;
        height: 12px;
        vertical-align: middle;
    }
    
    .tooltip {
        visibility: hidden;
        background-color: rgba(0, 0, 0, 0.8);
        color: white;
        text-align: center;
        border-radius: 4px;
        padding: 5px 10px;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        transform: translateX(-50%);
        opacity: 0;
        transition: opacity 0.3s;
        font-weight: normal;
        font-size: 12px;
        white-space: nowrap;
    }
    
    .license-icon:hover .tooltip {
        visibility: visible;
        opacity: 1;
    }

    .win-rate, .total-votes, .elo-score {
        text-align: right;
        color: #666;
    }
    
    .elo-score {
        font-weight: 600;
    }
    
    .tier-s {
        background-color: rgba(255, 215, 0, 0.1);
    }
    
    .tier-a {
        background-color: rgba(80, 200, 120, 0.1);
    }
    
    .tier-b {
        background-color: rgba(80, 70, 229, 0.1);
    }
    
    .filter-controls {
        display: flex;
        margin-bottom: 24px;
        align-items: center;
        gap: 16px;
    }
    
    .tabs {
        display: flex;
        border-bottom: 1px solid var(--border-color);
        margin-bottom: 24px;
    }

    .tab {
        padding: 12px 24px;
        cursor: pointer;
        position: relative;
        font-weight: 500;
    }

    .tab.active {
        color: var(--primary-color);
    }

    .tab.active::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: var(--primary-color);
    }

    .coming-soon {
        text-align: center;
        padding: 60px 0;
        color: #666;
        font-size: 18px;
        font-weight: 500;
    }
    
    .no-data {
        text-align: center;
        padding: 40px 0;
        color: #666;
    }
    
    .no-data h3 {
        margin-bottom: 12px;
        color: #333;
    }
    
    .no-data p {
        margin-bottom: 20px;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .view-toggle {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 20px;
    }
    
    .segmented-control {
        position: relative;
        display: inline-flex;
        background-color: var(--light-gray);
        border-radius: 8px;
        padding: 4px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        -webkit-user-select: none;
        user-select: none;
    }
    
    .segmented-control input[type="radio"] {
        display: none;
    }
    
    .segmented-control label {
        position: relative;
        z-index: 2;
        padding: 8px 20px;
        font-size: 14px;
        font-weight: 500;
        text-align: center;
        cursor: pointer;
        transition: color 0.2s ease;
        color: #666;
        border-radius: 6px;
    }
    
    .segmented-control label:hover {
        color: #333;
    }
    
    .segmented-control input[type="radio"]:checked + label {
        color: #fff;
    }
    
    .slider {
        position: absolute;
        z-index: 1;
        top: 4px;
        left: 4px;
        height: calc(100% - 8px);
        border-radius: 6px;
        transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
        background-color: var(--primary-color);
    }
    
    .login-prompt {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.7);
        z-index: 9999;
        justify-content: center;
        align-items: center;
    }
    
    .login-prompt-content {
        background-color: var(--light-gray);
        padding: 24px;
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        text-align: center;
        max-width: 400px;
        position: relative;
    }
    
    .login-prompt-content h3 {
        margin-bottom: 16px;
    }
    
    .login-prompt-content p {
        margin-bottom: 24px;
    }
    
    .login-prompt-close {
        position: absolute;
        top: 12px;
        right: 12px;
        font-size: 20px;
        cursor: pointer;
        color: #999;
    }
    
    .btn {
        display: inline-block;
        background-color: var(--primary-color);
        color: white;
        padding: 8px 16px;
        border-radius: 4px;
        text-decoration: none;
        font-weight: 500;
    }

    /* Timeline styles */
    .timeline-container {
        margin-bottom: 24px;
        position: relative;
    }
    
    .timeline-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
    }
    
    .timeline-title {
        font-weight: 600;
        color: var(--text-color);
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .timeline-title svg {
        opacity: 0.7;
    }
    
    .timeline-controls {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .timeline-select {
        padding: 8px 12px;
        border-radius: 4px;
        border: 1px solid var(--border-color);
        background-color: white;
        color: var(--text-color);
        font-size: 14px;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 8px center;
        background-size: 16px;
        padding-right: 36px;
        cursor: pointer;
    }
    
    .timeline-button {
        padding: 8px 12px;
        border-radius: 4px;
        border: 1px solid var(--border-color);
        background-color: white;
        color: var(--text-color);
        font-size: 14px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 4px;
    }
    
    .timeline-button:hover {
        background-color: var(--light-gray);
    }
    
    .timeline-track {
        height: 8px;
        background-color: var(--light-gray);
        border-radius: 4px;
        position: relative;
        margin: 20px 0;
    }
    
    .timeline-progress {
        position: absolute;
        height: 100%;
        background-color: var(--primary-color);
        border-radius: 4px;
        transition: width 0.3s ease;
    }
    
    .timeline-marker {
        position: absolute;
        width: 16px;
        height: 16px;
        background-color: white;
        border: 3px solid var(--primary-color);
        border-radius: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        cursor: pointer;
        z-index: 2;
        transition: left 0.3s ease;
    }
    
    .timeline-dates {
        display: flex;
        justify-content: space-between;
        margin-top: 8px;
        color: #666;
        font-size: 12px;
    }
    
    .historical-indicator {
        display: none;
        background-color: var(--primary-color);
        color: white;
        padding: 4px 10px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 500;
        margin-bottom: 16px;
        align-items: center;
        gap: 6px;
    }
    
    .historical-indicator.active {
        display: inline-flex;
    }
    
    .loading-spinner {
        display: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-top-color: white;
        animation: spin 1s linear infinite;
    }
    
    .loading.loading-spinner {
        display: inline-block;
    }
    
    @keyframes spin {
        to { transform: rotate(360deg); }
    }

    @media (max-width: 768px) {
        .leaderboard-header, .leaderboard-row {
            grid-template-columns: 60px 1fr 80px 80px;
            min-width: 400px; /* Reduced minimum width for mobile */
        }

        .total-votes {
            display: none;
        }

        .leaderboard-header .total-votes-header {
            display: none;
        }
        
        .filter-controls {
            flex-direction: column;
            align-items: flex-start;
        }
        
        .timeline-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
        }
        
        .timeline-controls {
            width: 100%;
        }
        
        .timeline-select {
            flex-grow: 1;
        }
    }

    @media (max-width: 480px) {
        .leaderboard-header, .leaderboard-row {
            grid-template-columns: 50px 1fr 70px;
            min-width: 300px; /* Further reduced for very small screens */
            font-size: 14px;
            padding: 12px 8px;
        }

        .elo-score {
            font-size: 14px;
        }

        .total-votes, .win-rate {
            display: none;
        }

        .leaderboard-header .total-votes-header,
        .leaderboard-header div:nth-child(3) {
            display: none;
        }

        .tab {
            padding: 10px 16px;
            font-size: 14px;
        }
    }

    /* Dark mode styles */
    @media (prefers-color-scheme: dark) {
        .no-data {
            color: var(--text-color);
        }

        .no-data h3 {
            color: var(--text-color);
        }
        
        
        .leaderboard-container {
            background-color: var(--light-gray);
            border-color: var(--border-color);
        }
        
        .leaderboard-header {
            background-color: rgba(80, 70, 229, 0.1);
            border-color: var(--border-color);
        }
        
        .leaderboard-row {
            border-color: var(--border-color);
        }
        
        .leaderboard-row:hover {
            background-color: rgba(255, 255, 255, 0.05);
        }
        
        .tier-s {
            background-color: rgba(255, 215, 0, 0.1);
        }
        
        .tier-a {
            background-color: rgba(192, 192, 192, 0.1);
        }
        
        .tier-b {
            background-color: rgba(205, 127, 50, 0.1);
        }
        
        .segmented-control {
            background-color: var(--light-gray);
            border-color: var(--border-color);
        }
        
        .segmented-control label {
            color: var(--text-color);
        }

        .segmented-control label:hover {
            color: var(--text-color);
        }
        
        .segmented-control .slider {
            background-color: var(--primary-color);
        }
        
        .tooltip {
            background-color: var(--light-gray);
            color: var(--text-color);
            border-color: var(--border-color);
        }
        .license-icon img {
            filter: invert(1);
        }
        
        .timeline-select, .timeline-button {
            background-color: var(--light-gray);
            border-color: var(--border-color);
            color: var(--text-color);
        }
        
        .timeline-button:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }
        
        .timeline-track {
            background-color: rgba(255, 255, 255, 0.1);
        }
        
        .timeline-marker {
            background-color: var(--light-gray);
        }
    }

    /* Top voters leaderboard styles */
    .voters-leaderboard {
        margin-top: 32px;
    }

    .voters-leaderboard-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
    }

    .visibility-toggle {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .toggle-switch {
        position: relative;
        display: inline-block;
        width: 48px;
        height: 24px;
    }

    .toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .toggle-slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: .4s;
        border-radius: 24px;
    }

    .toggle-slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: .4s;
        border-radius: 50%;
    }

    input:checked + .toggle-slider {
        background-color: var(--primary-color);
    }

    input:checked + .toggle-slider:before {
        transform: translateX(24px);
    }

    .toggle-label {
        font-size: 14px;
        color: var(--text-color);
    }

    .voters-table {
        width: 100%;
        border-collapse: collapse;
    }

    .voters-table th, .voters-table td {
        padding: 12px 16px;
        text-align: left;
        border-bottom: 1px solid var(--border-color);
    }
    
    .voters-table tr:last-child td {
        border-bottom: none;
    }
    
    .voters-table tr.current-user {
        background-color: rgba(80, 70, 229, 0.1);
    }
    
    .voters-table tr.current-user td {
        font-weight: 500;
    }
    
    .thank-you-message {
        /* text-align: center; */
        margin-top: 24px;
        padding: 16px;
        background-color: rgba(80, 200, 120, 0.1);
        border-radius: var(--radius);
        font-size: 16px;
    }
    
    @media (prefers-color-scheme: dark) {
        .thank-you-message {
            background-color: rgba(80, 200, 120, 0.2);
        }
    }

    .voters-table th {
        font-weight: 600;
        color: var(--text-color);
        background-color: var(--light-gray);
    }

    .voters-table tbody tr:hover {
        background-color: var(--light-gray);
    }

    .login-prompt {
        text-align: center;
        padding: 24px;
        background-color: var(--light-gray);
        border-radius: var(--radius);
        margin-top: 16px;
    }

    .no-voters-msg {
        text-align: center;
        padding: 24px;
        color: var(--text-color);
    }
</style>
{% endblock %}

{% block content %}
<div class="tabs">
    <div class="tab active" data-tab="tts">TTS</div>
    <div class="tab" data-tab="conversational">Conversational</div>
    <div class="tab" data-tab="voters">Top Voters</div>
</div>

<div id="tts-tab" class="tab-content">
    <div class="view-toggle">
        <div class="segmented-control">
            <input type="radio" id="tts-public" name="tts-view" checked>
            <label for="tts-public">Public</label>
            <input type="radio" id="tts-personal" name="tts-view">
            <label for="tts-personal">Personal</label>
            <div class="slider"></div>
        </div>
    </div>

    <!-- Historical timeline for TTS models - temporarily disabled -->
    <div id="tts-timeline-container" class="timeline-container" style="display: none;">
        <div class="timeline-header">
            <div class="timeline-title">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="12" cy="12" r="10"></circle>
                    <polyline points="12 6 12 12 16 14"></polyline>
                </svg>
                Leaderboard History
            </div>
            
            <div class="timeline-controls">
                <select id="tts-date-select" class="timeline-select">
                    {% if formatted_tts_dates %}
                        {% for date in formatted_tts_dates %}
                            <option value="{{ tts_key_dates[loop.index0].strftime('%Y-%m-%d') }}">{{ date }}</option>
                        {% endfor %}
                    {% else %}
                        <option value="">No historical data</option>
                    {% endif %}
                </select>
                
                <button id="tts-load-historical" class="timeline-button">
                    <span>Load</span>
                    <span id="tts-loading-spinner" class="loading-spinner"></span>
                </button>
            </div>
        </div>
        
        {% if tts_key_dates and tts_key_dates|length > 1 %}
        <div class="timeline-track">
            <div id="tts-timeline-progress" class="timeline-progress" style="width: 0%"></div>
            <div id="tts-timeline-marker" class="timeline-marker" style="left: 0%"></div>
        </div>
        <div class="timeline-dates">
            <div>{{ tts_key_dates[0].strftime('%b %Y') }}</div>
            <div>{{ tts_key_dates[-1].strftime('%b %Y') }}</div>
        </div>
        {% else %}
        <div class="no-data">
            <p>Not enough historical data available to show timeline.</p>
        </div>
        {% endif %}
    </div>
    
    <!-- Historical indicator - temporarily disabled -->
    <div class="historical-indicator" id="tts-historical-indicator" style="display: none;">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="10"></circle>
            <polyline points="12 6 12 12 16 14"></polyline>
        </svg>
        <span id="tts-historical-date">Historical view</span>
    </div>

    <div id="tts-public-leaderboard" class="leaderboard-view active">
        {% if tts_leaderboard and tts_leaderboard|length > 0 %}
        <div class="leaderboard-container">
            <div class="leaderboard-header">
                <div>Rank</div>
                <div>Model</div>
                <div style="text-align: right">Win Rate</div>
                <div style="text-align: right" class="total-votes-header">Total Votes</div>
                <div style="text-align: right">ELO</div>
            </div>
            
            {% for model in tts_leaderboard %}
            <div class="leaderboard-row {{ model.tier }}">
                <div class="rank">#{{ model.rank }}</div>
                <div class="model-name">
                    <a href="{{ model.model_url }}" target="_blank" class="model-name-link">{{ model.name }}</a>
                    <div class="license-icon">
                        {% if model.is_open %}
                        <img src="{{ url_for('static', filename='open.svg') }}" alt="Open">
                        <span class="tooltip">Open model</span>
                        {% else %}
                        <img src="{{ url_for('static', filename='closed.svg') }}" alt="Proprietary">
                        <span class="tooltip">Proprietary model</span>
                        {% endif %}
                    </div>
                </div>
                <div class="win-rate">{{ model.win_rate }}</div>
                <div class="total-votes">{{ model.total_votes }}</div>
                <div class="elo-score">{{ model.elo }}</div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="no-data">
            <h3>No data available yet</h3>
            <p>Be the first to vote and help build the leaderboard! Compare models in the arena to see how they stack up.</p>
            <a href="{{ url_for('arena') }}" class="btn">Go to Arena</a>
        </div>
        {% endif %}
    </div>
    
    <div id="tts-personal-leaderboard" class="leaderboard-view" style="display: none;">
        {% if current_user.is_authenticated and tts_personal_leaderboard and tts_personal_leaderboard|length > 0 %}
        <div class="leaderboard-container">
            <div class="leaderboard-header">
                <div>Rank</div>
                <div>Model</div>
                <div style="text-align: right">Win Rate</div>
                <div style="text-align: right" class="total-votes-header">Total Votes</div>
                <div style="text-align: right">Wins</div>
            </div>
            
            {% for model in tts_personal_leaderboard %}
            <div class="leaderboard-row">
                <div class="rank">#{{ model.rank }}</div>
                <div class="model-name">
                    <a href="{{ model.model_url }}" target="_blank" class="model-name-link">{{ model.name }}</a>
                    <div class="license-icon">
                        {% if model.is_open %}
                        <img src="{{ url_for('static', filename='open.svg') }}" alt="Open">
                        <span class="tooltip">Open model</span>
                        {% else %}
                        <img src="{{ url_for('static', filename='closed.svg') }}" alt="Proprietary">
                        <span class="tooltip">Proprietary model</span>
                        {% endif %}
                    </div>
                </div>
                <div class="win-rate">{{ model.win_rate }}</div>
                <div class="total-votes">{{ model.total_votes }}</div>
                <div class="elo-score">{{ model.wins }}</div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="no-data">
            <h3>No personal data yet</h3>
            <p>You haven't voted on any TTS models yet. Visit the arena to compare models and build your personal leaderboard.</p>
            <a href="{{ url_for('arena') }}" class="btn">Go to Arena</a>
        </div>
        {% endif %}
    </div>
    
    <!-- Historical TTS leaderboard - temporarily disabled -->
    <div id="tts-historical-leaderboard" class="leaderboard-view" style="display: none;">
        <!-- This will be populated dynamically with JavaScript -->
        <div class="leaderboard-container">
            <div class="leaderboard-header">
                <div>Rank</div>
                <div>Model</div>
                <div style="text-align: right">Win Rate</div>
                <div style="text-align: right" class="total-votes-header">Total Votes</div>
                <div style="text-align: right">ELO</div>
            </div>
            <div id="tts-historical-rows">
                <!-- Historical rows will be inserted here -->
                <div class="no-data">
                    <p>Select a date and click "Load" to view historical data.</p>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="conversational-tab" class="tab-content" style="display: none;">
    <div class="view-toggle">
        <div class="segmented-control">
            <input type="radio" id="conversational-public" name="conversational-view" checked>
            <label for="conversational-public">Public</label>
            <input type="radio" id="conversational-personal" name="conversational-view">
            <label for="conversational-personal">Personal</label>
            <div class="slider"></div>
        </div>
    </div>

    <!-- Historical timeline for Conversational models - temporarily disabled -->
    <div id="conversational-timeline-container" class="timeline-container" style="display: none;">
        <div class="timeline-header">
            <div class="timeline-title">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="12" cy="12" r="10"></circle>
                    <polyline points="12 6 12 12 16 14"></polyline>
                </svg>
                Leaderboard History
            </div>
            
            <div class="timeline-controls">
                <select id="conversational-date-select" class="timeline-select">
                    {% if formatted_conversational_dates %}
                        {% for date in formatted_conversational_dates %}
                            <option value="{{ conversational_key_dates[loop.index0].strftime('%Y-%m-%d') }}">{{ date }}</option>
                        {% endfor %}
                    {% else %}
                        <option value="">No historical data</option>
                    {% endif %}
                </select>
                
                <button id="conversational-load-historical" class="timeline-button">
                    <span>Load</span>
                    <span id="conversational-loading-spinner" class="loading-spinner"></span>
                </button>
            </div>
        </div>
        
        {% if conversational_key_dates and conversational_key_dates|length > 1 %}
        <div class="timeline-track">
            <div id="conversational-timeline-progress" class="timeline-progress" style="width: 0%"></div>
            <div id="conversational-timeline-marker" class="timeline-marker" style="left: 0%"></div>
        </div>
        <div class="timeline-dates">
            <div>{{ conversational_key_dates[0].strftime('%b %Y') }}</div>
            <div>{{ conversational_key_dates[-1].strftime('%b %Y') }}</div>
        </div>
        {% else %}
        <div class="no-data">
            <p>Not enough historical data available to show timeline.</p>
        </div>
        {% endif %}
    </div>
    
    <!-- Historical indicator - temporarily disabled -->
    <div class="historical-indicator" id="conversational-historical-indicator" style="display: none;">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="10"></circle>
            <polyline points="12 6 12 12 16 14"></polyline>
        </svg>
        <span id="conversational-historical-date">Historical view</span>
    </div>

    <div id="conversational-public-leaderboard" class="leaderboard-view active">
        {% if conversational_leaderboard and conversational_leaderboard|length > 0 %}
        <div class="leaderboard-container">
            <div class="leaderboard-header">
                <div>Rank</div>
                <div>Model</div>
                <div style="text-align: right">Win Rate</div>
                <div style="text-align: right" class="total-votes-header">Total Votes</div>
                <div style="text-align: right">ELO</div>
            </div>
            
            {% for model in conversational_leaderboard %}
            <div class="leaderboard-row {{ model.tier }}">
                <div class="rank">#{{ model.rank }}</div>
                <div class="model-name">
                    {{ model.name }}
                    <div class="license-icon">
                        {% if model.is_open %}
                        <img src="{{ url_for('static', filename='open.svg') }}" alt="Open">
                        <span class="tooltip">Open model</span>
                        {% else %}
                        <img src="{{ url_for('static', filename='closed.svg') }}" alt="Proprietary">
                        <span class="tooltip">Proprietary model</span>
                        {% endif %}
                    </div>
                </div>
                <div class="win-rate">{{ model.win_rate }}</div>
                <div class="total-votes">{{ model.total_votes }}</div>
                <div class="elo-score">{{ model.elo }}</div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="no-data">
            <h3>No data available yet</h3>
            <p>Be the first to vote and help build the conversational leaderboard! Compare models in the arena to see how they stack up.</p>
            <a href="{{ url_for('arena') }}#conversational" class="btn">Go to Arena</a>
        </div>
        {% endif %}
    </div>
    
    <div id="conversational-personal-leaderboard" class="leaderboard-view" style="display: none;">
        {% if current_user.is_authenticated and conversational_personal_leaderboard and conversational_personal_leaderboard|length > 0 %}
        <div class="leaderboard-container">
            <div class="leaderboard-header">
                <div>Rank</div>
                <div>Model</div>
                <div style="text-align: right">Win Rate</div>
                <div style="text-align: right" class="total-votes-header">Total Votes</div>
                <div style="text-align: right">Wins</div>
            </div>
            
            {% for model in conversational_personal_leaderboard %}
            <div class="leaderboard-row">
                <div class="rank">#{{ model.rank }}</div>
                <div class="model-name">
                    {{ model.name }}
                    <div class="license-icon">
                        {% if model.is_open %}
                        <img src="{{ url_for('static', filename='open.svg') }}" alt="Open">
                        <span class="tooltip">Open model</span>
                        {% else %}
                        <img src="{{ url_for('static', filename='closed.svg') }}" alt="Proprietary">
                        <span class="tooltip">Proprietary model</span>
                        {% endif %}
                    </div>
                </div>
                <div class="win-rate">{{ model.win_rate }}</div>
                <div class="total-votes">{{ model.total_votes }}</div>
                <div class="elo-score">{{ model.wins }}</div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="no-data">
            <h3>No personal data yet</h3>
            <p>You haven't voted on any conversational models yet. Visit the arena to compare models and build your personal leaderboard.</p>
            <a href="{{ url_for('arena') }}#conversational" class="btn">Go to Arena</a>
        </div>
        {% endif %}
    </div>
    
    <!-- Historical Conversational leaderboard - temporarily disabled -->
    <div id="conversational-historical-leaderboard" class="leaderboard-view" style="display: none;">
        <!-- This will be populated dynamically with JavaScript -->
        <div class="leaderboard-container">
            <div class="leaderboard-header">
                <div>Rank</div>
                <div>Model</div>
                <div style="text-align: right">Win Rate</div>
                <div style="text-align: right" class="total-votes-header">Total Votes</div>
                <div style="text-align: right">ELO</div>
            </div>
            <div id="conversational-historical-rows">
                <!-- Historical rows will be inserted here -->
                <div class="no-data">
                    <p>Select a date and click "Load" to view historical data.</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Add Top Voters Tab -->
<div id="voters-tab" class="tab-content" style="display: none;">
    <div class="voters-leaderboard">
        <div class="voters-leaderboard-header">
            <h2>Top Voters</h2>
            {% if current_user.is_authenticated %}
            <div class="visibility-toggle">
                <span class="toggle-label">Show me in leaderboard</span>
                <label class="toggle-switch">
                    <input type="checkbox" id="visibility-toggle" {% if user_leaderboard_visibility %}checked{% endif %}>
                    <span class="toggle-slider"></span>
                </label>
            </div>
            {% endif %}
        </div>
        
        {% if top_voters %}
        <div class="leaderboard-container">
            <table class="voters-table">
                <thead>
                    <tr>
                        <th>Rank</th>
                        <th>Username</th>
                        <th>Total Votes</th>
                        <th>Joined</th>
                    </tr>
                </thead>
                <tbody>
                    {% for voter in top_voters %}
                    <tr{% if current_user.is_authenticated and current_user.username == voter.username %} class="current-user"{% endif %}>
                        <td>{{ voter.rank }}</td>
                        <td><a href="https://huggingface.co/{{ voter.username }}" target="_blank" rel="noopener">{{ voter.username }}</a></td>
                        <td>{{ voter.vote_count }}</td>
                        <td>{{ voter.join_date }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="no-data">
            <p>No voters data available yet. Start voting to appear on the leaderboard!</p>
        </div>
        {% endif %}
        
        {% if top_voters %}
        <div class="thank-you-message">
            <p>Thank you to all our voters for helping improve TTS Arena! Your contributions make this community better.</p>
        </div>
        {% endif %}
        
        {% if not current_user.is_authenticated %}
        <div class="login-prompt">
            <p>Log in to appear on the leaderboard and track your voting stats!</p>
            <div class="button-container" style="margin-top: 16px;">
                <a href="{{ url_for('auth.login') }}" class="btn">Log In</a>
            </div>
        </div>
        {% endif %}
    </div>
</div>

<div class="login-prompt">
    <div class="login-prompt-content">
        <div class="login-prompt-close">&times;</div>
        <h3>Login Required</h3>
        <p>You need to be logged in to view your personal leaderboard.</p>
        <a href="{{ url_for('auth.login', next=request.path) }}" class="btn">Login with Hugging Face</a>
    </div>
</div>

<!-- Pass auth status via data attribute -->
<div id="auth-data" data-is-logged-in="{% if current_user.is_authenticated %}true{% else %}false{% endif %}"></div>

<script>
    // Set auth status from server-side
    var isLoggedIn = document.getElementById('auth-data').dataset.isLoggedIn === 'true';
</script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize slider positions
        const ttsSlider = document.querySelector('#tts-tab .slider');
        const convSlider = document.querySelector('#conversational-tab .slider');
        
        // Function to position sliders based on selected radio
        function positionSliders() {
            // Position TTS slider
            if (ttsSlider) {
                const ttsSelectedRadio = document.querySelector('#tts-tab input[name="tts-view"]:checked');
                if (ttsSelectedRadio) {
                    const ttsSelectedLabel = document.querySelector(`label[for="${ttsSelectedRadio.id}"]`);
                    ttsSlider.style.width = `${ttsSelectedLabel.offsetWidth}px`;
                    ttsSlider.style.transform = `translateX(${ttsSelectedLabel.offsetLeft - 4}px)`;
                }
            }
            
            // Position Conversational slider
            if (convSlider) {
                const convSelectedRadio = document.querySelector('#conversational-tab input[name="conversational-view"]:checked');
                if (convSelectedRadio) {
                    const convSelectedLabel = document.querySelector(`label[for="${convSelectedRadio.id}"]`);
                    convSlider.style.width = `${convSelectedLabel.offsetWidth}px`;
                    convSlider.style.transform = `translateX(${convSelectedLabel.offsetLeft - 4}px)`;
                }
            }
        }
        
        // Position sliders on load
        positionSliders();
        
        // Tab switching
        const tabs = document.querySelectorAll('.tab');
        const tabContents = document.querySelectorAll('.tab-content');
        
        // Check URL hash for direct tab access
        function checkHashAndSetTab() {
            const hash = window.location.hash.toLowerCase();
            if (hash === '#conversational') {
                // Switch to conversational tab
                tabs.forEach(t => t.classList.remove('active'));
                tabContents.forEach(c => c.style.display = 'none');
                
                document.querySelector('.tab[data-tab="conversational"]').classList.add('active');
                document.getElementById('conversational-tab').style.display = 'block';
                
                // Ensure sliders are positioned correctly
                setTimeout(positionSliders, 50);
            } else if (hash === '#tts' || hash === '') {
                // Switch to TTS tab (default)
                tabs.forEach(t => t.classList.remove('active'));
                tabContents.forEach(c => c.style.display = 'none');
                
                document.querySelector('.tab[data-tab="tts"]').classList.add('active');
                document.getElementById('tts-tab').style.display = 'block';
                
                // Ensure sliders are positioned correctly
                setTimeout(positionSliders, 50);
            }
        }
        
        // Check hash on page load
        checkHashAndSetTab();
        
        // Listen for hash changes
        window.addEventListener('hashchange', checkHashAndSetTab);
        
        tabs.forEach(tab => {
            tab.addEventListener('click', function() {
                const tabId = this.dataset.tab;
                
                // Update URL hash without page reload
                history.replaceState(null, null, `#${tabId}`);
                
                // Remove active class from all tabs and hide all contents
                tabs.forEach(t => t.classList.remove('active'));
                tabContents.forEach(c => c.style.display = 'none');
                
                // Add active class to clicked tab and show corresponding content
                this.classList.add('active');
                document.getElementById(tabId + '-tab').style.display = 'block';
                
                // Position sliders after tab switch
                setTimeout(positionSliders, 0);
            });
        });
        
        // View toggle functionality
        const viewToggles = document.querySelectorAll('.segmented-control input[type="radio"]');
        const loginPrompt = document.querySelector('.login-prompt');
        const loginPromptClose = document.querySelector('.login-prompt-close');
        
        viewToggles.forEach(toggle => {
            toggle.addEventListener('change', function() {
                const view = this.id.split('-')[1]; // 'public', 'personal', or 'historical'
                const tabId = this.closest('.tab-content').id.split('-')[0]; // 'tts' or 'conversational'
                
                if (view === 'personal' && !isLoggedIn) {
                    // Show login prompt
                    loginPrompt.style.display = 'flex';
                    // Reset the radio button to public
                    document.getElementById(`${tabId}-public`).checked = true;
                    return;
                }
                
                // Position the slider using our function
                positionSliders();
                
                // Show corresponding leaderboard
                const leaderboardViews = document.querySelectorAll(`#${tabId}-tab .leaderboard-view`);
                leaderboardViews.forEach(v => {
                    v.style.display = 'none';
                    v.classList.remove('active');
                });
                const activeView = document.getElementById(`${tabId}-${view}-leaderboard`);
                activeView.style.display = 'block';
                activeView.classList.add('active');
                
                // Toggle timeline visibility - temporarily disabled
                /* 
                const timelineContainer = document.getElementById(`${tabId}-timeline-container`);
                if (timelineContainer) {
                    timelineContainer.style.display = view === 'historical' ? 'block' : 'none';
                }
                */
            });
        });
        
        // Close login prompt
        if (loginPromptClose) {
            loginPromptClose.addEventListener('click', function() {
                loginPrompt.style.display = 'none';
            });
        }
        
        // Historical data functionality - temporarily disabled
        /* 
        function setupHistoricalView(modelType) {
            const loadButton = document.getElementById(`${modelType}-load-historical`);
            const dateSelect = document.getElementById(`${modelType}-date-select`);
            const historicalRows = document.getElementById(`${modelType}-historical-rows`);
            const loadingSpinner = document.getElementById(`${modelType}-loading-spinner`);
            const historicalIndicator = document.getElementById(`${modelType}-historical-indicator`);
            const historicalDate = document.getElementById(`${modelType}-historical-date`);
            const timelineMarker = document.getElementById(`${modelType}-timeline-marker`);
            const timelineProgress = document.getElementById(`${modelType}-timeline-progress`);
            
            if (!loadButton || !dateSelect || !historicalRows) return;
            
            loadButton.addEventListener('click', function() {
                const selectedDate = dateSelect.value;
                if (!selectedDate) return;
                
                // Show loading state
                loadingSpinner.classList.add('loading');
                
                // Fetch historical data
                fetch(`/api/historical-leaderboard/${modelType}?date=${selectedDate}`)
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Network response was not ok');
                        }
                        return response.json();
                    })
                    .then(data => {
                        // Update historical indicator
                        historicalIndicator.classList.add('active');
                        historicalDate.textContent = data.date;
                        
                        // Clear existing rows
                        historicalRows.innerHTML = '';
                        
                        if (data.leaderboard && data.leaderboard.length > 0) {
                            // Add new rows
                            data.leaderboard.forEach(model => {
                                const row = document.createElement('div');
                                row.className = `leaderboard-row ${model.tier || ''}`;
                                
                                row.innerHTML = `
                                    <div class="rank">#${model.rank}</div>
                                    <div class="model-name">
                                        ${model.model_url ? 
                                            `<a href="${model.model_url}" target="_blank" class="model-name-link">${model.name}</a>` : 
                                            model.name
                                        }
                                        <div class="license-icon">
                                            <img src="${model.is_open ? '/static/open.svg' : '/static/closed.svg'}" alt="${model.is_open ? 'Open' : 'Proprietary'}">
                                            <span class="tooltip">${model.is_open ? 'Open model' : 'Proprietary model'}</span>
                                        </div>
                                    </div>
                                    <div class="win-rate">${model.win_rate}</div>
                                    <div class="total-votes">${model.total_votes}</div>
                                    <div class="elo-score">${model.elo}</div>
                                `;
                                
                                historicalRows.appendChild(row);
                            });
                        } else {
                            // Show no data message
                            historicalRows.innerHTML = `
                                <div class="no-data">
                                    <p>No data available for this date.</p>
                                </div>
                            `;
                        }
                        
                        // Update timeline marker position based on selected date
                        updateTimelinePosition(modelType, selectedDate);
                    })
                    .catch(error => {
                        console.error('Error fetching historical data:', error);
                        historicalRows.innerHTML = `
                            <div class="no-data">
                                <p>Error loading data. Please try again.</p>
                            </div>
                        `;
                    })
                    .finally(() => {
                        // Hide loading state
                        loadingSpinner.classList.remove('loading');
                    });
            });
            
            // Update the timeline marker position
            function updateTimelinePosition(modelType, selectedDate) {
                const timeline = document.querySelector(`#${modelType}-timeline-container .timeline-track`);
                if (!timeline || !timelineMarker || !timelineProgress) return;
                
                // Get all the dates
                const options = Array.from(dateSelect.options);
                const dateValues = options.map(option => option.value);
                const selectedIndex = dateValues.indexOf(selectedDate);
                
                if (selectedIndex >= 0 && dateValues.length > 1) {
                    // Calculate percentage position (0 to 100)
                    const position = (selectedIndex / (dateValues.length - 1)) * 100;
                    
                    // Update marker and progress
                    timelineMarker.style.left = `${position}%`;
                    timelineProgress.style.width = `${position}%`;
                }
            }
        }
        
        // Setup historical view for both model types
        setupHistoricalView('tts');
        setupHistoricalView('conversational');
        */
        
        // Final positioning after all DOM operations are complete
        setTimeout(positionSliders, 100);
        
        // Reposition sliders on window resize
        window.addEventListener('resize', function() {
            positionSliders();
        });

        // Add to the end of the script section  
        document.getElementById('visibility-toggle')?.addEventListener('change', function() {
            // Send request to toggle visibility
            fetch('/api/toggle-leaderboard-visibility', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                credentials: 'same-origin'
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Use the toast function from base.html
                    openToast(data.message, 'success');
                } else {
                    openToast(data.error || 'Failed to update visibility', 'error');
                    // Revert the toggle state if there was an error
                    this.checked = !this.checked;
                }
            })
            .catch(error => {
                console.error('Error:', error);
                openToast('Failed to update visibility', 'error');
                // Revert the toggle state if there was an error
                this.checked = !this.checked;
            });
        });
    });
</script>
{% endblock %}