{{ 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: 200px;
        }
        .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: 200px;
        }

         /* 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">
            <br>


            {{ if player.receivesupport == 1 }}
                <table class="table" >
                    <tr>
                        <td><b>Your initial estimate:</b></td>
                        <td><b>{{ player.initialguess }}</b></td>
                    </tr>
                    <tr>
                        <td>The <b>algorithm's estimate</b>:</td>
                        <td><b>{{ player.gdpcappredict }}</b></td>
                    </tr>
                </table>
            {{ endif }}

            {{ if player.receivesupport == 0 }}
                <table class="table" >
                    <tr>
                        <td><b>Your initial estimate:</b></td>
                        <td><b>{{ player.initialguess }}</b></td>
                    </tr>
                </table>
            {{ endif }}

             <div>
                 <div>  </div>
                 <br>
                 <p>If you want to see the key indicators for country {{player.round_number }} again, please click on the <em>Key indicators</em>-button.</p>
                <div>
                    <button type="button" class="btn btn-primary button2" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="onClick(this)">
                     Key indicators
                    </button>
                </div>
            </div>



        </div>
    </div>

    <div style="text-align: justify;" class="card bg-light mb-3  ">
        <div class="card-body">

            <b>{{formfields}}</b>

        </div>
    </div>


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

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

{{ endblock }}