{{ extends 'global/Page.html' }}
{{ block title }} Your current performance evaluation {{ endblock }}


{{ block content }}
<style>

    .header-your-performance { /* styling of your performance in comparison to the algorithm object */
        color: white;
        font-size: 20px;
        text-align: center;
        background-color: #185177;
        margin-left: 20%;
        margin-right: 20%;
        margin-bottom: 20px;
        padding-bottom: 1%;
        padding-top: 1%;
        font-weight: bold;
    }

    .col {
    }

    .inner-col { /* styling for all objects with text less than (or equal to).. */
        /*background-color: white;   */
        /*border: 1px solid #185177; */
        height: 60px;
        padding: 1%;
        margin: 4%;
        font-size: 13px;
        color: #185177;
    }

    .colored-col {

    }

    .empty-col {
        height: 60px;
        padding: 1%;
        margin: 4%;
    }

    .header-deviation-from-gdp { /* styling of deviation from the actual GDP per capita  */
        padding-top: 70px;
        padding-bottom: 20px;
        margin-bottom: 5px;
        font-size: 18px;
        font-weight: bold;
        color: #185177;
    }

    .left-col {
        padding-top: 17px;
    }

    .middle-col {
        padding-top: 17px;
    }

    .per-capita-col { /* styling of the estimates within 5 points of the actual GDP per capita object */
        padding: 5px 3px;
        margin: 30px 20px 0;
        font-size: 12px;
        background-color: white;
        border: black 2px solid;
        font-weight: bold;
        height: 50px;
    }

    .percent-col { /* styling of the 3 objects that are in the blue field */
        margin: 25px 20px;
        padding: 5px;
        font-size: 20px;
        font-weight: bold;
        background-color: white;
    }

    .text-percent-you { /* styling of the percent object in from YOU */
        height: 35px;
        padding-top: 0;
        margin-top: 30px;
        margin-bottom: 3px;
        border: #5A9CA6 2px solid;
        color: #0D9996;
    }

    .color-you {  /* font color YOU */
        color: #5A9CA6;
    }

    .color-alg { /* font color ALGORITHM */
        color: #007070;
    }

    .text-percent-alg { /* styling of the percent object in from ALGORITHM  */
        height: 35px;
        padding-top: 0;
        margin-top: 35px;
        border: #447B72 2px solid;
        color: #007070;
    }

    .estimation-col { /* styling of the objects Estimation 1-3 */
        padding: 1%;
        margin: 4%;
        font-size: 13px;
        font-weight: bold;
        padding-top: 10px;
    }

    .alg-user { /* styling of the objects YOU and ALGORITHM (color styling of the text is in another class tag above) */
        font-size: 20px;
        font-weight: bold;
        padding-right: 30px;
        text-align: right;
        font-family: Arial, serif;
    }

    .second-col { /* styling of the highlighted block with the three elements which contain % of estimates */
        margin-top: 28px;
        background-color: #85abc9;
        border: #185177 1px solid;
    }

    .points-text { /* styling of the points */
        font-weight: bold;
    }

</style>


<div style="text-align: justify;" class="card bg-light mb-3">
    <div class="card-body">
        <h2 class="header-your-performance">Your performance in comparison to the algorithm</h2>
        <div class="container h-100 text-center">
            <div class="row">
                <div class="col">
                    <div class="row">
                        <div class="col"></div>
                        <div class="col-md-7 header-deviation-from-gdp">Deviation from the actual GDP per capita</div>
                        <div class="col-sm-1">
                        </div>
                    </div>
                    <div class="row">

                        <div class="col">
                            <div class="row" style="padding-top: 10px">
                                <div class="col alg-user left-col color-you">YOU</div>
                            </div>
                            <div class="row" style="padding-top: 23px">
                                <div class="col alg-user left-col color-alg">ALGORITHM</div>
                            </div>
                            <div class="row">
                                <div class="col empty-col"></div>
                            </div>
                        </div>

                        <div class="col">
                            <div class="row colored-col">
                                <div class="col inner-col middle-col">less than (or equal to)<br>
                                    <span class="points-text">{{ player.prederrorest1 }} points</span></div>
                            </div>
                            <div class="row colored-col">
                                <div class="col inner-col middle-col">less than (or equal to)<br>
                                    <span class="points-text"> {{ player.algoerrorest1 }} points </span></div>
                            </div>
                            <div class="row">
                                <div class="estimation-col col middle-col">Estimation 1</div>
                            </div>
                        </div>
                        <div class="col" style="padding-left: 20px; padding-right: 20px">
                            <div class="row colored-col">
                                <div class="col inner-col middle-col">less than (or equal to)<br>
                                    <span class="points-text"> {{ player.prederrorest2 }} points </span></div>
                            </div>
                            <div class="row colored-col">
                                <div class="col inner-col middle-col">less than (or equal to)<br>
                                    <span class="points-text"> {{ player.algoerrorest2 }} points </span></div>
                            </div>
                            <div class="row">
                                <div class="col middle-col estimation-col">Estimation 2</div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="row colored-col">
                                <div class="col inner-col middle-col">less than (or equal to) <br>
                                    <span class="points-text"> {{ player.prederrorest3 }} points </span></div>
                            </div>
                            <div class="row colored-col">
                                <div class="col inner-col middle-col">less than (or equal to) <br>
                                    <span class="points-text"> {{ player.algoerrorest3 }} points </span></div>
                            </div>
                            <div class="row">
                                <div class="col middle-col estimation-col">Estimation 3</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3">

                    <div class="col second-col">
                        <div class="row">
                            <div class="col per-capita-col"> Estimates within 5 points of the actual GDP per capita
                            </div>
                        </div>
                        <div class="row">
                            <div class="col percent-col text-percent-you"> {{ player.performancepercent }} %</div>
                        </div>
                        <div class="row">
                            <div class="col percent-col text-percent-alg"> 67 %</div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div>
            <h7 style="font-weight: bold; font-size: 17px">Note:</h7>
            <ul style="font-size: 15px">
                <li>This is the only time that we will provide you with this performance evaluation. You can skip it after 45 seconds.</li>
            </ul>
        </div>
    </div>
</div>

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

<script>
    function activateButton() {
        const button = document.getElementById("cont-button2");

        let seconds = 45;
        button.disabled = true;
        button.textContent = seconds;

        const countdown = setInterval(function () {
            seconds--;
            button.textContent = seconds;
            if (seconds <= 1) {
                clearInterval(countdown);
                button.disabled = false;
                button.innerText = "Continue"
            }
        }, 1000);

        setTimeout(function () {
            clearInterval(countdown);
            button.disabled = false;
        }, seconds * 1000);
    }

    // call the activateButton function when the page loads
    window.addEventListener("load", activateButton);

</script>



{{ endblock }}