{{ 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">

           <p>
             You now receive information on <b>country {{ player.round_number}}</b>.
               The <b>normalised GDP per capita</b> can take values <b>between 0 and 100</b>. 100 describes the highest and 0 the lowest GDP per capita.
           </p>

            <p> If you would like to read the description of the key indicators or the examples again, you can click on the <b><em>More information</em>-button</b> to the right of the table.</p>

            <br>
            <p> <b> Which GDP per capita has the country with the following data? </b> </p>

              <div class="float-container">
              <div style="width: 55%;" class="float-child">
                <div class="green">
                    <table class="table" style="width: 100%">
                    <tr>
                        <td style="text-align:center;  font-weight: bold; color: #185177" >Key indicator</td>
                        <td style="text-align:center;  font-weight: bold; color: #185177" >Value [Min: 0, Max: 100]</td>
                    </tr>
                    <tr>
                        <td>Broadband subscriptions</td>
                        <td style="text-align: center">{{ player.broadband }}</td>
                    </tr>
                        <tr>
                        <td>CO2 emissions</td>
                        <td style="text-align: center">{{ player.co2em }}</td>
                    </tr>
                        <tr>
                        <td>Happiness index</td>
                        <td style="text-align: center">{{ player.happiness }}</td>
                    </tr>
                    <tr>
                        <td>Life expectancy</td>
                        <td style="text-align: center">{{ player.lifeexpecttotal }}</td>
                    </tr>
                </table>
                </div>
              </div>

              <div style="width:45%;" class="float-child container">
                <div>
                    <div class="col-md-12 text-center vertical-center">
                        <button type="button" class="btn btn-primary button2" data-bs-toggle="modal" data-bs-target="#exampleModal" onclick="onClick(this)">
                         More information
                        </button>



                    </div>

                </div>
              </div>

            </div>


            <br>

            <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_INSTRUCTIONS }}


{{ endblock }}