{% import "components/user.html" as user with context %}
{% macro renderScore(cell) %}
  {% if cell.value <= 0 %}
    <span style="color: rgb(191, 191, 191); font-weight: bold;">{{ _('No rating yet') }}</span>
  {% else %}
    {% set _color = 'red' if cell.value < 20 else ('green' if cell.value >= 60 else 'orange') %}
    <span style="font-weight:bold;color:{{ _color }}">{{ cell.value|string|escape|nl2br|safe }}</span>
  {% endif %}
{% endmacro %}

<div>
  <div class="ui-table-wrap course-ui__scoreboard-scroll" tabindex="0" role="region" aria-label="{{ _('Article Score') }}">
    <table class="data-table">
      <colgroup>
      {%- for column in rows[0] -%}
        <col class="col--{{ column.type }}">
      {%- endfor -%}
      </colgroup>
      <thead>
        <tr>
        {%- for column in rows[0] -%}
          <th class="col--{{ column.type }}">
            {{ column.value|string|escape|nl2br|safe }}
          </th>
        {%- endfor -%}
        </tr>
      </thead>
      <tbody>
      {%- for row in rows -%}{%- if loop.index0 > 0 -%}
        <tr>
          {%- for column in row -%}
            <td class="col--{{ rows[0][loop.index0]['type'] }}"{% if column.style %} style="{{ column.style }}"{% endif %}>
            {%- if column.type == 'rank' -%}
              <span class="{{ 'rank--unrank' if column.value == '0' else 'rank--normal' }}">{{ '*' if column.value == '0' else column.value|string|escape|nl2br|safe }}</span>
            {%- elif column.type == 'user' -%}
              <a class="user--{{ column.raw }}">
                {{ user.render_inline(udict[column.raw], avatar=false, badge=false) }}
              </a>
            {%- elif column.type == 'title' -%}
              {% if column.url %}
                <a href="{{ column.url }}" data-tooltip="{{ column.value }}">{{ column.value }}</a>
              {% else %}
                <span data-tooltip="{{ column.value }}">{{ column.value }}</span>
              {% endif %}
            {%- elif column.type == 'score' -%}
              {{ renderScore(column) }}
            {%- else -%}
              <span data-tooltip="{{ column.hover }}">{{ column.value|string|escape|nl2br|safe }}</span>
            {%- endif -%}
            </td>
          {%- endfor -%}
        </tr>
      {%- endif -%}{%- endfor -%}
      </tbody>
    </table>
  </div>
</div>