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

{% block title %}
{% trans "Part 2 - Communication" %}
{% endblock %}

{% block content %}
<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 discuter avec les autres membres de votre groupe. Le sujet de
            discussion est libre, mais il est interdit de donner des informations permettant de vous identifier ou
            de vous localiser dans la salle et de proférer des insultes ou menaces. <br>
            Vous disposez d'un simulateur sous la zone de chat.
            {% else %}
            You can discuss with the other members of your group for {{ communication_time }} before the game starts.
            You have access to a simulator below the chart area.
            {% endif %}
        </p>
    </div>
</div>

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

<div class="card">
    <div class="card-header">
        <h5>Simulateur</h5>
    </div>
    <div class="card-body">
        <div class="row mb-3">
            <div class="col">
                <div class="card">
                    <div class="card-header font-weight-bold">
                        {% trans "You extraction" %}
                    </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 font-weight-bold">
                        {% trans "The total extraction of the others" %}
                    </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>
</div>

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

{% endblock %}

{% block scripts %}
<script>
    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);
}

</script>
{% endblock %}