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);
        }
        
        .disputed-badge {
            background-color: rgba(254, 243, 199, 0.2);
            color: #fbbf24;
            border-color: #f59e0b;
        }
        
        .disputed-badge .tooltip {
            background-color: rgba(0, 0, 0, 0.9);
            color: white;
        }
        
        .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);
    }

    /* Statistics styles */
    .stats-container {
        max-width: 800px;
        margin: 0 auto;
    }

    .stats-title {
        text-align: center;
        font-size: 1.8rem;
        margin-bottom: 32px;
        color: var(--text-color);
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin-bottom: 32px;
    }

    @media (max-width: 600px) {
        .stats-grid {
            grid-template-columns: 1fr;
        }
    }

    .stat-card {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 24px;
        border-radius: 16px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .stat-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    }

    .stat-card.primary {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }

    .stat-card.secondary {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        color: white;
    }

    .stat-card.accent {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        color: white;
    }

    .stat-card.info {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        color: white;
    }

    .stat-card.highlight {
        background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
        color: white;
    }

    .stat-card.full-width {
        grid-column: 1 / -1;
        justify-content: center;
    }

    .stat-icon {
        font-size: 2.5rem;
        line-height: 1;
    }

    .stat-content {
        display: flex;
        flex-direction: column;
    }

    .stat-value {
        font-size: 2.2rem;
        font-weight: 700;
        line-height: 1.1;
    }

    .stat-label {
        font-size: 0.9rem;
        opacity: 0.9;
        margin-top: 4px;
    }

    .recent-activity {
        background: var(--light-gray);
        border-radius: 16px;
        padding: 24px;
        margin-bottom: 24px;
    }

    .recent-activity h3 {
        margin: 0 0 16px 0;
        font-size: 1.2rem;
        color: var(--text-color);
    }

    .activity-stats {
        display: flex;
        gap: 24px;
    }

    @media (max-width: 480px) {
        .activity-stats {
            flex-direction: column;
            gap: 12px;
        }
    }

    .activity-item {
        display: flex;
        justify-content: space-between;
        flex: 1;
        padding: 12px 16px;
        background: white;
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .activity-label {
        color: #666;
        font-size: 0.9rem;
    }

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

    @media (prefers-color-scheme: dark) {
        .stat-card {
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        }

        .stat-card:hover {
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
        }

        .recent-activity {
            background: rgba(255, 255, 255, 0.05);
        }

        .activity-item {
            background: rgba(255, 255, 255, 0.08);
        }

        .activity-label {
            color: #aaa;
        }
    }

    .disputed-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background-color: #fef3c7;
        color: #92400e;
        padding: 2px 6px;
        border-radius: 12px;
        font-size: 10px;
        font-weight: 600;
        margin-left: 6px;
        cursor: help;
        position: relative;
        border: 1px solid #f59e0b;
        text-transform: uppercase;
        letter-spacing: 0.025em;
    }
    
    .disputed-badge svg {
        width: 10px;
        height: 10px;
        color: #f59e0b;
        flex-shrink: 0;
    }
    
    .disputed-badge .tooltip {
        visibility: hidden;
        background-color: rgba(0, 0, 0, 0.9);
        color: white;
        text-align: center;
        border-radius: 4px;
        padding: 6px 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;
        text-transform: none;
        letter-spacing: normal;
    }
    
    .disputed-badge:hover .tooltip {
        visibility: visible;
        opacity: 1;
    }

    /* Category filter styles */
    .category-filter {
        display: flex;
        gap: 8px;
        margin-bottom: 20px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .category-btn {
        padding: 8px 16px;
        border: 2px solid var(--border-color);
        border-radius: 20px;
        background: white;
        color: var(--text-color);
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .category-btn:hover {
        border-color: var(--primary-color);
        color: var(--primary-color);
    }

    .category-btn.active {
        background: var(--primary-color);
        border-color: var(--primary-color);
        color: white;
    }

    .category-btn .category-count {
        background: rgba(0, 0, 0, 0.1);
        padding: 2px 8px;
        border-radius: 10px;
        font-size: 11px;
    }

    .category-btn.active .category-count {
        background: rgba(255, 255, 255, 0.2);
    }

    .category-description {
        text-align: center;
        font-size: 13px;
        color: #888;
        margin-bottom: 16px;
    }

    @media (prefers-color-scheme: dark) {
        .category-btn {
            background: var(--light-gray);
            border-color: var(--border-color);
        }

        .category-btn:hover {
            border-color: var(--primary-color);
        }

        .category-btn.active {
            background: var(--primary-color);
            border-color: var(--primary-color);
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="tabs">
    <div class="tab active" data-tab="tts">TTS</div>
    <div class="tab" data-tab="stats">Statistics</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">
        <!-- Category Filter -->
        <div class="category-filter">
            <button class="category-btn active" data-category="all">
                📊 전체
                <span class="category-count">{{ tts_leaderboard_all|length }}</span>
            </button>
            <button class="category-btn" data-category="mixed_lang">
                🔤 한영혼합
                <span class="category-count">{{ tts_leaderboard_mixed_lang|length }}</span>
            </button>
            <button class="category-btn" data-category="with_numbers">
                🔢 숫자혼합
                <span class="category-count">{{ tts_leaderboard_with_numbers|length }}</span>
            </button>
            <button class="category-btn" data-category="long_text">
                📝 긴문장
                <span class="category-count">{{ tts_leaderboard_long_text|length }}</span>
            </button>
        </div>
        <div class="category-description" id="category-description">
            모든 투표 기준 순위
        </div>

        <!-- All Category Leaderboard -->
        <div id="leaderboard-all" class="category-leaderboard">
            {% if tts_leaderboard_all and tts_leaderboard_all|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_all %}
                <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 not model.is_open %}
                            <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!</p>
                <a href="{{ url_for('arena') }}" class="btn">Go to Arena</a>
            </div>
            {% endif %}
        </div>

        <!-- Mixed Language Leaderboard -->
        <div id="leaderboard-mixed_lang" class="category-leaderboard" style="display: none;">
            {% if tts_leaderboard_mixed_lang and tts_leaderboard_mixed_lang|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_mixed_lang %}
                <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 not model.is_open %}
                            <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>한영혼합 데이터가 없습니다</h3>
                <p>알파벳이 5글자 이상 포함된 문장에 대한 투표가 아직 없습니다.</p>
            </div>
            {% endif %}
        </div>

        <!-- Numbers Leaderboard -->
        <div id="leaderboard-with_numbers" class="category-leaderboard" style="display: none;">
            {% if tts_leaderboard_with_numbers and tts_leaderboard_with_numbers|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_with_numbers %}
                <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 not model.is_open %}
                            <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>숫자혼합 데이터가 없습니다</h3>
                <p>숫자가 2개 이상 포함된 문장에 대한 투표가 아직 없습니다.</p>
            </div>
            {% endif %}
        </div>

        <!-- Long Text Leaderboard -->
        <div id="leaderboard-long_text" class="category-leaderboard" style="display: none;">
            {% if tts_leaderboard_long_text and tts_leaderboard_long_text|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_long_text %}
                <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 not model.is_open %}
                            <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>긴문장 데이터가 없습니다</h3>
                <p>50글자 이상인 문장에 대한 투표가 아직 없습니다.</p>
            </div>
            {% endif %}
        </div>
    </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 not model.is_open %}
                        <img src="{{ url_for('static', filename='closed.svg') }}" alt="Proprietary">
                        <span class="tooltip">Proprietary model</span>
                        {% endif %}
                    </div>
                    {% if model.id == "lanternfish-1" %}
                    <div class="disputed-badge">
                        <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
                            <line x1="12" y1="9" x2="12" y2="13"/>
                            <line x1="12" y1="17" x2="12" y2="17"/>
                        </svg>
                        <span>Disputed</span>
                        <span class="tooltip">Potential vote manipulation</span>
                    </div>
                    {% endif %}
                </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>

<!-- Statistics Tab -->
<div id="stats-tab" class="tab-content" style="display: none;">
    <div class="stats-container">
        <h2 class="stats-title">📊 Arena Statistics</h2>
        
        <div class="stats-grid">
            {# 참여자 수는 일시적으로 숨김
            <div class="stat-card primary">
                <div class="stat-icon">👥</div>
                <div class="stat-content">
                    <div class="stat-value">{{ voting_stats.total_voters }}</div>
                    <div class="stat-label">총 참여자 수</div>
                </div>
            </div>
            #}
            
            <div class="stat-card secondary">
                <div class="stat-icon">🗳️</div>
                <div class="stat-content">
                    <div class="stat-value">{{ voting_stats.total_votes }}</div>
                    <div class="stat-label">총 투표 수</div>
                </div>
            </div>
            
            <div class="stat-card accent">
                <div class="stat-icon">⏱️</div>
                <div class="stat-content">
                    <div class="stat-value">{% if voting_stats.total_eval_hours > 0 %}{{ voting_stats.total_eval_hours }}시간 {% endif %}{{ voting_stats.total_eval_minutes }}분</div>
                    <div class="stat-label">총 평가 시간</div>
                </div>
            </div>
            
            <div class="stat-card highlight">
                <div class="stat-icon">✍️</div>
                <div class="stat-content">
                    <div class="stat-value">{{ "{:,}".format(voting_stats.total_characters) }}</div>
                    <div class="stat-label">총 평가 글자 수</div>
                </div>
            </div>
            
            <div class="stat-card info">
                <div class="stat-icon">🎙️</div>
                <div class="stat-content">
                    <div class="stat-value">{{ voting_stats.active_models }}</div>
                    <div class="stat-label">활성 TTS 모델</div>
                </div>
            </div>
        </div>
        
        <div class="recent-activity">
            <h3>📅 최근 활동</h3>
            <div class="activity-stats">
                <div class="activity-item">
                    <span class="activity-label">최근 24시간</span>
                    <span class="activity-value">{{ voting_stats.votes_last_24h }} 투표</span>
                </div>
                <div class="activity-item">
                    <span class="activity-label">최근 7일</span>
                    <span class="activity-value">{{ voting_stats.votes_last_7d }} 투표</span>
                </div>
            </div>
        </div>
        
        <div class="thank-you-message">
            <p>🎉 한국어 TTS Arena에 참여해 주셔서 감사합니다! 여러분의 소중한 투표가 더 나은 TTS 모델 개발에 기여합니다.</p>
        </div>
    </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'); // Conversational 제거됨
        
        // 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)`;
                }
            }
            
            // Conversational slider 제거됨
        }
        
        // 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 === '#tts' || hash === '' || hash === '#stats') {
                // Switch to TTS tab (default) or stats
                tabs.forEach(t => t.classList.remove('active'));
                tabContents.forEach(c => c.style.display = 'none');
                
                const targetTab = hash === '#stats' ? 'stats' : 'tts';
                document.querySelector(`.tab[data-tab="${targetTab}"]`).classList.add('active');
                document.getElementById(`${targetTab}-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>
                                        ${model.id === 'lanternfish-1' ? `
                                        <div class="disputed-icon">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
                                                <line x1="12" y1="9" x2="12" y2="13"/>
                                                <line x1="12" y1="17" x2="12" y2="17"/>
                                            </svg>
                                            <span class="tooltip">Disputed - Potential vote manipulation</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');
        */

        // Category filter functionality
        const categoryBtns = document.querySelectorAll('.category-btn');
        const categoryLeaderboards = document.querySelectorAll('.category-leaderboard');
        const categoryDescription = document.getElementById('category-description');
        
        const categoryDescriptions = {
            'all': '모든 투표 기준 순위',
            'mixed_lang': '알파벳 5글자 이상 포함된 문장 기준',
            'with_numbers': '숫자 2개 이상 포함된 문장 기준',
            'long_text': '50글자 이상 긴 문장 기준'
        };
        
        categoryBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                const category = this.dataset.category;
                
                // Update active button
                categoryBtns.forEach(b => b.classList.remove('active'));
                this.classList.add('active');
                
                // Update description
                if (categoryDescription) {
                    categoryDescription.textContent = categoryDescriptions[category] || '';
                }
                
                // Show/hide leaderboards
                categoryLeaderboards.forEach(lb => {
                    lb.style.display = lb.id === `leaderboard-${category}` ? 'block' : 'none';
                });
            });
        });
        
        // 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 %}