{% extends "_layout.html" %}

{% block content %}
<div class="back-nav">
    <a href="../">&larr; {{ fluent(key="details-back", lang=lang) }}</a>
</div>

<div class="report-card">
    <div class="report-header">
        <div class="header-main">
            <h1 class="hostname-title">
                {% if report.slimes["Hostname"] %}
                    {{ report.slimes["Hostname"].0 }}
                {% else %}
                    {{ fluent(key="details-device", lang=lang, sig=report.signature | truncate(length=10)) }}
                {% endif %}
            </h1>

            <p class="report-signature">{% if report.signature %}"{{ report.signature }}"{% endif %}</p>

            <div class="meta-container">
                <div class="meta-group system-context">
                    <div class="meta-item">
                        <span class="label">{{ fluent(key="details-report-id", lang=lang) }}</span>
                        <span class="value">#{{ report.id }}</span>
                    </div>
                    <div class="meta-item">
                        <span class="label">{{ fluent(key="details-version", lang=lang) }}</span>
                        <span class="value">v{{ report.client_version }}</span>
                    </div>
                </div>

                <div class="meta-group hardware-context">
                    <div class="meta-item">
                        <span class="label">{{ fluent(key="details-mac", lang=lang) }}</span>
                        <span class="value">{{ report.mac_address }}</span>
                    </div>
                    <div class="meta-item">
                        <span class="label">{{ fluent(key="details-reported", lang=lang) }}</span>
                        <span class="value">{{ time_ago }}</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="score-container">
            <div class="score-value">{{ score }}</div>
            <div class="score-label">{{ fluent(key="details-cpu-score", lang=lang) }}</div>
            <div class="score-note">(mt+st)/2</div>
        </div>
    </div>

    <div class="report-grid">
        <div class="info-section">
            <h3>{{ fluent(key="details-perf-breakdown", lang=lang) }}</h3>
            <div class="bench-stats">
                <div class="stat-row">
                    <span>{{ fluent(key="details-single", lang=lang) }}</span>
                    <strong>{{ report.benchmark.single_thread.score }}</strong>
                </div>
                <div class="stat-row">
                    <span>{{ fluent(key="details-multi", lang=lang) }}</span>
                    <strong>{{ report.benchmark.multi_thread.score }}</strong>
                </div>
                <div class="stat-row">
                    <span>{{ fluent(key="details-threads", lang=lang) }}</span>
                    <strong>{{ report.benchmark.logical_cores }}</strong>
                </div>
            </div>
        </div>

        {% for key, list in report.slimes %}
            {% if key != "Hostname" %}
            <div class="info-section">
                <h3>{{ key }}</h3>
                <ul class="info-list">
                    {% for item in list %}
                    <li>{{ item }}</li>
                    {% endfor %}
                </ul>
            </div>
            {% endif %}
        {% endfor %}
    </div>
</div>

<style>
.back-nav { margin-bottom: 1.5rem; }
.back-nav a { color: var(--primary-color); text-decoration: none; font-weight: 500; }

.report-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 2.5rem;
    /* box-shadow: 0 4px 6px rgba(0,0,0,0.05); */
    border: 1px solid var(--border-color);
}

.report-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
    gap: 1.5rem;
}

.hostname-title {
    margin: 0;
    font-size: 2.2rem;
    color: var(--text-dark);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.report-signature {
    margin: 0.2rem 0 1.5rem 0;
    font-style: italic;
    color: var(--text-muted);
    opacity: 0.7;
    font-size: 1.1rem;
    word-break: break-word;
}

.meta-container {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.meta-group {
    display: flex;
    gap: 1.25rem;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
}

.system-context { 
    background: var(--primary-soft); 
    border: 1px solid var(--primary-border); 
    color: var(--primary-text); 
}
.hardware-context { 
    background: var(--bg-main); 
    border: 1px solid var(--border-color); 
    color: var(--text-secondary); 
}

.meta-item { display: flex; flex-direction: column; }
.meta-item .label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    opacity: 0.6;
    letter-spacing: 0.05em;
}
.meta-item .value { font-family: ui-monospace, monospace; font-weight: 600; white-space: nowrap; }

.score-container { text-align: right; flex-shrink: 0; }
.score-value {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--primary-color);
    line-height: 1;
}
.score-label {
    font-size: 1rem;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.1em;
}
.score-note {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.1em;
}

.report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.info-section {
    background: var(--bg-card);
    padding: 1.25rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.info-section h3 {
    margin: 0 0 1rem 0;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
}

.info-list { list-style: none; padding: 0; margin: 0; font-family: ui-monospace, monospace; font-size: 0.85rem; }
.info-list li { 
    margin-bottom: 0.5rem;
    padding-left: 1rem;
    position: relative;
    word-break: break-word;
}
.info-list li::before { content: "›"; position: absolute; left: 0; color: var(--primary-color); font-weight: bold; }

.bench-stats { display: flex; flex-direction: column; gap: 0.6rem; }
.stat-row { display: flex; justify-content: space-between; font-size: 0.9rem; }

@media (max-width: 640px) {
    .report-card {
        padding: 1.25rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .report-header {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 1.5rem;
        padding-bottom: 1.5rem;
        gap: 1.5rem;
    }

    .hostname-title {
        font-size: 1.75rem;
    }

    .score-container {
        text-align: left;
        width: 100%;
        padding: 1rem;
        background: var(--primary-soft);
        border-radius: 8px;
        box-sizing: border-box;
    }

    .score-value {
        font-size: 2.0rem;
    }

    .meta-container {
        flex-direction: column;
        gap: 0.5rem;
    }

    .meta-group {
        width: 100%;
        box-sizing: border-box;
        justify-content: flex-start;
    }

    .report-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}
</style>
{% endblock %}