{% extends "global/Page.html" %}
{% load otree static %}

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


{% block styles %}
    <style>
    body{
       text-align: center;
       align-items: center;
       justify-content: center;
    }

    .otree-title.page-header{
       font-size: 36px;
       text-decoration: underline;
   }
    p{
    font-size: 32px;
}


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

    .mycontainer {
        display: flex; /* or inline-flex */
        flex-direction: row;
        font-size: 26px;
        line-height: 150%;
        justify-content: space-around;
}


    </style>
{% endblock %}

{% block content %}


    {% if subsession.round_number < 6 %}
      {% if player.roles == 'S' %}
      <div class="mycontainer" >

          <div>
                Your Role: <br>
                <span style ="font-size:1.2em; font-weight: bold; color: red">S</span>
          </div>
          <div>
                {% if sender_Mistake > 0%}
                <p style="font-size: 30px"> The message sent by you is "{{ message_S }}"<br>
                    The message received by <span style ="font-size:1.2em; font-weight: bold; color: dodgerblue">R</span> is "{{ message_R }}"
                </p>
              {% else %}
                <p style="font-size: 30px"> The message sent by you is "{{ message_S }}"<br>
                </p>
              {% endif %}
              <p style="line-height: 130%;"> <span style ="font-size:1.2em; font-weight: bold; color: dodgerblue">R</span> in your pair put
                  <b>{{ action }}</b> grams of herbal extract.
                  <br>The poison was TYPE {{ player.type }}. <br>
                  Thus, you get <u>{{ earning }} points</u> in this round.
              </p>
              </div>
       </div>
      {% else  %}

      <div class="mycontainer" >
          <div>
          {% if subsession.num_FR > 0 %}
              Your Role: <br>
              {% if player.roles == 'TR' %}
                  <span style ="font-size:1.2em; font-weight: bold; color: dodgerblue">True R</span>
              {% else %}
                  <span style ="font-size:1.2em; font-weight: bold; color: darkgrey">False R</span>
              {% endif %}
          {% else %}
                Your Role: <br>
                <span style ="font-size:1.2em; font-weight: bold; color: dodgerblue">R</span>
          {% endif %}
          </div>
          <div>
              {% if sender_Mistake > 0%}
                <p style="font-size: 30px"> The message sent by <span style ="font-size:1.2em; font-weight: bold; color: red">S</span> is "{{ message_S }}"<br>
                    The message received by you is "{{ message_R }}"
                </p>
              {% else %}
                <p style="font-size: 30px"> The message sent by <span style ="font-size:1.2em; font-weight: bold; color: red">S</span> is "{{ message_S }}"<br>
                </p>
              {% endif %}
          <p>
              You put <b>{{ action }}</b> grams of herbal extract. <br> The poison was TYPE {{ player.type }}. <br>
              Thus, you get <u>{{ earning }} points</u> in this round.
          </p>
              </div>

      </div>
      {% endif %}
      <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 {% if player.roles != 'S'  %}(YOU){% endif %}</span></th>
              <th colspan="3">Points for <span style ="font-size:1.2em; font-weight: bold; color: red">S {% if player.roles == 'S'  %}(YOU){% endif %}</span></th>
          </tr>
          <tr style="height: 5%;">
              <th style='display:none;'></th>
              <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>


    <button class="otree-btn-next btn btn-primary not-clicked" id="next_page" style="font-size: 25px; margin: 15px;"> CONTINUE </button>

    {% else %}
    <p>
    All decisions in this round are completed.<br>
    The outcome of the round will be revealed at
    the end of the experiment. Pleaes click the
    button below to proceed to the next round.
    </p>
            <button class="otree-btn-next btn btn-primary not-clicked" id="next_page" style="font-size: 25px; margin: 15px;"> PROCEED </button>
    {% endif %}

{% endblock %}

{% block scripts %}
    <script>

    var action = parseInt({{ action }});
    var hcol = parseInt({{ hcol }});
    var lcolor = "{{ lcolor }}";
    var hcolor = "{{ hcolor }}";
    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);

    }


{#$('#ptable tbody tr:nth-child('+action+') td:nth-child('+hcol+')').css("background-color","red");#}
$('#ptable tbody tr td:nth-child('+(hcol+1)+')').css("background-color", lcolor );
$('#ptable tr').eq(action+2).find('td').eq(1).css("background-color", lcolor);
$('#ptable tr').eq(action+2).find('td').eq(hcol).css({'background-color': hcolor, 'color': 'white', 'font-weight': 'bold'});
{#$('#ptable tr').eq(action+2).find('td').slice(2, 5).css('background-color', 'green');#}
$('#ptable tr').eq(2).find('td').eq(0).css('background-color', 'white');
    </script>
{% endblock %}