{% extends 'otree/WaitPage.html' %}

{% block title %}
<u>{{ title_text }}</u>
{% endblock %}

{% block styles %}
    <style>
        body{
       text-align: center;
       align-items: center;
       justify-content: center;
    }
        p{
    font-size: 32px;
    text-indent:2em;
    }

        #ptablebtn{
        position: absolute;
        font-size: 24px;
        top: 5px;
        right: 5px;
        border-radius: 12px;
        background-color: gold;
        color: black;
        font-family: bold;
    }



    #ptable table, th, td {
      border: 2px solid black;
      padding: 0;
        table-layout:fixed;
    }
    #ptable table{
      height: 100%;
    }


    thead tr th:first-child,
    tbody tr td:first-child {
      width: 8em;
      min-width: 8em;
      max-width: 8em;
    }

    </style>

    <link href="/static/antidote/collapse_box.css" rel="stylesheet">
{% endblock %}
{% block content %}

<br>
    <p style="text-align: center;">
       <p style="text-align: right; display: inline-block;">
           The poison <img src="/static/antidote/Poison.png"  alt="" width="50px;"> is TYPE 0 with {{ typeO_prob }}%
           chance,<br> and TYPE 1 with {{ typeI_prob }}% chance.
       </p>
    </p>
    <p>Please wait for the message from <span style ="font-size:1.2em; font-weight: bold; color: red">S</span>.</p>

            <button type="button" class="collapsible">Show Payoff Table</button>
            <div class="content">
                <div style="font-weight: bold; text-align: center;">
                    Earning (Points) = 300 – [The exact amount needed – The actual amount taken]&sup2; for <span class="roleS">S</span>
                </div>
                <div style="font-size: 1.2em; text-align: center;">
                    and
                </div>
                <div style="font-weight: bold; text-align: center;">
                    Earning (Points) = 300 – 3 &times; [The exact amount needed – The actual amount taken]&sup2; for <span class="roleR">R</span>
                </div>
                <br>
                <table id="ptable" width="100%" height ="100%">
                      <tr style="height: 5%;">
                          <th rowspan="2" colspan="2">If the poison is</th>
                          <th colspan="3">Points for <span style ="font-size:1.2em; font-weight: bold; color: dodgerblue">R (YOU)</span></th>
                          <th colspan="3">Points for <span style ="font-size:1.2em; font-weight: bold; color: red">S </span></th>
                      </tr>
                      <tr style="height: 5%;">
                          <th>TYPE 0 <br> ({{ typeO_prob }}%)</th>
                          <th>&nbsp</th>
                          <th>TYPE 1 <br> ({{ typeI_prob }}%)</th>
                          <th>TYPE 0 <br> ({{ typeO_prob }}%)</th>
                          <th>&nbsp</th>
                          <th>TYPE 1 <br> ({{ typeI_prob }}%)</th>
                      </tr>
                  </table>
                <br>
            </div>
{% endblock %}


{% block scripts %}
    <script src="/static/antidote/collapse_box.js"></script>

    <script>

    var Payoffs = {{ payoffs|safe }};
    {#console.log(Object.keys(Payoffs).length );#}
    for (var i = 0; i < Object.keys(Payoffs).length ; i++){
        var tr = $('<tr/>');
        if (i == 0){
            tr.append("<td rowspan='"+Object.keys(Payoffs).length+"'>The Actual Amount (grams) of Herbal Extract Taken </td>");
            tr.append("<td>" + i + "</td>");
            tr.append("<td>" + Payoffs[i]['R0'] + "</td>");
            tr.append("<td>&nbsp; </td>");
            tr.append("<td>" + Payoffs[i]['R1'] + "</td>");
            tr.append("<td>" + Payoffs[i]['S0'] + "</td>");
            tr.append("<td>&nbsp; </td>");
            tr.append("<td>" + Payoffs[i]['S1'] + "</td>");
        }
        else{
            tr.append("<td style='display:none;'></td>");
            tr.append("<td>" + i + "</td>");
            tr.append("<td>" + Payoffs[i]['R0'] + "</td>");
            tr.append("<td>&nbsp; </td>");
            tr.append("<td>" + Payoffs[i]['R1'] + "</td>");
            tr.append("<td>" + Payoffs[i]['S0'] + "</td>");
            tr.append("<td>&nbsp; </td>");
            tr.append("<td>" + Payoffs[i]['S1'] + "</td>");
        }
        $("#ptable").append(tr);

    }


var conflict = parseInt({{ conflict }});
$('#ptable tr').eq(2).find('td').eq(2).css({"color": 'dodgerblue', 'font-weight': 'bold'});
$('#ptable tr').eq(12).find('td').eq(4).css({"color": 'dodgerblue', 'font-weight': 'bold'});
$('#ptable tr').eq(conflict+2).find('td').eq(5).css({"color": 'red', 'font-weight': 'bold'});
$('#ptable tr').eq(12).find('td').eq(7).css({"color": 'red', 'font-weight': 'bold'});

    </script>
{% endblock %}