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

{% block title %}
  
Your Choice
{% endblock %}

{% block styles %}

    <style>
        .highlight-row-on-hover:hover td {
            background-color: #fcf8e3;
        }
    </style>

{% endblock %}

{% block content %}

    <div class="form-group required">
        <table class="table table-bordered text-center" style="width: auto; margin: auto">
            <tr>
                <th colspan="2" rowspan="2"></th>
                <th colspan="3">The Other Individual</th>
            </tr>
            <tr>
                <th>Up</th>
       <th>Center</th>
         <th>Down</th>
            </tr>
            <tr class="highlight-row-on-hover">
                <th rowspan="3"><span class="rotate90">You</span></th>
                <td><button name="decision" value="up" class="btn btn-primary btn-large">I choose <strong> Up </strong> </button></td>
                <td>{{Constants.up_amount}}, {{Constants.up_amount}}</td>
         <td>{{Constants.up_center_amount}}, {{Constants.center_up_amount}}</td>       <td>{{Constants.up_down_amount}}, {{Constants.down_up_amount}}</td>
            </tr>
      <tr class="highlight-row-on-hover">
                <td><button name="decision" value="center" class="btn btn-primary btn-large">I choose <strong> Center </strong> </button></td>
                <td>{{Constants.center_up_amount}}, {{Constants.up_center_amount}}</td>
       <td>{{Constants.center_amount}}, {{Constants.center_amount}}</td>
          <td>{{Constants.center_down_amount}}, {{Constants.down_center_amount}}</td>
            </tr>
         <tr class="highlight-row-on-hover">
                <td><button name="decision" value="down" class="btn btn-primary btn-large">I choose <strong> Down </strong> </button></td>
                <td>{{Constants.down_up_amount}}, {{Constants.up_down_amount}}</td>
        <td>{{Constants.down_center_amount}}, {{Constants.center_down_amount}}</td>        <td>{{Constants.down_amount}}, {{Constants.down_amount}}</td>
            </tr>
        

    <table class="table">
	<br/>
        <tr>
            <th>Round</th>
            <th>Your choice</th>
	    <th>Other individual's choice</th>
	    <th>Your payoff</th>
	    <th>Other individual's payoff</th>
        </tr>
	{% if subsession.round_number > 1%}
        {% for p in player_in_previous_rounds %}
            <tr>
                <td>{{ p.subsession.round_number }}</td>
                <td>{{ p.decision }}</td>
		<td>{{ p.other_player.decision }}</td>
		<td>{{ p.round_result }}</td>
		<td>{{p.other_player.round_result }}</td> 
            </tr>
        {% endfor %}
	{% endif %}
    </table>

    {% include 'GSC_low/Instructions.html' %}

{% endblock %}