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

{% block title %}
    Match #{{ match_num }} Outcome
{% endblock %}

{% block content %}

   <style>
   body {
    font: normal 20px Verdana, Arial, sans-serif;
    }

   .border-top td, .border-top th {
    border-top: 5px black;
    }

   </style>

    {% if player.id_in_group == 1 %}
    <table id="boutcome" border="2" style=" rules:none;
        font-size:22px;
        text-align:center;
        width: 100%;">
    <tr>
{#        <td>Match #</td>#}
        <td>Round #</td>
        <td>Seller's Offer</td>
        <td>Your Decision</td>
        <td>Your Value B </td>
{#        <td>Match Terminated </td>#}
    </tr>
    </table>
    {% endif %}

    {% if player.id_in_group == 2 %}
    <table id="soutcome" border="2" style=" rules:none;
        font-size:22px;
        text-align:center;
        width: 100%;">
    <tr>
{#        <td>Match #</td>#}
        <td>Round #</td>
        <td>Your Offer</td>
        <td>Buyer's Decision</td>
        <td>Buyer's Value B </td>
{#        <td>Match Terminated </td>#}
    </tr>
    </table>
    {% endif %}

    <br>
    <br>

    {% next_button %}


{% endblock %}


{% block scripts %}
 <script>
    var offers = {{ offer_dict|safe }};
    var actions = {{ action_dict|safe }};
    var i;
    var tr;
    for (i = 0; i < {{round_num}}; i++){
        tr = $('<tr/>');
        {#tr.append("<td>" + {{ match_num }} + "</td>");#}
        tr.append("<td>" + (i+1) + "</td>");
        tr.append("<td>" + offers[i] + "</td>");
        tr.append("<td>" + actions[i] + "</td>");
        tr.append("<td>" + {{ value_B }} + "</td>");
        {#if (i < {{round_num}} -1){#}
        {#    tr.append("<td>" + "No" + "</td>");         }#}
        {#if (i == {{round_num}} -1){#}
        {#    tr.append("<td>" + "Yes" + "</td>");        }#}
        if ( {{ player.id_in_group }}  == 1){
            $('#boutcome').append(tr);
        }

        if ( {{ player.id_in_group }}  == 2 ){
            $('#soutcome').append(tr);
        }
    }
    if ( {{ player.id_in_group }}  == 1){
            $('#boutcome tr:last').after('<td class="border-top" colspan="3" style="text-align: right;">Your earning in this match &nbsp; &nbsp;&nbsp;</td> <td  class="border-top"> <b>{{match_gain}} tokens</b></td></tr>');
        }
    if ( {{ player.id_in_group }}  == 2){
            $('#soutcome tr:last').after('<td class="border-top" colspan="3" style="text-align: right;">Your earning in this match &nbsp; &nbsp;&nbsp;</td> <td  class="border-top"> <b>{{match_gain}} tokens</b></td></tr>');
        }


 </script>
{% endblock %}