{{ extends 'global/Page.html' }}
{{ block title }}
    Estimating the GDP per capita - Country {{ player.round_number }} of {{ C.NUM_ROUNDS }}
{{ endblock }}
{{ block content }}

<style>
           /* Style for the more info-button */
        .button2 {
            background-color: #0D9996;  /* #185177 the code for the same blue as the Weiter-Button*/
            color: white;
            border: none;
            width: 160px;
        }
        .button2:hover {
            background-color: #0D9996; /* color when you go with the mouse on it*/
            color: white;
        }
        .visited {
            background-color: #0D9996; /* #185177 the code for the same blue as the Weiter-Button*/
            color: white;
            border: none;
            width: 160px;
        }

         /* Style for button next to the table */
        .float-container {
            border: 3px ;
            padding: 20px;
        }

        .float-child {

            float: left;
            padding: 20px;
            border: 2px ;
        }
        .container {
          height: 200px;
          position: relative;

        }
        .vertical-center {
          margin: 0;
          position: absolute;
          top: 50%;
          -ms-transform: translateY(-50%);
          transform: translateY(-50%);
        }

    </style>

    <script>
        var clicks = 0;
        function onClick(event) {
            event.className = "button visited";
             clicks += 1;
             // document.getElementById("clicks").innerHTML = clicks;
        };
    </script>

    <div style="text-align: justify;" class="card bg-light mb-3  ">
        <div class="card-body">
            <p>
                You <b> decided to seek the algorithm's advice</b>. By clicking on the <em>More information</em>-button, you can re-read how the price for the algorithm's advice and the possible profit are calculated.
                Please note that the amount of the profit depends on the accuracy of your estimate.
            </p>

             <br>

            <div>
                <div>
                    <button type="button" class="btn btn-primary button2" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="onClick(this)">
                     More information
                    </button>
                </div>
            </div>

            <!-- Modal Popup-->
            {{ include C.REVIEW_ASK_ADVICEWTP }}

             <br>

       </div>
    </div>

        <br>

    <div style="text-align: justify;" class="card bg-light mb-3  ">
        <div class="card-body">
            <br>
            <p>Please indicate the <b>amount</b> (between {{ player.wtpzero }} and {{ player.wtpmaxcu }}) you are <b>willing to pay</b> for the <b>algorithm's advice</b>: </p>
            {{ formfields }}

        </div>
    </div>

     <br>
    <!-- {{ next_button }}  -->
    <button class="otree-btn-next btn btn-primary button1" style="float: right;">Continue</button>


{{ endblock }}