{% macro bench_th(label_key, tooltip_key, align='right') %}
            <th class="text-{{ align }} px-4 py-3 font-semibold text-neutral-600">
                <div class="inline-flex items-center gap-1 {% if align == 'right' %}justify-end{% endif %}">
                    <span>{{ t(label_key) }}</span>
                    <i data-lucide="info"
                       class="w-3 h-3 text-neutral-400 flex-shrink-0 cursor-help"
                       @mouseenter="benchTip = { text: `{{ t(tooltip_key) }}`, el: $event.target }; $nextTick(() => { const r = $event.target.getBoundingClientRect(); const tip = $refs.benchTipEl; const tw = tip.offsetWidth; let x = r.left + r.width / 2 - tw / 2; if (x + tw > window.innerWidth - 8) x = window.innerWidth - 8 - tw; if (x < 8) x = 8; tip.style.left = x + 'px'; tip.style.top = (r.top - tip.offsetHeight - 8) + 'px'; })"
                       @mouseleave="benchTip = null"></i>
                </div>
            </th>
            {% endmacro %}
            <div x-show="mainTab === 'bench'" x-cloak>
                <!-- Sub-tab navigation -->
                <div class="flex flex-wrap items-center gap-2 mb-10 animate-fade-in-up">
                    <button
                        @click="setBenchTab('throughput')"
                        :class="benchTab === 'throughput'
                            ? 'bg-neutral-900 text-white'
                            : 'text-neutral-600 hover:text-neutral-900 hover:bg-neutral-100'"
                        class="px-5 py-2.5 rounded-full text-sm font-medium transition-all duration-200">
                        {{ t('navbar.dropdown.performance') }}
                    </button>
                    <button
                        @click="setBenchTab('accuracy')"
                        :class="benchTab === 'accuracy'
                            ? 'bg-neutral-900 text-white'
                            : 'text-neutral-600 hover:text-neutral-900 hover:bg-neutral-100'"
                        class="px-5 py-2.5 rounded-full text-sm font-medium transition-all duration-200">
                        {{ t('navbar.dropdown.accuracy') }}
                    </button>
                </div>

                <!-- Throughput tab -->
                <div x-show="benchTab === 'throughput'" x-cloak>
                <div class="animate-fade-in-up">
                    <!-- Header -->
                    <div class="mb-8">
                        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
                            <div>
                                <h2 class="text-xs font-bold uppercase tracking-widest text-neutral-400 mb-2">{{ t('bench.section_label') }}</h2>
                                <h3 class="text-2xl font-bold tracking-tight text-neutral-900">{{ t('bench.heading') }}</h3>
                            </div>
                            <a x-show="benchDeviceInfo?.owner_hash"
                               x-cloak
                               :href="'https://omlx.ai/my/' + benchDeviceInfo.owner_hash"
                               target="_blank"
                               class="flex items-center gap-1.5 px-4 py-2 text-sm font-medium text-neutral-600 bg-neutral-100 rounded-lg hover:bg-neutral-200 hover:text-neutral-900 transition-all">
                                <i data-lucide="external-link" class="w-3.5 h-3.5"></i>
                                My Submissions
                            </a>
                        </div>
                        <p class="text-sm text-neutral-500 mt-2">{{ t('bench.description') }}</p>
                    </div>

                    <!-- Configuration Card -->
                    <div class="bg-white rounded-2xl border border-neutral-200 overflow-hidden mb-6">
                        <div class="flex items-center justify-between px-6 py-4 bg-neutral-100 border-b border-neutral-200">
                            <div class="flex items-center gap-3">
                                <i data-lucide="settings-2" class="w-4 h-4 text-neutral-500"></i>
                                <span class="text-xs font-bold uppercase tracking-wider text-neutral-600">{{ t('bench.config.section_label') }}</span>
                            </div>
                        </div>

                        <div class="px-6 py-5 space-y-5">
                            <!-- Model Selector -->
                            <div>
                                <label class="block text-sm font-medium text-neutral-700 mb-2">{{ t('bench.config.model') }}</label>
                                <select x-model="benchModelId"
                                        :disabled="benchRunning"
                                        class="w-full max-w-md px-3 py-2 text-sm border border-neutral-200 rounded-lg focus:ring-2 focus:ring-neutral-900 focus:border-transparent bg-white disabled:opacity-50">
                                    <option value="">{{ t('bench.config.model_placeholder') }}</option>
                                    <template x-for="m in models.filter(m => m.model_type === 'llm' || m.model_type === 'vlm' || !m.model_type)" :key="m.id">
                                        <option :value="m.id" x-text="m.id + ' (' + (m.estimated_size ? (m.estimated_size / 1073741824).toFixed(1) + ' GB' : 'unknown') + ')'"></option>
                                    </template>
                                </select>
                            </div>

                            <!-- Single Request Config -->
                            <div>
                                <label class="block text-sm font-medium text-neutral-700 mb-2">{{ t('bench.config.single_request') }}</label>
                                <div class="flex flex-wrap items-center gap-4">
                                    <template x-for="pp in [1024, 4096, 8192, 16384, 32768, 65536, 131072, 200000]" :key="pp">
                                        <label class="flex items-center gap-2 cursor-pointer">
                                            <input type="checkbox"
                                                   x-model="benchPromptLengths[pp]"
                                                   :disabled="benchRunning"
                                                   class="w-4 h-4 rounded border-neutral-300 text-neutral-900 focus:ring-neutral-900">
                                            <span class="text-sm text-neutral-600" x-text="'pp' + pp"></span>
                                        </label>
                                    </template>
                                </div>
                                <p class="text-xs text-neutral-400 mt-1.5">{{ t('bench.config.generation_hint') }}</p>
                            </div>

                            <!-- Batch Config -->
                            <div>
                                <label class="block text-sm font-medium text-neutral-700 mb-2">{{ t('bench.config.batch_tests') }}</label>
                                <div class="flex flex-wrap items-center gap-4">
                                    <template x-for="bs in [2, 4, 8]" :key="bs">
                                        <label class="flex items-center gap-2 cursor-pointer">
                                            <input type="checkbox"
                                                   x-model="benchBatchSizes[bs]"
                                                   :disabled="benchRunning"
                                                   class="w-4 h-4 rounded border-neutral-300 text-neutral-900 focus:ring-neutral-900">
                                            <span class="text-sm text-neutral-600" x-text="bs + 'x batch'"></span>
                                        </label>
                                    </template>
                                </div>
                                <p class="text-xs text-neutral-400 mt-1.5">{{ t('bench.config.batch_hint') }}</p>
                            </div>

                            <!-- Run / Cancel Button -->
                            <div class="flex items-center gap-3 pt-2">
                                <button x-show="!benchRunning"
                                        @click="startBenchmark()"
                                        :disabled="!benchModelId || Object.values(benchPromptLengths).every(v => !v)"
                                        class="px-6 py-2.5 bg-neutral-900 text-white text-sm font-medium rounded-lg hover:bg-neutral-800 transition-all disabled:opacity-40 disabled:cursor-not-allowed flex items-center gap-2">
                                    <i data-lucide="play" class="w-4 h-4"></i>
                                    {{ t('bench.config.run_button') }}
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Progress Section -->
                    <div x-show="benchRunning && benchProgress" x-cloak class="bg-white rounded-2xl border border-neutral-200 overflow-hidden mb-6">
                        <div class="px-4 sm:px-6 py-4">
                            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 mb-3">
                                <span class="text-sm font-medium text-neutral-700" x-text="benchProgress?.message || window.t('bench.progress.preparing')"></span>
                                <div class="flex items-center gap-3">
                                    <span class="text-sm text-neutral-500" x-text="benchProgress?.current + ' / ' + benchProgress?.total"></span>
                                    <button @click="cancelBenchmark()"
                                            class="px-3 py-1 bg-neutral-900 text-white text-xs font-medium rounded-lg hover:bg-neutral-800 transition-all flex items-center gap-1">
                                        <i data-lucide="square" class="w-3 h-3"></i>
                                        {{ t('bench.progress.cancel') }}
                                    </button>
                                </div>
                            </div>
                            <div class="w-full bg-neutral-200 rounded-full h-2">
                                <div class="bg-neutral-900 h-2 rounded-full transition-all duration-500"
                                     :style="'width: ' + (benchProgress?.total > 0 ? (benchProgress.current / benchProgress.total * 100) : 0) + '%'"></div>
                            </div>
                        </div>
                    </div>

                    <!-- Running indicator (no progress yet) -->
                    <div x-show="benchRunning && !benchProgress" x-cloak class="bg-white rounded-2xl border border-neutral-200 overflow-hidden mb-6">
                        <div class="px-6 py-4 flex items-center gap-3">
                            <div class="w-5 h-5 border-2 border-neutral-300 border-t-neutral-900 rounded-full animate-spin"></div>
                            <span class="text-sm text-neutral-600">{{ t('bench.progress.starting') }}</span>
                        </div>
                    </div>

                    <!-- Error -->
                    <div x-show="benchError" x-cloak class="bg-red-50 border border-red-200 rounded-2xl px-6 py-4 mb-6">
                        <div class="flex items-center gap-2 text-red-700">
                            <i data-lucide="alert-circle" class="w-4 h-4"></i>
                            <span class="text-sm font-medium" x-text="benchError"></span>
                        </div>
                    </div>

                    <!-- Single Request Results -->
                    <div x-show="benchSingleResults.length > 0" x-cloak class="bg-white rounded-2xl border border-neutral-200 overflow-hidden mb-6">
                        <div class="flex items-center justify-between px-6 py-4 bg-neutral-100 border-b border-neutral-200">
                            <div class="flex items-center gap-3">
                                <i data-lucide="zap" class="w-4 h-4 text-neutral-500"></i>
                                <span class="text-xs font-bold uppercase tracking-wider text-neutral-600">{{ t('bench.results.single.section_label') }}</span>
                            </div>
                        </div>
                        <div class="overflow-x-auto">
                            <table class="w-full text-sm">
                                <thead>
                                    <tr class="border-b border-neutral-200 bg-neutral-50">
                                        {{ bench_th('bench.results.single.test', 'bench.metrics.test.tooltip', align='left') }}
                                        {{ bench_th('bench.results.single.ttft', 'bench.metrics.ttft.tooltip') }}
                                        {{ bench_th('bench.results.single.tpot', 'bench.metrics.tpot.tooltip') }}
                                        {{ bench_th('bench.results.single.pp_tps', 'bench.metrics.pp_tps.tooltip') }}
                                        {{ bench_th('bench.results.single.tg_tps', 'bench.metrics.tg_tps.tooltip') }}
                                        {{ bench_th('bench.results.single.e2e_latency', 'bench.metrics.e2e.tooltip') }}
                                        {{ bench_th('bench.results.single.throughput', 'bench.metrics.throughput.tooltip') }}
                                        {{ bench_th('bench.results.single.peak_mem', 'bench.metrics.peak_mem.tooltip') }}
                                    </tr>
                                </thead>
                                <tbody>
                                    <template x-for="r in benchSingleResults" :key="r.pp">
                                        <tr class="border-b border-neutral-100 hover:bg-neutral-50">
                                            <td class="px-4 py-3 font-medium text-neutral-900" x-text="'pp' + r.pp + '/tg' + r.tg"></td>
                                            <td class="px-4 py-3 text-right tabular-nums text-neutral-700" x-text="r.ttft_ms.toFixed(1)"></td>
                                            <td class="px-4 py-3 text-right tabular-nums text-neutral-700" x-text="r.tpot_ms.toFixed(2)"></td>
                                            <td class="px-4 py-3 text-right tabular-nums text-neutral-700" x-text="r.processing_tps.toFixed(1) + ' tok/s'"></td>
                                            <td class="px-4 py-3 text-right tabular-nums font-medium text-neutral-900" x-text="(r.wall_tg_tps ?? r.gen_tps).toFixed(1) + ' tok/s'"></td>
                                            <td class="px-4 py-3 text-right tabular-nums text-neutral-700" x-text="r.e2e_latency_s.toFixed(3) + 's'"></td>
                                            <td class="px-4 py-3 text-right tabular-nums text-neutral-700" x-text="r.total_throughput.toFixed(1) + ' tok/s'"></td>
                                            <td class="px-4 py-3 text-right tabular-nums text-neutral-700" x-text="benchFormatMemory(r.peak_memory_bytes)"></td>
                                        </tr>
                                    </template>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Batch Results: Continuous Batching -->
                    <div x-show="benchBatchResults.length > 0" x-cloak class="bg-white rounded-2xl border border-neutral-200 overflow-hidden mb-6">
                        <div class="flex items-center justify-between px-6 py-4 bg-neutral-100 border-b border-neutral-200">
                            <div class="flex items-center gap-3">
                                <i data-lucide="layers" class="w-4 h-4 text-neutral-500"></i>
                                <span class="text-xs font-bold uppercase tracking-wider text-neutral-600">{{ t('bench.results.batch.section_label') }}</span>
                            </div>
                            <span class="text-xs text-neutral-400">{{ t('bench.results.batch.subtitle') }}</span>
                        </div>
                        <div class="overflow-x-auto">
                            <table class="w-full text-sm">
                                <thead>
                                    <tr class="border-b border-neutral-200 bg-neutral-50">
                                        {{ bench_th('bench.results.batch.batch_size', 'bench.metrics.batch_size.tooltip', align='left') }}
                                        {{ bench_th('bench.results.batch.tg_tps', 'bench.metrics.tg_tps.tooltip') }}
                                        {{ bench_th('bench.results.batch.speedup', 'bench.metrics.speedup.tooltip') }}
                                        {{ bench_th('bench.results.batch.pp_tps', 'bench.metrics.pp_tps.tooltip') }}
                                        {{ bench_th('bench.results.batch.pp_tps_req', 'bench.metrics.pp_tps_req.tooltip') }}
                                        {{ bench_th('bench.results.batch.avg_ttft', 'bench.metrics.avg_ttft.tooltip') }}
                                        {{ bench_th('bench.results.batch.e2e_latency', 'bench.metrics.e2e.tooltip') }}
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- 1x baseline from single request -->
                                    <tr x-show="benchSingleResults.some(r => r.pp === 1024)" class="border-b border-neutral-100 bg-neutral-50/50">
                                        <td class="px-4 py-3 font-medium text-neutral-500">{{ t('bench.results.batch.baseline') }}</td>
                                        <td class="px-4 py-3 text-right tabular-nums text-neutral-500" x-text="((benchSingleResults.find(r => r.pp === 1024)?.wall_tg_tps ?? benchSingleResults.find(r => r.pp === 1024)?.gen_tps)?.toFixed(1) || '-') + ' tok/s'"></td>
                                        <td class="px-4 py-3 text-right tabular-nums text-neutral-500">1.00x</td>
                                        <td class="px-4 py-3 text-right tabular-nums text-neutral-500" x-text="(benchSingleResults.find(r => r.pp === 1024)?.processing_tps?.toFixed(1) || '-') + ' tok/s'"></td>
                                        <td class="px-4 py-3 text-right tabular-nums text-neutral-500" x-text="(benchSingleResults.find(r => r.pp === 1024)?.processing_tps?.toFixed(1) || '-') + ' tok/s'"></td>
                                        <td class="px-4 py-3 text-right tabular-nums text-neutral-500" x-text="benchSingleResults.find(r => r.pp === 1024)?.ttft_ms?.toFixed(1) || '-'"></td>
                                        <td class="px-4 py-3 text-right tabular-nums text-neutral-500" x-text="(benchSingleResults.find(r => r.pp === 1024)?.e2e_latency_s?.toFixed(3) || '-') + 's'"></td>
                                    </tr>
                                    <template x-for="r in benchBatchResults" :key="r.batch_size">
                                        <tr class="border-b border-neutral-100 hover:bg-neutral-50">
                                            <td class="px-4 py-3 font-medium text-neutral-900" x-text="r.batch_size + 'x'"></td>
                                            <td class="px-4 py-3 text-right tabular-nums font-medium text-neutral-900" x-text="r.tg_tps.toFixed(1) + ' tok/s'"></td>
                                            <td class="px-4 py-3 text-right tabular-nums font-medium" :class="benchGetSpeedup(r) >= 1.5 ? 'text-green-600' : 'text-neutral-700'" x-text="benchGetSpeedup(r).toFixed(2) + 'x'"></td>
                                            <td class="px-4 py-3 text-right tabular-nums text-neutral-700" x-text="r.pp_tps.toFixed(1) + ' tok/s'"></td>
                                            <td class="px-4 py-3 text-right tabular-nums text-neutral-500" x-text="(r.pp_tps / r.batch_size).toFixed(1) + ' tok/s'"></td>
                                            <td class="px-4 py-3 text-right tabular-nums text-neutral-700" x-text="r.avg_ttft_ms.toFixed(1)"></td>
                                            <td class="px-4 py-3 text-right tabular-nums text-neutral-700" x-text="r.e2e_latency_s.toFixed(3) + 's'"></td>
                                        </tr>
                                    </template>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Benchmark Results (Text Export) -->
                    <div x-show="benchSingleResults.length > 0 || benchBatchResults.length > 0" x-cloak
                         class="bg-white rounded-2xl border border-neutral-200 overflow-hidden mb-6">
                        <button @click="benchShowText = !benchShowText"
                                class="w-full flex items-center justify-between px-6 py-4 bg-neutral-100 border-b border-neutral-200 hover:bg-neutral-150 transition-colors">
                            <div class="flex items-center gap-3">
                                <i data-lucide="clipboard-copy" class="w-4 h-4 text-neutral-500"></i>
                                <span class="text-xs font-bold uppercase tracking-wider text-neutral-600">{{ t('bench.results.text_export.section_label') }}</span>
                            </div>
                            <i data-lucide="chevron-down" class="w-4 h-4 text-neutral-400 transition-transform" :class="benchShowText && 'rotate-180'"></i>
                        </button>
                        <div x-show="benchShowText" x-collapse x-cloak>
                            <div class="px-4 py-3 flex justify-end border-b border-neutral-200">
                                <button @click="benchCopyText()"
                                        class="px-4 py-1.5 bg-neutral-900 text-white text-xs font-medium rounded-lg hover:bg-neutral-800 transition-all flex items-center gap-1.5">
                                    <i data-lucide="copy" class="w-3.5 h-3.5"></i>
                                    <span x-text="benchCopied ? window.t('bench.results.text_export.copied') : window.t('bench.results.text_export.copy')"></span>
                                </button>
                            </div>
                            <div class="bg-neutral-900 rounded-b-2xl">
                                <textarea
                                    x-ref="benchTextarea"
                                    :value="benchBuildText()"
                                    readonly
                                    class="w-full h-[400px] px-4 py-4 bg-neutral-900 text-green-400 font-mono text-xs leading-relaxed resize-none focus:outline-none"
                                ></textarea>
                            </div>
                        </div>
                    </div>

                    <!-- Community Benchmark Upload Results -->
                    <div x-show="benchUploadResults.length > 0 || benchUploading" x-cloak
                         class="bg-white rounded-2xl border border-neutral-200 overflow-hidden mb-6">
                        <div class="flex items-center justify-between px-6 py-4 bg-neutral-100 border-b border-neutral-200">
                            <div class="flex items-center gap-3">
                                <i data-lucide="upload-cloud" class="w-4 h-4 text-neutral-500"></i>
                                <span class="text-xs font-bold uppercase tracking-wider text-neutral-600">Community Benchmark Upload</span>
                            </div>
                            <div x-show="benchUploading && benchUploadResults.length === 0" class="flex items-center gap-2">
                                <div class="w-4 h-4 border-2 border-neutral-300 border-t-neutral-900 rounded-full animate-spin"></div>
                                <span class="text-xs text-neutral-500">Uploading...</span>
                            </div>
                        </div>
                        <div class="px-6 py-4 space-y-2">
                            <template x-for="r in benchUploadResults" :key="r.context_length">
                                <div class="flex items-center justify-between py-2 border-b border-neutral-100 last:border-0">
                                    <span class="text-sm font-medium text-neutral-700" x-text="'pp' + r.context_length"></span>
                                    <div class="flex items-center gap-2">
                                        <!-- Success -->
                                        <template x-if="r.url && !r.duplicate">
                                            <a :href="r.url" target="_blank"
                                               class="flex items-center gap-1.5 text-sm text-green-600 hover:text-green-700">
                                                <i data-lucide="check-circle" class="w-4 h-4"></i>
                                                <span x-text="r.id"></span>
                                                <i data-lucide="external-link" class="w-3 h-3"></i>
                                            </a>
                                        </template>
                                        <!-- Duplicate -->
                                        <template x-if="r.url && r.duplicate">
                                            <a :href="r.url" target="_blank"
                                               class="flex items-center gap-1.5 text-sm text-amber-600 hover:text-amber-700">
                                                <i data-lucide="copy" class="w-4 h-4"></i>
                                                <span>Already exists</span>
                                                <i data-lucide="external-link" class="w-3 h-3"></i>
                                            </a>
                                        </template>
                                        <!-- Error -->
                                        <template x-if="r.error">
                                            <span class="flex items-center gap-1.5 text-sm text-red-500">
                                                <i data-lucide="x-circle" class="w-4 h-4"></i>
                                                <span x-text="r.error"></span>
                                            </span>
                                        </template>
                                    </div>
                                </div>
                            </template>
                            <!-- Upload complete summary -->
                            <div x-show="benchUploadDone" x-cloak class="pt-3 flex items-center justify-between">
                                <span class="text-xs text-neutral-500"
                                      x-text="(benchUploadDone?.success || 0) + '/' + (benchUploadDone?.total || 0) + ' uploaded'"></span>
                                <a x-show="benchUploadDone?.owner_hash"
                                   :href="'https://omlx.ai/my/' + benchUploadDone?.owner_hash"
                                   target="_blank"
                                   class="flex items-center gap-1.5 text-sm font-medium text-neutral-600 hover:text-neutral-900 transition-colors">
                                    Manage on omlx.ai
                                    <i data-lucide="external-link" class="w-3.5 h-3.5"></i>
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Community Benchmark Upload Skipped (experimental features) -->
                    <div x-show="benchUploadSkipped" x-cloak
                         class="bg-amber-50 rounded-2xl border border-amber-200 overflow-hidden mb-6">
                        <div class="flex items-center gap-3 px-6 py-4 border-b border-amber-200">
                            <i data-lucide="flask-conical" class="w-4 h-4 text-amber-600"></i>
                            <span class="text-xs font-bold uppercase tracking-wider text-amber-600"
                                  x-text="t('bench.upload_skipped.title')"></span>
                        </div>
                        <div class="px-6 py-4 space-y-2">
                            <p class="text-sm text-amber-600" x-text="t('bench.upload_skipped.reason')"></p>
                            <ul class="text-sm text-amber-600 list-disc list-inside">
                                <template x-for="f in (benchUploadSkipped?.features || [])" :key="f">
                                    <li x-text="t('bench.upload_skipped.features.' + f)"></li>
                                </template>
                            </ul>
                        </div>
                    </div>

                    <!-- Metrics Reference -->
                    <div class="bg-white rounded-2xl border border-neutral-200 overflow-hidden">
                        <button @click="benchShowMetrics = !benchShowMetrics"
                                class="w-full flex items-center justify-between px-6 py-4 bg-neutral-100 border-b border-neutral-200 hover:bg-neutral-150 transition-colors">
                            <div class="flex items-center gap-3">
                                <i data-lucide="book-open" class="w-4 h-4 text-neutral-500"></i>
                                <span class="text-xs font-bold uppercase tracking-wider text-neutral-600">{{ t('bench.metrics.section_label') }}</span>
                            </div>
                            <i data-lucide="chevron-down" class="w-4 h-4 text-neutral-400 transition-transform" :class="benchShowMetrics && 'rotate-180'"></i>
                        </button>
                        <div x-show="benchShowMetrics" x-collapse x-cloak class="px-6 py-4">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
                                <div class="space-y-3">
                                    <div>
                                        <span class="font-semibold text-neutral-900">{{ t('bench.metrics.ttft.name') }}</span>
                                        <span class="text-neutral-400 ml-1">{{ t('bench.metrics.ttft.full_name') }}</span>
                                        <p class="text-neutral-500 mt-0.5">{{ t('bench.metrics.ttft.description') }}</p>
                                    </div>
                                    <div>
                                        <span class="font-semibold text-neutral-900">{{ t('bench.metrics.tpot.name') }}</span>
                                        <span class="text-neutral-400 ml-1">{{ t('bench.metrics.tpot.full_name') }}</span>
                                        <p class="text-neutral-500 mt-0.5">{{ t('bench.metrics.tpot.description') }}</p>
                                    </div>
                                    <div>
                                        <span class="font-semibold text-neutral-900">{{ t('bench.metrics.tg_tps.name') }}</span>
                                        <span class="text-neutral-400 ml-1">{{ t('bench.metrics.tg_tps.full_name') }}</span>
                                        <p class="text-neutral-500 mt-0.5">{{ t('bench.metrics.tg_tps.description') }}</p>
                                    </div>
                                </div>
                                <div class="space-y-3">
                                    <div>
                                        <span class="font-semibold text-neutral-900">{{ t('bench.metrics.pp_tps.name') }}</span>
                                        <span class="text-neutral-400 ml-1">{{ t('bench.metrics.pp_tps.full_name') }}</span>
                                        <p class="text-neutral-500 mt-0.5">{{ t('bench.metrics.pp_tps.description') }}</p>
                                    </div>
                                    <div>
                                        <span class="font-semibold text-neutral-900">{{ t('bench.metrics.e2e.name') }}</span>
                                        <span class="text-neutral-400 ml-1">{{ t('bench.metrics.e2e.full_name') }}</span>
                                        <p class="text-neutral-500 mt-0.5">{{ t('bench.metrics.e2e.description') }}</p>
                                    </div>
                                    <div>
                                        <span class="font-semibold text-neutral-900">{{ t('bench.metrics.throughput.name') }}</span>
                                        <p class="text-neutral-500 mt-0.5">{{ t('bench.metrics.throughput.description') }}</p>
                                    </div>
                                    <div>
                                        <span class="font-semibold text-neutral-900">{{ t('bench.metrics.batch_size.name') }}</span>
                                        <p class="text-neutral-500 mt-0.5">{{ t('bench.metrics.batch_size.description') }}</p>
                                    </div>
                                    <div>
                                        <span class="font-semibold text-neutral-900">{{ t('bench.metrics.speedup.name') }}</span>
                                        <p class="text-neutral-500 mt-0.5">{{ t('bench.metrics.speedup.description') }}</p>
                                    </div>
                                    <div>
                                        <span class="font-semibold text-neutral-900">{{ t('bench.metrics.pp_tps_req.name') }}</span>
                                        <span class="text-neutral-400 ml-1">{{ t('bench.metrics.pp_tps_req.full_name') }}</span>
                                        <p class="text-neutral-500 mt-0.5">{{ t('bench.metrics.pp_tps_req.description') }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Global fixed tooltip for bench metrics -->
                <div x-ref="benchTipEl"
                     x-show="benchTip"
                     x-cloak
                     x-text="benchTip?.text"
                     class="bench-tip-fixed"></div>
                </div>

                <!-- Accuracy tab -->
                {% include "dashboard/_bench_accuracy.html" %}
            </div>