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


{{ block content }}
<style>

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


    .inner-col { /* styling of the inner data objects */
        height: 60px;
        font-size: 13px;
        font-weight: bold;
    }

    .colored-col {
    }

    .empty-col {
        height: 60px;
    }

    .header-deviation-from-gdp { /* styling of the PAYOFF (including cost algorithm) object */
        color: #185177;
        padding-top: 50px;
        padding-bottom: 20px;
        margin-bottom: 5px;
        font-size: 18px;
    }

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

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

    .per-capita-col { /* styling of AVERAGE PAYOFF */
        padding: 5px;
        margin: 15px 20px 25px;
        font-size: 15px;
        font-weight: bold;
        background-color: white;
        border: #185177 2px solid;
        color: #185177;
    }

    .percent-col { /* styling of data objects in blue highlighted block */
        margin: 4.3px 77px;
        padding: 4px;
        font-size: 13px;
        background-color: white;
        font-weight: bold;
    }

    .blue-image-container { /* styling of the image container in blue highlighted block */
        margin: 10px 65px;
        font-size: 15px;
    }

    .text-percent-you { /* styling of YOU data in highlighted bock */
        border: #89dbdb 1px solid;
        color: #89dbdb;
        margin-top: 2px;
        margin-bottom: 13.3px;
    }

    .text-percent-not-use-alg { /* styling of participants not who used data in highlighted bock */
        border: #77B1E2FF 1px solid;
        color: #77B1E2FF;
        margin-top: 35px;
        margin-bottom: 8.5px;
    }

    .text-percent-payoff {
        border: darkred 1px solid;
        color: darkred;
        margin-top: 25px;
        margin-bottom: 10px;
    }

    .text-percent-use-alg { /* styling of participants who used data in highlighted bock */
        border: #18807e 1px solid;
        color: #18807e;
        margin-top: 15px;
    }

    .estimation-col { /* styling of estimation 1-3 objects */
        padding: 0;
        margin: 0;
        font-size: 13px;
    }

    .participant-who-used { /* styling of participants who used data object */
        color: #18807e;
        font-size: 13px;
        padding-right: 0;
        text-align: left;
        margin-top: -40px;
        font-weight: bold;
    }

    .participant-who-not-used { /* styling of participants who not used data object */
        color: #77B1E2FF;
        font-size: 13px;
        padding-right: 0;
        text-align: left;
        margin-top: -10px;
        margin-bottom: 5px;
        font-weight: bold;
    }

    .payoff-col {
        color: darkred;
        font-size: 13px;
        padding-right: 0;
        text-align: left;
        margin-top: 17px;
        font-weight: bold;
    }

    .you-col { /* styling of YOU object */
        color: #89dbdb;
        font-size: 13px;
        padding-right: 0;
        text-align: left;
        height: 60px;
        font-weight: bold;
    }

    .second-col { /* styling of the highlighted block with the elements which contain average payoff */
        margin-top: 40px;
        background-color: #85abc9;
        border: #185177 1px solid;
        margin-left: -12px;
    }

    .percent-text { /* styling for the percent values */
        font-weight: bold;
    }

    .dashed-border-col {
        padding-bottom: 15px;
        border-bottom: black 2px dashed;
        margin: 1px;
    }

    .dashed-border-col-white {
        padding-bottom: 15px;
        border-bottom: white 2px dashed;
        margin: 1px;
    }

    .above-dashed-border {
        height: 40px;
    }

    .full-border-col {
        padding-bottom: 15px;
        border-bottom: black 2px solid;
    }

    .full-border-col-white {
        padding-bottom: 15px;
        border-bottom: white 2px solid;
    }


    .middle-full-border {
        padding-bottom: 10px;
    }

    .middle-col-line {
        margin-top: 10px;
    }

    .under-line-col {
        margin-top: 10px;
    }

</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 other participants</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">PAYOFF <br> (including cost for algorithm)</div>
                        <div class="col-sm-1">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="row">
                                <div class="col you-col left-col above-dashed-border">YOU</div>
                            </div>
                            <div class="row">
                                <div class="col dashed-border-col" style="margin-left: 10px"></div>
                            </div>
                            <div class="row" style="padding-top: 35px">
                                <div class="col participant-who-used left-col">PARTICIPANTS WHO <br>
                                    <span style="text-decoration: underline">USED</span> ALGORITHM
                                </div>
                            </div>
                            <div class="row" style="padding-top: 23px; margin-right: -20px">
                                <div class="col participant-who-not-used left-col">PARTICIPANTS WHO DID
                                    <span style="text-decoration: underline">NOT USE</span> ALGORITHM
                                </div>
                            </div>
                            <div class="row">
                                <div class="col full-border-col" style="margin-left: 10px"></div>
                            </div>
                            <div class="row">
                                <div class="col payoff-col"> PAYOFF INCREASE BY <br> USING THE 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 above-dashed-border"> DATA1</div>
                            </div>
                            <div class="row">
                                <div class="col dashed-border-col"></div>
                            </div>
                            <div class="row colored-col">
                                <div class="col inner-col middle-col"> DATA2</div>
                            </div>
                            <div class="row colored-col">
                                <div class="col inner-col middle-col middle-col-line"> DATA3</div>
                            </div>
                            <div class="row">
                                <div class="col full-border-col middle-full-border"></div>
                            </div>
                            <div class="row">
                                <div class="col inner-col middle-col under-line-col">
                                    DATA13
                                </div>
                            </div>
                            <div class="row">
                                <div class="estimation-col col middle-col">Estimation 1</div>
                            </div>
                        </div>

                        <div class="col">
                            <div class="row colored-col ">
                                <div class="col inner-col middle-col above-dashed-border"> DATA4</div>
                            </div>
                            <div class="row">
                                <div class="col dashed-border-col"></div>
                            </div>
                            <div class="row colored-col">
                                <div class="col inner-col middle-col"> DATA5</div>
                            </div>
                            <div class="row colored-col">
                                <div class="col inner-col middle-col middle-col-line"> DATA6</div>
                            </div>
                            <div class="row">
                                <div class="col full-border-col middle-full-border"></div>
                            </div>
                            <div class="row">
                                <div class="col inner-col middle-col under-line-col">
                                    DATA14
                                </div>
                            </div>
                            <div8 class="row">
                                <div class="estimation-col col middle-col">Estimation 2</div>
                            </div8>
                        </div>
                        <div class="col">
                            <div class="row colored-col">
                                <div class="col inner-col middle-col above-dashed-border"> DATA7</div>
                            </div>
                            <div class="row">
                                <div class="col dashed-border-col"></div>
                            </div>
                            <div class="row colored-col">
                                <div class="col inner-col middle-col"> DATA8</div>
                            </div>
                            <div class="row colored-col">
                                <div class="col inner-col middle-col middle-col-line"> DATA9</div>
                            </div>
                            <div class="row">
                                <div class="col full-border-col middle-full-border"></div>
                            </div>
                            <div class="row">
                                <div class="col inner-col middle-col under-line-col">
                                    DATA15
                                </div>
                            </div>
                            <div class="row">
                                <div class="estimation-col col middle-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">Average payoff over all 3 estimations</div>
                        </div>
                        <div class="row">
                            <div class="col percent-col text-percent-you "> DATA10</div>
                        </div>
                        <div class="row">
                            <div class="col dashed-border-col-white"
                                 style="margin-top: -10px; padding-bottom: 10px; margin-left: 12px; margin-right: 10px"></div>
                        </div>
                        <div class="row">
                            <div class="col percent-col text-percent-use-alg"> DATA11</div>
                        </div>
                        <div class="row">
                            <div class="col percent-col text-percent-not-use-alg"> DATA12</div>
                        </div>
                        <div class="row">
                            <div class="col full-border-col-white"
                                 style="padding-bottom: 18.4px; margin-left: 12px; margin-right: 10px"></div>
                        </div>
                        <div class="row">
                            <div class="col percent-col text-percent-payoff"> DATA16</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>


<!-- OLD VERSION ------------------------------------------------------------------------------------------------

<div style="text-align: justify;" class="card bg-light mb-3">
    <div class="card-body">
        <h2 class="header-per-eval">Your performance in comparisons to the other participants who used the algorithm</h2>
        <div class="container h-100 text-center">
            <div class="row">
                <div class="col container-left" style="border: 0"></div>
                <div class="col">PAYOFF (including cost for algorithm)</div>
                <div class="col container-right" style="border: 0"></div>

            </div>
            <div class="row">
                <div class="col container-left" style="border: 0"></div>
                <div class="col container-middle">Estimation 1</div>
                <div class="col container-middle">Estimation 2</div>
                <div class="col container-middle">Estimation 3</div>
            </div>
            <div class="row">
                <div class="col container-left">YOU</div>
                <div class="col container-middle"> {{ player.profit_est1 }} points or less </div>
                <div class="col container-middle"> {{ player.profit_est2  }} points or less </div>
                <div class="col container-middle"> {{ player.profit_est3  }} points or less </div>
            </div>
            <div class="row">
                <div class="col container-left">PARTICIPANTS WHO OBTAINED ADVICE FROM ALGORITHM</div>
                <div class="col container-middle">  player.profitalgo_est1  points or less </div>
                <div class="col container-middle"> player.profitalgo_est2  points or less </div>
                <div class="col container-middle">  player.profitalgo_est3  points or less </div>
            </div>
            <div class="row">
                <div class="col container-left">Difference</div>
                <div class="col container-middle"> player.diff_est1 points or less </div>
                <div class="col container-middle">  player.diff_est2  points or less </div>
                <div class="col container-middle"> player.diff_est3 points or less </div>
            </div>
            <div class="row">
                <div class="col container-left">PARTICIPANTS WITHOUT ALGORITHM</div>
                <div class="col container-middle">  player.profitsolo_est1  points or less </div>
                <div class="col container-middle">  player.profitsolo_est2  points or less </div>
                <div class="col container-middle">  player.profitsolo_est3  points or less </div>
            </div>
        </div>
        <div>
            <h7 style="font-weight: bold; font-size: 13px">Note:</h7>
            <ul style="font-size: 12px">
                <li>The green box indicates who performed better for the respective estimation.</li>
                <li>This is the only time that we will provide you with this performance evaluation.</li>
            </ul>
        </div>
    </div>
</div>

-------------------------------------------------------------------------------------------------OLD VERSION END   -->


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

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

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