{% extends "_layout.html" %}

{% block content %}
<div class="header-section">
    <h2>{{ fluent(key="home-title", lang=lang) }}</h2>

    <div class="table-controls">
        <form id="sortForm" method="get" action="">
            <div class="control-group">
                <label class="switch-ui" title="{{ fluent(key='home-experimental-tooltip', lang=lang) }}">
                    <input type="checkbox" name="experimental" value="true" 
                           onchange="this.form.submit()" 
                           {% if show_experimental %}checked{% endif %}>
                    <span class="slider"></span>
                </label>
                <span class="switch-text">{{ fluent(key="home-experimental", lang=lang) }}</span>
            </div>

            <input type="hidden" name="sort" id="sortInput" value="{{ current_sort }}">
            <input type="hidden" name="order" id="orderInput" value="{{ current_order }}">

            <div class="control-group">
                <label>{{ fluent(key="home-sort-by", lang=lang) }}</label>
                <div class="dropdown" id="sortDropdown">
                    <button class="dropdown-trigger select-styled" type="button" onclick="toggleSortDropdown(event)">
                        <span>
                            {% if current_sort == "score" %}{{ fluent(key="sort-score", lang=lang) }}
                            {% elif current_sort == "single" %}{{ fluent(key="sort-single", lang=lang) }}
                            {% elif current_sort == "multi" %}{{ fluent(key="sort-multi", lang=lang) }}
                            {% elif current_sort == "ram" %}{{ fluent(key="sort-ram", lang=lang) }}
                            {% elif current_sort == "threads" %}{{ fluent(key="sort-threads", lang=lang) }}
                            {% elif current_sort == "time" %}{{ fluent(key="sort-time", lang=lang) }}
                            {% endif %}
                        </span>
                        <i class="fa-solid fa-chevron-down chevron"></i>
                    </button>

                    <div class="dropdown-menu">
                        <div class="dropdown-header">{{ fluent(key="home-sort-by", lang=lang) }}</div>
                        <a href="javascript:void(0)" onclick="selectSort('score')">
                            <span class="link-title"><i class="fa-solid fa-award fa-fw"></i> {{ fluent(key="sort-score", lang=lang) }}</span>
                            <span class="link-desc">{{ fluent(key="sort-desc-score", lang=lang) }}</span>
                        </a>
                        <a href="javascript:void(0)" onclick="selectSort('single')">
                            <span class="link-title"><i class="fa-solid fa-microchip fa-fw"></i> {{ fluent(key="sort-single", lang=lang) }}</span>
                            <span class="link-desc">{{ fluent(key="sort-desc-single", lang=lang) }}</span>
                        </a>
                        <a href="javascript:void(0)" onclick="selectSort('multi')">
                            <span class="link-title"><i class="fa-solid fa-microchip fa-fw"></i> {{ fluent(key="sort-multi", lang=lang) }}</span>
                            <span class="link-desc">{{ fluent(key="sort-desc-multi", lang=lang) }}</span>
                        </a>
                        <a href="javascript:void(0)" onclick="selectSort('ram')">
                            <span class="link-title"><i class="fa-solid fa-memory fa-fw"></i> {{ fluent(key="sort-ram", lang=lang) }}</span>
                            <span class="link-desc">{{ fluent(key="sort-desc-ram", lang=lang) }}</span>
                        </a>
                        <a href="javascript:void(0)" onclick="selectSort('threads')">
                            <span class="link-title"><i class="fa-solid fa-microchip fa-fw"></i> {{ fluent(key="sort-threads", lang=lang) }}</span>
                            <span class="link-desc">{{ fluent(key="sort-desc-threads", lang=lang) }}</span>
                        </a>
                        <a href="javascript:void(0)" onclick="selectSort('time')">
                            <span class="link-title"><i class="fa-solid fa-clock fa-fw"></i> {{ fluent(key="sort-time", lang=lang) }}</span>
                            <span class="link-desc">{{ fluent(key="sort-desc-time", lang=lang) }}</span>
                        </a>
                    </div>
                </div>
            </div>

            <div class="control-group">
                <button type="button" class="order-toggle" onclick="toggleOrder()">
                    <span>
                        {% if current_order == "desc" %}{{ fluent(key="home-order-desc", lang=lang) }}{% else %}{{ fluent(key="home-order-asc", lang=lang) }}{% endif %}
                    </span>
                    <i class="fa-solid {% if current_order == 'desc' %}fa-arrow-down-wide-short{% else %}fa-arrow-up-short-wide{% endif %}"></i>
                </button>
            </div>
        </form>
    </div>
</div>

<table>
    <thead>
        <tr>
            <th class="rank-header"></th>
            <th>{{ fluent(key="table-cpu-score", lang=lang) }}</th>
            <th>{{ fluent(key="table-threads", lang=lang) }}</th>
            <th>{{ fluent(key="table-ram", lang=lang) }}</th>
            <th>{{ fluent(key="table-os", lang=lang) }}</th>
            <th>{{ fluent(key="table-hostname", lang=lang) }}</th>
            <th>{{ fluent(key="table-time", lang=lang) }}</th>
            <th>{{ fluent(key="table-note", lang=lang) }}</th>
        </tr>
    </thead>
    <tbody>
        {% for report in reports %}
        <tr class="clickable-row" onclick="window.location='report/{{ report.id }}';">
            <td class="rank-cell">
                {% if loop.index == 1 %}
                    <span class="medal">🥇</span>
                {% elif loop.index == 2 %}
                    <span class="medal">🥈</span>
                {% elif loop.index == 3 %}
                    <span class="medal">🥉</span>
                {% else %}
                    <span class="rank-number">{{ loop.index }}</span>
                {% endif %}
            </td>

            <td data-label="MT Score" class="score-cell">
                <a href="report/{{ report.id }}">{{ report.score }}</a>
            </td>
            <td data-label="Threads">{{ report.cores }}</td>
            <td data-label="RAM">{{ report.ram }}</td>
            <td data-label="OS">{{ report.os | truncate(length=30) }}</td>
            <td data-label="Hostname">{{ report.hostname }}</td>
            <td data-label="Time">{{ report.time_ago }}
              {% if report.is_new %}
                <span class="new-badge">{{ fluent(key="badge-new", lang=lang) }}</span>
              {% endif %}
            </td>
            <td data-label="Note" class="signature-cell">{{ report.signature }}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>

<script>
function toggleSortDropdown(event) {
    event.stopPropagation();
    document.getElementById('sortDropdown').classList.toggle('open');
}

function selectSort(value) {
    document.getElementById('sortInput').value = value;
    document.getElementById('sortForm').submit();
}

function toggleOrder() {
    const orderInput = document.getElementById('orderInput');
    orderInput.value = orderInput.value === 'desc' ? 'asc' : 'desc';
    document.getElementById('sortForm').submit();
}

window.addEventListener('click', function(event) {
    if (!event.target.closest('#sortDropdown')) {
        const dropdown = document.getElementById('sortDropdown');
        if (dropdown) dropdown.classList.remove('open');
    }
});
</script>

<style>
.clickable-row {
    cursor: pointer;
    transition: background-color 0.2s;
}

.clickable-row:hover {
    background-color: var(--hover-color);
}

.clickable-row a {
    text-decoration: none;
    color: inherit;
}

.score-cell {
    color: var(--primary-color);
    font-weight: 700;
}

.signature-cell {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.8rem;
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.new-badge {
  font-size: 0.6rem;
  padding: 3px;
  color: var(--primary-text);
  border: 1px solid var(--primary-color);
  background: var(--primary-soft);
  border-radius: 8px;
}

.header-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 25px;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.header-section h2 { margin: 0; }

.table-controls form {
    display: flex;
    gap: 1rem;
    align-items: center;
    background: var(--bg-card);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.control-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.select-styled {
    min-width: 160px;
    justify-content: space-between;
}

.select-styled, .order-toggle {
    background: white;
    border: 1px solid var(--border-color);
    padding: 0 0.8rem;
    border-radius: 6px;
    color: var(--text-dark);
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    height: 38px;
    box-sizing: border-box;
    transition: all 0.2s;
}

.select-styled:hover {
    background: var(--bg-main);
}

.select-styled .chevron {
    font-size: 0.7rem;
    opacity: 0.5;
    transition: transform 0.2s;
}

.dropdown.open .chevron {
    transform: rotate(180deg);
}

.order-toggle {
    white-space: nowrap;
    background: white;
    justify-content: center;
}

.select-styled:hover, .order-toggle:hover {
    background: var(--bg-main);
    border-color: var(--border-color);
}

.rank-header {
    width: 50px;
}

.rank-cell {
    text-align: center;
    padding-right: 0 !important;
    width: 50px;
    font-weight: 600;
    color: var(--text-muted);
}

.medal {
    font-size: 1.25rem;
    display: inline-block;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.1));
}

.rank-number {
    font-family: ui-monospace, monospace;
    font-size: 0.85rem;
    opacity: 0.6;
}

.switch-ui {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px;
}

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

.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #e2e8f0;
    transition: .3s;
    border-radius: 20px;
    border: 1px solid var(--border-color);
}

.slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

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

input:checked + .slider:before {
    transform: translateX(16px);
}

.switch-text {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-right: 1rem;
}

@media screen and (max-width: 640px) {
    .table-controls form {
        gap: 0.6rem;
        width: 100%;
        justify-content: center;
    }
    .table-controls form {
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem;
    }
    .switch-text { margin-right: 0; }
}
</style>
{% endblock %}