{{ block title }}
    Your Decision
{{ endblock }}

{{ block content }}

    <div class="row">
        <div class="card bg-light m-3">
            <br>
            <p>
                Person A started with {{ player.INITIAL_ENDOWMENT }} and decided to keep {{ player.kept_amount_A }} 
                and passed on the remaining amount to you. 
            </p>
            <p>
                You are <strong>Person B</strong> and received <strong>{{ player.ENDOWMENT }}</strong> from Person A.
            </p>
            <p>
                How much of the {{ player.ENDOWMENT }} do you wish 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_C' }}
    
    <!-- Include slider here -->
    <div id="sliders_here"></div>

    <div id="div1">
    <p id="p1"> <strong> Choose the amount for Person C </strong>
    </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_C", 0, endowment, 1);
            slider1.yourvalue = "Amount for Person C";
            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 }}