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

{% block title %}
{% trans "Decision" %}
{% 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 prendre votre décision</span>
</p>
<div class="text-right mb-3">
    <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#modal_content">{% trans "Instructions" %}</button>
</div>

<div class="card bg-light mb-3">
    <div class="card-body">
        <p>
            {% if language == "fr" %}
            Vous pouvez extraire entre 0 et {{ Constants.max_extraction }} jetons.
            {% else %}
            You can extract from 0 to {{ Constants.max_extraction }} tokens from the common resource.
            {% endif %}
        </p>
    </div>
</div>

<div class="row mb-3">
    <div class="col">
        <div class="card">
            <div class="card-header">
                <h6>{% trans "You extraction" %}</h6>
            </div>
            <div class="card-body">
                <p><label for="id_extraction">
                    {% if language == "fr" %} Choisissez votre extraction {% else %} Set your extraction {% endif %}
                    <br>
                <em>(min 0, max {{Constants.max_extraction}})</em></label></p>
                <input type="range" class="form-control-range" min="0" max="{{Constants.max_extraction}}" step="1"
                       value="0" id="id_extraction" name="extraction"
                       oninput="id_extraction_output.value=this.value; compute_payoff(this)">
            </div>
            <div class="card-footer text-center font-weight-bold text-info">
                <output id="id_extraction_output">--</output> {% trans "tokens" %}
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card">
            <div class="card-header">
                <h6>{% trans "The total extraction of the other members of your group" %}</h6>
            </div>
            <div class="card-body">
                <p><label for="id_extraction_others_simul">
                    {% if language == "fr" %}
                    Votre estimation de l'extraction totale des autres
                    {% else %}
                    Your estimate of the total extraction of the others :
                    {% endif %}
                    <br>
                <em>(min 0, max {{Constants.max_others}})</em></label></p>
                <input type="range" class="form-control-range" min="0" max="{{Constants.max_others}}" value="0"
                       id="id_extraction_others_simul" name="extraction_others_simul"
                       oninput="id_extraction_others_simul_output.value=this.value; compute_payoff(this)">
            </div>
            <div class="card-footer text-center font-weight-bold text-info">
                <output id="id_extraction_others_simul_output">--</output> {% trans "tokens" %}
            </div>
        </div>
    </div>
</div>

<div class="card bg-light mb-3">
    <div class="card-body">
        <p>
            {% if language == "fr" %}
            Si vous extrayez <span id="your_extraction" class="font-weight-bold text-info">--</span> jetons et que les
            autres membres de votre groupe extraient au total
            <span id="others_extraction" class="font-weight-bold text-info">--</span> jetons alors l'extraction
            totale du groupe sera de <span id="total_extraction" class="font-weight-bold text-info">--</span> jetons,
            et votre gain sera égal à <span id="payoff" class="font-weight-bold text-info">--</span> ECUs.

            {% else %}
            If you extract <span id="your_extraction" class="font-weight-bold text-info">--</span> tokens and
            the other members of your group extract a total of
            <span id="others_extraction" class="font-weight-bold text-info">--</span> tokens, the total extraction of
            your group will be <span id="total_extraction" class="font-weight-bold text-info">--</span> tokens and your
            payoff will be equal to <span id="payoff" class="font-weight-bold text-info">--</span> ECUs.
        {% endif %}
        </p>
    </div>
</div>

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

{% if player.round_number > 1 %}
    <div class="card">
        <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>of the others" %}</th>
            <th>{% trans "Total extraction<br>of your group" %}</th>
            <th>{% trans "Your payoff" %}<br>ECUs</th>
            <th>{% trans "Your cumulative<br>payoff" %}<br>ECUs</th>
        </tr>
        </thead>
        <tbody>
        {% for p in player.in_previous_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>
{% endif %}

{% 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>
    let btn_next = document.querySelector(".otree-btn-next");
    let input_moved = {"extraction": false, "extraction_others_simul": false};

    function compute_payoff(the_input) {
        let mine = parseInt(document.querySelector("input[name=extraction]").value);
        let others = parseInt(document.querySelector("input[name=extraction_others_simul]").value);
        let total = mine + others;
        let pay = Number(js_vars.a) * mine - Number(js_vars.b) * Math.pow(mine, 2) - mine * (Number(js_vars.c) + Number(js_vars.k) * total);
        document.querySelector("#your_extraction").innerHTML = String(mine);
        document.querySelector("#others_extraction").innerHTML = String(others);
        document.querySelector("#total_extraction").innerHTML = String(total);
        document.querySelector("#payoff").innerHTML = pay.toFixed(2);

        input_moved[the_input.name] = true;
        if(input_moved["extraction"] && input_moved["extraction_others_simul"])
            btn_next.disabled = false;
    }

    window.onload = function () {
        btn_next.disabled = true;
        start_chrono(document.querySelector("#decision_time"), document.querySelector("#decision_time_end"), js_vars.decision_time);
        if (js_vars.fill_auto)
            fill_auto();
    }

</script>
{% endblock %}