{% extends "base.html" %}
{% load url %}
{% load static %}
{% load to_range %}

{% block title %}Leaderboard - {{ block.super }}{% endblock %}

{% block breadcrumbs %}
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{% url 'challenges:list' %}">Challenges</a></li>
        <li class="breadcrumb-item"><a
                href="{{ challenge.get_absolute_url }}">{% firstof challenge.title challenge.short_name %}</a></li>
        <li class="breadcrumb-item"><a
                href="{% url 'evaluation:leaderboard' challenge_short_name=challenge.short_name slug=challenge.phase_set.first.slug %}">Leaderboards</a></li>
        <li class="breadcrumb-item active">{{ phase.title }} Leaderboard</li>
    </ol>
{% endblock %}

{% block topbar2 %}
    {% include "evaluation/partials/phase_navbar.html" with leaderboard_nav=True %}
{% endblock %}

{% block content %}
    <h2>{{ phase.title }} Leaderboard {{ request.GET.date }}</h2>

    {% if "change_challenge" in challenge_perms %}
        {% include "evaluation/partials/phase_closed_warning.html" with phase=phase %}

        <a href="{% url "evaluation:phase-update" challenge_short_name=challenge.short_name slug=phase.slug %}" class="btn btn-primary text-decoration-none">
            <i class="fa fa-edit"></i>&nbsp;&nbsp;Edit Phase Settings
        </a>
    {% endif %}

    {% include "datatables/partials/datatable.html" with columns=columns %}

    {% if phase.result_display_choice == phase.BEST %}
        <p class="small ml-3">
            Only the best published result for each participant is listed.
        </p>
    {% elif phase.result_display_choice == phase.MOST_RECENT %}
        <p class="small ml-3">
            Only the most recent published result for each participant is listed.
        </p>
    {% else %}
        <div class="modal fade" id="leaderboardDateModal" tabindex="-1" role="dialog"
             aria-labelledby="leaderboardDateModalLabel"
             aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="leaderboardDateModalLabel">Leaderboard History</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    <div class="modal-body">
                        <p>
                            Select a date to display the leaderboard as it was on that day.
                        </p>
                        <form class="form-inline" action="">
                            <label class="mr-sm-2" for="leaderboardDate">Date:</label>
                            <input class="mr-sm-2" type="date" id="leaderboardDate" name="date" required
                                   value="{{ request.GET.date }}">
                            <button type="submit" class="btn btn-primary btn-sm">Submit</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}

    {% if "change_challenge" in challenge_perms %}
        <h3>Export</h3>
        {% for offset in object_list.count|to_range:limit %}
            <p>
                <a class="btn btn-primary"
                   href="{% url 'api:evaluation-list' %}?format=csv&submission__phase={{ phase.pk }}&offset={{ offset }}&limit={{ limit }}"
                   download="{{ phase.challenge.short_name }}_{{ phase.slug }}_evaluations_{{ offset|add:1 }}_{{ offset|add:limit }}_{{ now }}.csv">
                    <i class="fas fa-file-csv"></i> Evaluations ({{ offset|add:1 }} to {{ offset|add:limit }})
                </a>
            </p>
        {% endfor %}
    {% endif %}
{% endblock %}

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

    {{ allow_metrics_toggling|json_script:"allowMetricsToggling" }}
    {{ display_leaderboard_date_button|json_script:"displayLeaderboardDateButton" }}

    <script type="text/javascript" src="{% static 'js/evaluation/leaderboard.js' %}"></script>
{% endblock %}