{% extends "base.html" %}
{% load url %}
{% load humanize %}
{% load user_profile_link_username from profiles %}
{% load static %}

{% block breadcrumbs %}
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{% url 'reader-studies:list' %}">Reader
            Studies</a></li>
        <li class="breadcrumb-item"><a href="{{ object.get_absolute_url }}">{{ object }}</a></li>
        <li class="breadcrumb-item active" aria-current="page">Leaderboard</li>
    </ol>
{% endblock %}

{% block content %}

    <h1>{{ object.title }} Leaderboard</h1>

    <div class="table-responsive mt-3">
        <table class="table table-hover table-striped table-sm">
            <thead>
                <tr>
                    <th>#</th>
                    <th>User</th>
                    <th>Total score / max score</th>
                    <th>Average score</th>
                </tr>
            </thead>
            <tbody>
            {% for entry in object.leaderboard.grouped_scores %}
                <tr>
                    <td data-order="{{ forloop.counter|stringformat:'020f' }}">{{ forloop.counter|ordinal }}</td>
                    <td data-order="{{ entry.creator__username }}">{{ entry.creator__username|user_profile_link_username }}</td>
                    <td data-order="{{ entry.score__sum|stringformat:'020f' }}">{{ entry.score__sum }} / {{ object.leaderboard.question_count }}</td>
                    <td data-order="{{ entry.score__avg|stringformat:'020f' }}">{{ entry.score__avg|floatformat:4 }}</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
{% endblock %}

{% block script %}
    {{ block.super }}

    <script type="module" src="{% static 'reader_studies/js/leaderboard.mjs' %}"></script>

{% endblock %}