{% 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 %}

   You are <strong>{{ player.role }}</strong>. <div class="form-group required">
     
{% if player.id_in_group == 1%}
   <table class="table table-bordered text-center" style="width: auto; margin: auto">
            <tr>
                <th colspan="2" rowspan="2"></th>
                <th colspan="3">Player 2</th>
            </tr>
            <tr>
             <td><button name="decision" value="up" class="btn btn-primary btn-large">I choose "Up"</button></td>          <th>Center</th>
         <th>Down</th>
            </tr>
            <tr class="highlight-row-on-hover">
                <th rowspan="3"><span class="rotate90">Player 1</span></th>
                <td><button name="decision" value="up" class="btn btn-primary btn-large">I choose "Up"</button></td>
                <td>{{Constants.Up_up_amount}}, {{Constants.up_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 "Center"</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 "Down"</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_down_amount}}, {{Constants.down_Down_amount}}</td>
            </tr>
        
{% endif %}
    <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 'GSS_low/Instructions.html' %}

{% endblock %}
