{{ block title }}
Part B: <b>Auction</b>
{{ endblock }}

{{ block content }}
<br />
<div class="card bg-light instructions">
    <div class="card">
        <div class="card-body">
            <p>
                <center>
                    <img src="{{ static 'Table_1.jpg' }}", width="400"/>
                </center>
                    </br>
                <center>
                    <b>Payoff Table - Decision-Making Task</b>
                </center>
            </p>
        </div>
    </div>
</div>

<div class="card bg-light instructions">
    <div class="card">
        <div class="card-body">
            <p>
                <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: 16px;
                        width: 100%;
                        background: #1e5bff;
                    }
                    .mgslider-feedback {
                        -webkit-user-select: none;
                        -ms-user-select: none;
                        user-select: none;
                    }
                    .card {
                        background: lightgreen;
                        border-style: solid ;

                    }
                    .otree-btn-next {
                        display: none;
                    }
                </style>

                {{ formfield_errors 'bid' }}

                <p>
                    <center>
                        <font size="4">The winner of the auction becomes <b>Player X</b> with a greater probability (90% vs. 10%).</font>
                    </center>
                </p>

                <p>
                    <center>
                        <font size="4"> How much of your endowment £0.6 would you like to bid?</font>
                    </center>
                </p>

                <div id="sliders_here"></div>
                <p>Click the blue bar to reveal the slider.</p>
                <script src="{{ static 'mgslider.js' }}"></script>

                <script>
                    $(document).ready(function (event) {
                        slider1 = new mgslider("bid", 0, 0.6, 0.01);
                        slider1.yourvalue = "Your bid";
                        slider1.print(document.getElementById("sliders_here"));


                    });
                </script>
                <script>
                    $(function () {
                        setTimeout(function () {
                            $('.otree-btn-next').show();
                        }, 1 * 1000);
                    });
                </script>
            </p>
        </div>
    </div>
</div>
<br />

<h1 style="font-size:2vw"><b>After choosing your bid, please click the "Next"-button!</b></h1>
<br />
    {{ next_button }}

{{ endblock }}