{% extends "global/Page.html" %}
{% load otree static %}
{% load i18n %}

{% block title %}
{% trans "Results" %}
{% endblock %}

{% block content %}
<h5 class="mb-3">
    {% if language == "fr" %}
    Partie 2 - Période {{ player.round_number }} sur {{ Constants.num_rounds }}
    {% else %}
    Part 2 - Round {{ player.round_number }} over {{ Constants.num_rounds }}
    {% endif %}
</h5>

<p class="text-info">
    Temps écoulé : <span id="decision_time"></span><br>
    <span id="decision_time_end" class="text-danger" style="visibility: hidden">Merci de cliquer sur suivant</span>
</p>

<div class="text-right mb-3">
    <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#modal_content">Instructions</button>
</div>

<div class="card bg-light mb-3">
    <div class="card-body">
        {% if language == "fr" %}
        <p>
            Vous avez extrait {{ player.extraction }} jeton{% if player.extraction > 1 %}s{% endif %} et au total
            votre groupe a extrait {{ player.group.group_extraction }} jeton{% if player.extraction > 1 %}s{% endif %}. <br>
            Votre gain pour la période est de {{ player.payoff|floatformat:2 }} ECUs.
        </p>

        {% else %}
        <p>
            You have extracted {{ player.extraction }} token{% if player.extraction > 1 %}s{% endif %}, and the total
            amount extracted by your group is
            {{ player.group.group_extraction }} token{% if player.extraction > 1 %}s{% endif %}. <br>
            Your payoff for this round is {{ player.payoff|floatformat:2 }} ECUs.
        </p>
        {% endif %}
    </div>
</div>

<div class="mb-3">
    {% next_button %}
</div>

<div class="card mb-3">
    <div class="card-header">
        <h5>{% if language == "fr"%}Historique{% else %}History{% endif %}</h5>
    </div>
    <div class="card-body">
        <table class="table">
    <thead class="thead-light">
    <tr>
        <th>{% trans "Round" %}</th>
        <th>{% trans "Your extraction" %}</th>
        <th>{% trans "Total extraction" %}<br>{% trans "of the others" %}</th>
        <th>{% trans "Total extraction"%}<br>{% trans "of your group" %}</th>
        <th>{% trans "Your payoff" %}<br>(ECUs)</th>
        <th>{% trans "Your cumulative payoff" %}<br>(ECUs)</th>
    </tr>
    </thead>
    <tbody>
    {% for p in player.in_all_rounds reversed %}
    <tr>
        <td>{{ p.round_number }}</td>
        <td>{{ p.extraction }}</td>
        <td>{{ p.extraction_others }}</td>
        <td>{{ p.group.group_extraction }}</td>
        <td>{{ p.payoff|floatformat:2 }}</td>
        <td>{{ p.cumulative_payoff|floatformat:2 }}</td>
    </tr>
    {% endfor %}
    </tbody>
</table>
    </div>
</div>

{% include "global/TemplateModal.html" with title="Instructions" content="relations_cpr_game/InstructionsTemplate.html" id="modal_content" %}

{% endblock %}

{% block scripts %}
<script src="{% static 'fill_auto.js' %}"></script>
<script src="{% static 'chrono_warning.js' %}"></script>
<script>
    window.onload = function () {
        start_chrono(document.querySelector("#decision_time"), document.querySelector("#decision_time_end"), js_vars.result_time);
        if (js_vars.fill_auto)
            fill_auto();
    }
</script>
{% endblock %}