{% extends "global/Page.html" %}
{% load staticfiles otree_tags %}

{% load staticfiles %}

{% block content %}

<div id="cf_container">
    <table id="table0" style="width:100%; border: 1px solid black;">
    
    <tr>
      <th colspan=2></th>
      <th colspan = "9" style="border: 1px solid black"> Minimum choice in group </th>
    </tr>

    <tr>
      <th colspan=2></th>
      {% for lvl in Constants.difficulty_levels %}
          <td align = "center"><b>{{lvl}}</b></th>
      {% endfor %}
    </tr>


    {% for row in Constants.payoffmatrix %}
      <tr  align = "center">
        {% if forloop.first %}
          <th rowspan = "8" style = "background-color: #ffffff"> Own choice </th>
        {% endif %}
        <th> {{forloop.counter}} </th>
      {% for item in row %}  
          <td data-column="{{forloop.counter}}" data-row="{{forloop.parentloop.counter}}" data-rowcol="{{forloop.counter}}{{forloop.parentloop.counter}}"> {{item}} </td>
      {% endfor %}
      </tr>
    {% endfor %}
    </table>
</div>

<div id="style_div">
    <style>
    table{
        margin-bottom: 50px;
    }

    td[data-rowcol="{{group.min_group}}{{player.problem_difficulty}}"]{
        font-weight: bold;
    }
    </style>
</div>


<div id="next">
    {% next_button %}
</div>

<div style="display: none">
    {% formfield player.timeonpage_Counterfactuals %}
</div>


<script>



{% autoescape off %}
    cf={{player.counterfactual_json}}
{% endautoescape %}

console.log(cf)


cf_holder=document.getElementById("cf_container")
table0=document.getElementById("table0")
style_div=document.getElementById("style_div")

for(i=1; i<cf.length; i++){
    cln=table0.cloneNode(true);
    cln.id="table"+i
    cf_holder.appendChild(cln);
}

    <!-- # i.e. [[own_choice, group_min, payoff]] -->

for(i=0; i<cf.length; i++){
    table_id="table"+i

    table=document.getElementById(table_id)
    text=document.createElement("caption");
    text.innerHTML=cf_text(cf[i][1],cf[i][0],cf[i][2])
    table.insertBefore(text,table.firstChild);
    
    newstyle=document.createElement("style")
    s=style_table(table_id,cf[i][1],cf[i][0])
    newstyle.innerHTML=s
    
    style_div.appendChild(newstyle)
}


<!-- # on the counterfactual page: -->
<!-- # js which copies the table there and makes duplicates -->
<!-- # json.length-1 times -->
<!-- # so that we have as many tables as counterfactuals -->
<!-- # style each based on json data -->
<!-- by creating new style tags -->


function cf_text(min_choice, own_choice,payoff){
    return "If you had chosen <b>"+own_choice+"</b> and the minimum was <b>"+min_choice+"</b>, you would have earned a payoff of <b>"+payoff+"</b>"

}

function style_table(table_id, min_choice, own_choice){
    table_sel="table#"+table_id+" "
    
    red=table_sel+"td[data-column=\""+min_choice+"\"] {background-color:red;}"
    yellow=table_sel+"td[data-row=\""+own_choice+"\"] {background-color:yellow;}"
    orange=table_sel+"td[data-rowcol=\""+min_choice+""+own_choice+"\"] {background-color:orange;}"

    return red+"\n"+yellow+"\n"+orange
}



start=new Date().getTime()
timebox=document.getElementById("id_timeonpage_Counterfactuals")

function getPageTime(){
    pagetime=(new Date().getTime() - start)/1000
    return pagetime;
}

function compute_page_vals(){
    timebox.value=getPageTime()
}

document.getElementById("next").addEventListener("click", compute_page_vals);


</script>


</script>


{% endblock %}