{{ 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? Your decision will be made known to Person B, who will then
                decide the amount to transfer to Person C. 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>

    <p>
        Click the blue bar to reveal the slider.
    </p>
    <br>

    {{ formfield_errors 'sent_amount_B' }}
    
    <!-- Include slider here -->
    <div id="sliders_here"></div>

    <div id="div1">
    <p id="p1"> <strong> Choose the amount for Person B </strong> <br>
        (Note: Person B will decide how much of this amount to transfer to Person C) </p>
    </div>
    
    <script src="{{ static 'mgslider.js' }}"></script>
    
    <script>
        let endowment = js_vars.endowment
        const title = document.getElementById("div1");
        const slider = document.getElementById("sliders_here");
        slider.appendChild(title);

        $(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"));
        });
    </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 }}