{{ block title }}

{{ if group.round_number == 1 }}
<div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 33.3%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"> 1/3 </div>
</div>
{{ elif group.round_number == 2 }}
<div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 66.6%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"> 2/3 </div>
</div>
{{ else }}
<div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 100%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"> 3/3 </div>
</div>
{{ endif }}
<br>

    Round {{ player.round_number }}
{{ endblock }}

{{ block content }}

    <div class="row">
        <div class="card bg-light m-3">
            <br>
            <!-- <h5>
                <u><strong>Round {{ player.round_number }}</strong></u>
            </h5> -->
            <p>
                You are <strong>Person A</strong> and are given <strong>{{ player.ENDOWMENT }}</strong>.
            </p>
            <p>
                How much of the {{ player.ENDOWMENT }} do you wish to transfer to 
                Person B and Person C, respectively? You get to keep the rest of the money for yourself.
            </p>
        </div>
    </div>

    <style>
        .mgslider-wrapper {
            border-spacing: 10px;
        }
        .mgslider-limit {
            width: 10%;
            min-width: 75px;
            height: 40px;
            margin: 100px;
            text-align: center;
            background: #eee;
            border: 1px solid #888;
        }
        .mgslider-limit, .mgslider-value {
            font-variant-numeric: tabular-nums;
        }
        .mgslider-before {
            height: 13px;
            width: 100%;
            background: #80b4ec;
        }
        .mgslider-feedback {
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
    </style>

    <br>

    <p>
        Click the blue bars to reveal the sliders.
    </p>
    <br>

    {{ formfield_errors 'sent_amount_B' }}
    {{ formfield_errors 'sent_amount_C' }}
    
    <div id="sliders_here"></div>

    <div id="div1">
    <p id="p1"> <strong> Choose the amount for Person B</strong> </p>
    </div>

    <div id="div2">
    <p id="p2"> <strong> Choose the amount for Person C</strong> </p>
    </div>

    <script src="{{ static 'mgslider.js' }}"></script>
    
    <script>
        let endowment = js_vars.endowment
        const titleB = document.getElementById("div1");
        const slider = document.getElementById("sliders_here");
        slider.appendChild(titleB);

        $(document).ready(function (event) {
            slider1 = new mgslider("sent_amount_B", 0, endowment, 1);
            slider1.yourvalue = "Amount for Person B";
            slider1.f2s = function (val) {
                return '$' + val.toFixed(2);
            }
            slider1.print(document.getElementById("sliders_here"));

        const titleC = document.getElementById("div2");
        slider.appendChild(titleC);

        slider2 = new mgslider("sent_amount_C", 0, endowment, 1);
        slider2.yourvalue = "Amount for Person C";
        slider2.f2s = function (val) {
            return '$' + val.toFixed(2);
            }
        slider2.print(document.getElementById("sliders_here"));
        });
    </script>

    <br>
    <p>
        Click 'Preview' to look at the detailed breakdown. You will still be able to change your decision. 
    </p>

    <button class="btn btn-primary">Preview</button>

{{ endblock }}