{% 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">
     
{% 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">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_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 <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_down_amount}}, {{Constants.down_Down_amount}}</td>
            </tr>
        
{% endif %}
{% if player.id_in_group == 2%}
<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_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 <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_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>

    {% if player.id_in_group == 1%}{% include 'GSS_low/Instructions.html' %}{% endif %}

{% if player.id_in_group == 2%}{% include 'GSS_low/Instructions2.html' %}{% endif %}{% endblock %}