{{ extends 'global/Page.html' }}
   {{ block title }}Instructions{{ 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>The examples of <b>Germany</b> and <b>Bolivia (South America)</b>, in the tables below, may help you to get more familiar with the key indicators and the GDP per capita.</p>


            <br>
            <table class="table">
                <tr>
                    <td rowspan="9" style="text-align:center; font-weight: bold; vertical-align: middle; transform: rotate(270deg);">Germany</td>
                </tr>

                <tr>
                    <td style="text-align:center; font-weight: bold">Key indicator</td>
                    <td style="text-align:center; font-weight: bold">Value [Min: 0, Max: 100]</td>
                </tr>
                <tr>
                    <td>Broadband subscriptions</td>
                    <td style="text-align:center">92</td>
                </tr>
                <tr>
                    <td>CO2 emissions</td>
                    <td style="text-align:center">26</td>
                </tr>
                <tr>
                    <td>Happiness index</td>
                    <td style="text-align:center">84</td>
                </tr>
                <tr>
                    <td>Life expectancy</td>
                    <td style="text-align:center">89</td>
                </tr>
                <tr>
                    <td style="font-weight: bold; color: #185177">GDP per capita</td>
                    <td style="text-align:center; font-weight: bold; color: #185177">71</td>
                </tr>

            </table>

            <br>

            <br>
            <table class="table">
                <tr>
                    <td rowspan="9" style="text-align:center; font-weight: bold; vertical-align: middle; transform: rotate(270deg); padding-right: 25px">Bolivia</td>
                </tr>
                <tr>
                    <td style="text-align:center; font-weight: bold">Key indicator</td>
                    <td style="text-align:center; font-weight: bold">Value [Min: 0, Max: 100]</td>
                </tr>
                <tr>
                    <td>Broadband subscriptions</td>
                    <td style="text-align:center">14</td>
                </tr>
                <tr>
                    <td>CO2 emissions</td>
                    <td style="text-align:center">9</td>
                </tr>
                <tr>
                    <td>Happiness index</td>
                    <td style="text-align:center">54</td>
                </tr>
                <tr>
                    <td>Life expectancy</td>
                    <td style="text-align:center">57</td>
                </tr>
                <tr>
                    <td style="font-weight: bold; color: #185177">GDP per capita</td>
                    <td style="text-align:center; font-weight: bold; color: #185177">4</td>
                </tr>

            </table>

            <br><br>

            <p> <p> If you would like to re-read the description of the different key indicators,
            you can click on the <b><em>Key indicators</em>-button</b> below.</p></p>


            <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)">
                         Key indicators
                        </button>
                </div>
                </div>
                </div>

             </div>
        </div>


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

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


{{ endblock }}