<section class="section container" style="padding-top: 60px;">
  <div class="leaderboard-shell">
    <div class="section-header" style="text-align:center; margin-bottom: 26px;">
      <span class="section-subtitle">Rank Role Mingguan</span>
      <h2 class="section-title">Leaderboard Yonpedia</h2>
      <p class="section-desc">Top 1-5 setiap role dihitung dari MMR mingguan. MMR naik dari konsistensi main, win, dan medal; turun saat kalah.</p>
      <div class="leaderboard-meta">
        <span class="leaderboard-chip"><i class="fa-solid fa-trophy"></i> <%= leaderboard.period.label %></span>
        <span class="leaderboard-chip"><i class="fa-solid fa-clock-rotate-left"></i> Reset Sabtu 19:00 WIB</span>
        <span class="leaderboard-chip"><i class="fa-solid fa-gift"></i> Hadiah: Camat 1, Gubernur 2, Gelobal 4 tiket</span>
      </div>
    </div>

    <div class="leaderboard-grid">
      <% ['EXP', 'ROAM', 'GOLD', 'MID'].forEach(role => { const rows = leaderboard.roles[role] || []; %>
        <section class="leaderboard-role-card">
          <div class="leaderboard-role-head">
            <div>
              <div class="leaderboard-role-name"><%= role %></div>
              <div class="leaderboard-role-count"><%= rows.length %>/5 peringkat aktif</div>
            </div>
            <i class="fa-solid fa-shield-halved" style="color: var(--accent-blue); font-size: 1.4rem;"></i>
          </div>
          <div class="leaderboard-list">
            <% if (rows.length) { %>
              <% rows.forEach(row => { %>
                <div class="leaderboard-row rank-<%= row.rank %>">
                  <span class="leaderboard-rank"><%= row.rank %></span>
                  <span class="leaderboard-player">
                    <span class="leaderboard-player-name"><%= row.username || '-' %></span>
                  </span>
                  <span class="leaderboard-row-meta">
                    <span class="leaderboard-title <%= row.title ? '' : 'is-locked' %>"><%= row.title || 'Belum Bergelar' %></span>
                    <span class="leaderboard-score"><%= row.mmr %> MMR</span>
                  </span>
                </div>
              <% }) %>
            <% } else { %>
              <div class="leaderboard-empty">Belum ada pemain di role ini minggu ini.</div>
            <% } %>
          </div>
        </section>
      <% }) %>
    </div>
  </div>
</section>
