{% extends 'base.html' %}
{% load i18n %}

{% block head %}
    <script src="{{ STATIC_URL }}stats/js/lib/underscore.min.js"></script>
    <script src="{{ STATIC_URL }}trainings/js/podium.js"></script>

    <link rel="stylesheet" href="{{ STATIC_URL }}trainings/css/podium.css">
{% endblock %}
{% block header %}{% endblock %}
{% block menu %}{% endblock %}

{% block main %}
    <div class="diffusion-area">
        <h1 class="text-center">
            {% blocktrans with training_name=trainingsession.training.name %}
                {{ training_name}}'s challenge
            {% endblocktrans %}
        </h1>
        <div id="podium" class="row">
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function(){
            new Podium({
                challenge_data_url: "{% url 'api:session-challenge' session_uuid=trainingsession.id %}"
            }).init();
        });
    </script>
    {% verbatim %}
        <script type="text/template" id="trainee-score-template">
            <div class="trainee-score-item col-md-4">
                <div class="trainee-avatar" style="background-image: url({{ trainee.profile_picture }})"></div>
                <span class="trainee-position ng-binding">{{ position }}</span>
                <div class="trainee-details">
                    <h3>
                        {{ trainee.first_name }} {{ trainee.last_name }}
                    </h3>
                    <h2>
                        {{ score }} points
                    </h2>
                </div>
            </div>
        </script>
    {% endverbatim %}
{% endblock %}