{% 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%;
    }
    #ptable th{
     font-size: 1.2em;
    }


    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-indent:0;">
         Your message <br> "<u>{{ message }}</u>" <br> is sent to <span style ="font-size:1.2em; font-weight: bold; color: dodgerblue">R</span> in your pair.
       </p>

    <p>Please wait for <span style ="font-size:1.2em; font-weight: bold; color: dodgerblue">R</span> to decide how many grams of herbal extract <img src="/static/antidote/Herbal.png"  alt="" width="50px;">
        to put to make antidote.
</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 </span></th>
                          <th colspan="3">Points for <span style ="font-size:1.2em; font-weight: bold; color: red">S (YOU)</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 %}