{{-- Live pricing bar. Server-rendered first, then refreshed from JSON every 60s. --}}
<div class="border-b border-slate-200 bg-white"
     x-data="{
        rows: {{ Js::from($tickerPrices->map(fn ($p) => ['product' => $p->product, 'market' => $p->market, 'price' => $p->price, 'currency' => $p->currency, 'change' => $p->change_abs, 'date' => $p->price_date->toDateString()])) }},
        async refresh() { try { const r = await fetch('{{ route('prices.latest') }}'); if (r.ok) this.rows = await r.json(); } catch (e) {} },
        fmt(n) { return Number(n).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); }
     }"
     x-init="setInterval(() => refresh(), 60000)">
    <div class="mx-auto flex max-w-7xl items-center gap-6 overflow-x-auto whitespace-nowrap px-4 py-2 text-xs">
        <span class="font-semibold uppercase tracking-wide text-crimson">Market</span>
        <template x-for="row in rows" :key="row.product + row.market">
            <span class="flex items-center gap-1.5">
                <span class="font-semibold" x-text="row.product.replaceAll('_', ' ')"></span>
                <span class="text-slate-400" x-text="row.market"></span>
                <span x-text="row.currency + ' ' + fmt(row.price)"></span>
                <span x-show="row.change !== null"
                      :class="row.change >= 0 ? 'text-emerald-600' : 'text-red-600'"
                      x-text="(row.change >= 0 ? '▲ ' : '▼ ') + fmt(Math.abs(row.change))"></span>
            </span>
        </template>
        <span class="text-slate-400" x-show="rows.length === 0">Benchmark prices will appear here once published.</span>
        <a href="{{ route('prices.history') }}" class="ml-auto text-slate-500 underline">History</a>
    </div>
</div>