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

{% block title %}
    Consumption Decision for Market A

{% endblock %}

{% block styles %}
    {% include C.table_style_template %}
    {% include C.common_style_template %}
{% endblock styles %}

{% block content %}

    {{ include C.fixTop_template }}
    {{ include "experiment_baseline/background_info.html" }}

    <div class="text_border">
        <h5> &nbsp&nbsp Tradeoff you face for spending tokens:</h5>
        <ul>
            <li><b>Consumption benefit in current market A.</b> Spending \(b_{r}\) units of red tokens and \(b_{g}\)
                units of green tokens allows you to consume \(b_{r}/ P_{Ar}+ b_{g}/ P_{Ag}\) units of good A.
            </li>
            <li><b>The cost is the foregone consumption benefits in the next market A if the sequence continues. </b>
                You could save \(b_{r}\) units of red tokens and \(b_{g}\) units of green tokens and purchase \(b_{r}/
                P^{'}_{Ar}+ b_{g}/ P^{'}_{Ag}\) units of good A in the next market A, where \(P^{'}_{Ar}\) and
                \(P^{'}_{Ag}\) are the prices in the next market A.
            </li>
            <li>You earn points from consumption according to Table A in the last column.</li>
        </ul>

        <h5> &nbsp&nbsp Decision:</h5>
        <ul>
            <li><span id="red_balance">Your current holding of red tokens: {{ red_balance }} </span></li>
            <li><span id="green_balance">Your current holding of green tokens: {{ green_balance }}</span></li>
            <li>{{ formfield 'Spend1Red' }}</li>
            <li>{{ formfield 'Spend1Green'}}</li>
        </ul>
        <p>&nbsp&nbsp (Up to 2 decimal points are allowed.)</p>
        <div class="btn-container">
            <button class="otree-btn-next btn btn-primary" style="width: 80px;">OK</button>
        </div>
    </div>

    {#<h2>Instructions</h2>#}
    {#{% include Constants.instructions_constant_template %}#}
{% endblock %}


{% block app_scripts %}

    <script type="text/javascript" id="MathJax-script" async
            src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

    <script>
        setTimeout(
            function () {
                var r = confirm("Time has run out. Please make your decision.");
                if (r == true) {
                } else {
                }
            },
            js_vars.timeout
        );
        document.getElementById("stage2").style.opacity = "0.3";
        document.getElementById("chart2").style.opacity = "0.5"
        let consumerredInput = document.getElementById("id_Spend1Red");
        let consumergreenInput = document.getElementById("id_Spend1Green");
        let message_red = document.getElementById("red_balance")
        let message_green = document.getElementById("green_balance")

        consumerredInput.oninput = function () {
            consumercalc()
        };
        consumergreenInput.oninput = function () {
            consumercalc()
        };

        function consumercalc() {
            let redconsume = parseFloat(consumerredInput.value)
            let greenconsume = parseFloat(consumergreenInput.value)
            let redmax = parseFloat(consumerredInput.max)
            let greenmax = parseFloat(consumergreenInput.max)

            if (redconsume > redmax) {
                message_red.style.background = "hsla(0,100%,50%,0.3)";
            } else {
                message_red.style.background = "hsla(0,100%,50%,0)";
            }

            if (greenconsume > greenmax) {
                message_green.style.background = "hsla(150,50%,50%,0.3)";
            } else {
                message_green.style.background = "hsla(150,50%,50%,0)";
            }
        }
    </script>

{% endblock %}