{{ extends "global/Page.html" }}
{{ block title }} {{ endblock }}

{{ block content }}

<!-- these divs have position: absolute
     so there is space for five rows of boxes -->
<div id="boxrow">
</div>

<div id="blockendinfo">

    <p>
        {{ reached }}
    </p>

    <p>
        You chose box #{{ player.chosencard }}. This box had value {{ player.chosenboxvalue|to1 }} and your 
        {{ if discount }} discounted {{ endif }}
        points are {{ points }}.
    </p>

    {{ if practiceround }}
        <p>
            This round was a practice round.
        </p>
    {{ endif }}
    <br>
    <center>
        <button class="otree-btn-next btn btn-primary">
            Proceed
        </button>
    </center>
    <br>
    {{ if notpracticeround }}
        <p>
            See below a summary of the boxes and your choices in each round so far.
        </p>
        <br>
        <center>
            <table width="100%">
                <tr>
                    <th>Round</th><th>Chosen box</th><th>Points</th>
                </tr>
                {{ tabledata }}
            </table>
        </center>
        <br><br><br><br>
    {{ endif }}

</div>

{{ if pilot }}
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
{{ endif }}



{{ endblock }}

{{ block scripts }}
<script>
document.getElementById("boxrow").style.visibility = "visible";

// create the required amount of boxes that are opened, current, or unopened
const element = document.getElementById("boxrow"); // attach to the div that displays the opened boxes in a row
while (element.firstChild) {
    element.removeChild(element.firstChild);
}

// this is used only at the initial display of the boxes
// after opening the first box, they are displayed using the liveRecv function
for (let i = 0; i < js_vars.boxes; i++) { // js_vars.boxes is the value of C.BOXES
    const para = document.createElement("span");
    para.className = "valuebox";
    var node;
    node = document.createTextNode(js_vars.values[i].toFixed(1));
    para.appendChild(node);
    element.appendChild(para);
  
	if (i == js_vars.openedcards-1) {
    	para.style.backgroundColor = '#FFFACD';
    }
}

// if the opened box was among the best, flash body
/*
if (js_vars.wasclose) {
    var f = document.body;
    f.style.backgroundColor = '#82d091';
    setTimeout(function() {
        f.style.backgroundColor = '';
      	f.style.transitionDuration = '2s';
    }, 500);  
}
*/
</script>
{{ endblock }}