{% extends "base.html" %}
{% set nav = 'explore' %}
{% block title %}{{ profile.display_name }} — NanoDex{% endblock %}
{% block body %}

<div class="card pad-lg" style="display:flex;gap:20px;align-items:center;flex-wrap:wrap">
  {% if profile.avatar_url %}
  <img src="{{ profile.avatar_url }}" alt="" style="width:72px;height:72px;
       border-radius:50%;border:1px solid var(--line-2);object-fit:cover">
  {% else %}
  <div style="width:72px;height:72px;border-radius:50%;background:var(--panel-2);
       border:1px solid var(--line-2)"></div>
  {% endif %}
  <div style="flex:1;min-width:200px">
    <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap">
      <h1 style="font-size:24px">{{ profile.display_name }}</h1>
      {% if is_me %}<span class="chip done"><i></i>you</span>{% endif %}
    </div>
    <p class="sub" style="margin-top:3px">
      <a href="https://huggingface.co/{{ profile.username }}" target="_blank"
         rel="noopener" class="mono" style="color:var(--fg-2)">@{{ profile.username }}</a>
      · training here since
      <span id="since">{{ profile.first_seen }}</span>
    </p>
  </div>
  <div style="display:flex;gap:8px">
    {% if is_me %}<a class="btn" href="/train">+ New run</a>{% endif %}
    <a class="btn ghost" href="/explore">Explore all →</a>
  </div>
</div>

<div class="grid g4" style="margin-top:16px">
  <div class="stat"><span>Models</span><b>{{ profile.done }}</b>
    <small>{{ profile.runs }} run{{ 's' if profile.runs != 1 }} total{{ ', ' ~ profile.active ~ ' in flight' if profile.active }}</small></div>
  <div class="stat"><span>Tokens trained</span>
    <b>{{ "%.0fM"|format(profile.tokens / 1000000) if profile.tokens < 1000000000 else "%.2fB"|format(profile.tokens / 1000000000) }}</b>
    <small>of fineweb-edu</small></div>
  <div class="stat"><span>Parameters created</span>
    <b>{{ "{:,}".format(profile.params) }}</b><small>across finished models</small></div>
  <div class="stat"><span>Best loss</span>
    <b>{{ "%.4f"|format(profile.best_loss) if profile.best_loss else "—" }}</b>
    <small>{{ profile.published }} published to the Hub</small></div>
</div>

<section id="activeSec" style="margin-top:32px;display:none">
  <div class="sect-h"><h2>Training now</h2></div>
  <div class="runs" id="active"></div>
</section>

<section style="margin-top:32px">
  <div class="sect-h">
    <h2>Models</h2>
    <span class="sub">open any of them to generate text</span>
  </div>
  <div id="models"></div>
</section>

{% endblock %}
{% block scripts %}
<script>
const USERNAME = {{ profile.username | tojson }};
const SINCE = {{ profile.first_seen | tojson }};
document.getElementById('since').textContent = SINCE
  ? new Date(SINCE * 1000).toLocaleDateString(undefined,
      {year:'numeric', month:'long'})
  : '—';

function card(m){
  return `<a class="run" href="/models/${m.id}">
    <div class="run-top">
      <h4>${NX.esc(m.name)}</h4>
      ${NX.chip(m.status)}
    </div>
    <div class="run-meta">
      <span class="mono">${NX.esc(m.tier_label)}</span>
      <span>${Number(m.n_params).toLocaleString()} params</span>
      <span><b>${NX.fmtTokens(m.tokens_seen)}</b> tokens</span>
      ${m.best_loss ? `<span>loss <b>${m.best_loss.toFixed(4)}</b></span>` : ''}
      ${m.pushed_repo
        ? `<span class="mono" style="color:var(--accent)">${NX.esc(m.pushed_repo)}</span>`
        : '<span class="muted">not published</span>'}
      <span class="muted">${NX.ago(m.finished_at || m.created_at)}</span>
    </div>
  </a>`;
}

async function refresh(){
  const d = await NX.get('/api/users/' + encodeURIComponent(USERNAME));

  const sec = document.getElementById('activeSec');
  sec.style.display = d.active.length ? 'block' : 'none';
  document.getElementById('active').innerHTML = d.active.map(NX.runRow).join('');

  document.getElementById('models').innerHTML = d.models.length
    ? `<div class="runs">${d.models.map(card).join('')}</div>`
    : `<div class="empty">No finished models yet.</div>`;
}
NX.poll(refresh, 6000);
</script>
{% endblock %}