{{ 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>
                <i><b>Remember! </i>  Decision-Making Task</b>
                </br>
                </br>
                <ul>
                    <li style="margin-bottom:10px">First, <b>Player X</b> decides whether to <i>reveal the game</i> or not.
                    <li style="margin-bottom:10px">Second, <b>Player X</b> decides for allocation A or B.
                </ul>
                <div class="row">
                    <div class="column">
                        <center><img src="{{ static 'Hidden_unknown.jpg' }}", width="400"/></center>
                    </div>
                    <div class="column">
                        <p class="bottom-three">

                            </p>
                        <center><button name="reveal_game" value="1" type="button">reveal game</button></center>
                    </div>
                </div>
                <p class="bottom-one">

                    </p>
                <center><img src="{{ static 'Hidden_2tables.jpg' }}", width="800"/></center>
                <p class="bottom-one">

                    </p>
                <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;
                    }
                    button{
                        color: black;
                        text-align: center;
                        padding: 2px 30px 2px 30px;
                        text-decoration: none;
                        display: inline-block;
                        font-size: 20px;
                        font-weight: bold;
                        margin: 10px 10px 10px 10px;
                        cursor: pointer;
                        transition-duration: 0.4s;
                        border-radius: 4px;
                        vertical-align: middle;
                    }
                    .button:hover {
                     background-color: white;
                     color: white;
                    }
                    .row {
                        display: flex;
                    }
                    .column {
                        flex: 50%;
                        padding: 5px;
                    }
                    .bottom-three {
                    margin-bottom: 3cm;
                    }
                </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 }}