<% layout('main.eta') %>

<div class="max-w-5xl m-auto">
  <table class="leaderboard table-auto block">
    <tbody class="flex flex-col">
      <% for (const player of it.players) { %>
      <tr class="inline-flex justify-between">
        <td class="border border-transparent border-r-zinc-700 p-1.5 pr-3 w-10 text-right"><%= player.ranking %></td>
        <td class="pl-3 p-1.5 <%= player.ranking == 1 ? 'the-one': '' %>"><a href="/u/<%= player.user_id %>/"><%~ player.flag %><%= ' ' + player.username %></a></td>
        <td class="p-1.5 ml-auto"><%= Math.round(player.elo) %></td>
        <td class="p-1.5 text-orange-600">ELO</td>
      </tr>
      <% } %>
    </tbody>
  </table>

  <%~
    include('pagination.eta', {
      page_num: it.page,
      max_pages: it.max_pages,
      url_formatter: (num) => `/leaderboard/page-${num}/`
    })
  %>
</div>