{% extends "_layout.html" %}

{% block content %}
<div class="header-section">
    <h2>Benchmark Reports</h2>

    <div class="table-controls">
        <form id="sortForm" method="get" action="">
            <div class="control-group">
                <label for="sort">Sort by:</label>
                <select name="sort" onchange="this.form.submit()">
                    <option value="score" {% if current_sort == "score" %}selected{% endif %}>Score</option>
                    <option value="single" {% if current_sort == "single" %}selected{% endif %}>Single Thread</option>
                    <option value="multi" {% if current_sort == "multi" %}selected{% endif %}>Multi Thread</option>
                    <option value="ram" {% if current_sort == "ram" %}selected{% endif %}>RAM Amount</option>
                    <option value="threads" {% if current_sort == "threads" %}selected{% endif %}>Thread Count</option>
                    <option value="time" {% if current_sort == "time" %}selected{% endif %}>Time Ago</option>
                </select>
            </div>

            <div class="control-group">
                <input type="hidden" name="order" value="{{ current_order }}">
                <button type="button" class="order-toggle" onclick="toggleOrder()">
                    {% if current_order == "desc" %}
                        Descending ↓
                    {% else %}
                        Ascending ↑
                    {% endif %}
                </button>
            </div>
        </form>
    </div>
</div>

<table>
    <thead>
        <tr>
            <th>CPU Score</th>
            <th>Threads</th>
            <th>RAM</th>
            <th>OS</th>
            <th>Hostname</th>
            <th>Time</th>
            <th>Note</th>
        </tr>
    </thead>
    <tbody>
        {% for report in reports %}
        <tr class="clickable-row" onclick="window.location='report/{{ report.id }}';">
            <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">NEW</span>
              {% endif %}
            </td>
            <td data-label="Note" class="signature-cell">{{ report.signature }}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>

<script>
function toggleOrder() {
    const form = document.getElementById('sortForm');
    const orderInput = form.querySelector('input[name="order"]');
    orderInput.value = orderInput.value === 'desc' ? 'asc' : 'desc';
    form.submit();
}
</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 {
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: white;
    color: var(--text-dark);
    font-weight: 500;
    cursor: pointer;
}

.order-toggle {
    background: var(--primary-soft);
    border: 1px solid var(--primary-border);
    color: var(--primary-text);
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.order-toggle:hover {
    background: var(--primary-border);
}

.sub-scores {
    font-size: 0.65rem;
    font-weight: normal;
    opacity: 0.7;
    margin-top: 2px;
}

@media screen and (max-width: 640px) {
  .table-controls form {
      /* flex-direction: column; */
      gap: 0.6rem;
  }
}
</style>
{% endblock %}