{% extends "layout/basic.html" %}
{% import "components/user.html" as user with context %}
{% import "components/paginator.html" as paginator with context %}
{% import "components/nothing.html" as nothing with context %}
{% block content %}
<style>
.cra-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; border-bottom: 1px solid #e5e7eb; }
.cra-tabs .button { margin: 0; }
.cra-rank .cra-muted { color: #64748b; }
.cra-rank .cra-table-wrap { display: block; overflow: visible; }
.cra-rank .section__table-container { clear: both; }
.cra-rank table { min-width: 760px; }
.cra-badge { display: inline-block; min-width: 76px; text-align: center; color: #fff; border-radius: 6px; padding: 3px 9px; font-size: 12px; font-weight: 700; box-shadow: inset 0 -2px 0 rgba(15, 23, 42, .22); }
.cra-tierline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.cra-tierline span { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #e2e8f0; border-radius: 6px; padding: 4px 8px; font-size: 12px; background: #fff; }
.cra-tierline i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; box-shadow: inset 0 -1px 0 rgba(15, 23, 42, .28); }
.cra-delta-plus { color: #15803d; font-weight: 700; }
.cra-delta-minus { color: #b91c1c; font-weight: 700; }
.theme--dark .cra-tabs { border-bottom-color: rgba(148, 163, 184, .24); }
.theme--dark .cra-rank .cra-muted { color: #9fb0c6; }
.theme--dark .cra-tierline span {
  background: rgba(15, 23, 42, .46);
  border-color: rgba(148, 163, 184, .28);
  color: #dbe7f5;
}
.theme--dark .cra-delta-plus { color: #4ade80; }
.theme--dark .cra-delta-minus { color: #f87171; }
</style>
<div class="row cra-rank">
  <div class="columns">
    <div class="section">
      <div class="cra-tabs">
        <a class="button rounded" href="{{ rpRankingUrl }}">{{ _('RP榜') }}</a>
        <a class="button rounded primary" href="{{ url('contest_rating_ranking') }}">{{ _('Rating榜') }}</a>
      </div>
      <div class="section__header">
        <h1 class="section__title">{{ _('Rating榜') }}</h1>
        <div class="cra-tierline">
          {% for tier in ratingTiers %}
            <span><i style="background: {{ tier.color }}"></i>{{ tier.title }} {{ tier.min }}+</span>
          {% endfor %}
        </div>
      </div>
      <div class="section__body no-padding cra-table-wrap table-layout-guard">
        {% if not config.enabled %}
          <blockquote class="note">{{ _('当前子域尚未启用竞技 Rating。') }}</blockquote>
        {% elif not rows.length %}
          {{ nothing.render('暂无 Rating 记录。') }}
        {% else %}
        <table class="data-table">
          <thead>
            <tr>
              <th>{{ _('排名') }}</th>
              <th>{{ _('用户') }}</th>
              <th>{{ _('Rating') }}</th>
              <th>{{ _('段位') }}</th>
              <th>{{ _('最高') }}</th>
              <th>{{ _('场次') }}</th>
              <th>{{ _('最近变化') }}</th>
            </tr>
          </thead>
          <tbody>
            {% for row in rows %}
            <tr>
              <td>{{ row.rank }}</td>
              <td>{% if udict[row.uid] %}{{ user.render_inline(udict[row.uid], badge=false) }}{% else %}UID {{ row.uid }}{% endif %}</td>
              <td><strong style="color: {{ row.color }}">{{ row.rating|round }}</strong></td>
              <td><span class="cra-badge" style="background: {{ row.color }}">{{ row.title }}</span></td>
              <td>{{ row.maxRating|round }}</td>
              <td>{{ row.ratedCount }}</td>
              <td>
                {% if row.lastDelta > 0 %}
                  <span class="cra-delta-plus">+{{ row.lastDelta }}</span>
                {% elif row.lastDelta < 0 %}
                  <span class="cra-delta-minus">{{ row.lastDelta }}</span>
                {% else %}
                  <span class="cra-muted">0</span>
                {% endif %}
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
        {{ paginator.render(page, upcount) }}
        {% endif %}
      </div>
    </div>
  </div>
</div>
{% endblock %}