{% extends "_layout.html" %}

{% block content %}
<h2>Benchmark Reports</h2>
<table>
    <thead>
        <tr>
            <th>MT 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 }}</td>
            <td data-label="Note" class="signature-cell">{{ report.signature }}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>

<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;
}
</style>
{% endblock %}