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

{% block title %}
    Battle of the Sexes
{% endblock %}

{% block content %}


You are the <b> {{player.role}} </b> player. Please select either movie or concert.
<br><br>

<table class="table table-md table-bordered">
    <thead>
        <tr>
            <th></th>
            <th colspan="3" scope="col" class="text-center">{% if player.role == 'column' %} Your Choice{% else %} Partner's Choice {% endif %}<br></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th rowspan="3" scope="row" class="align-middle text-center">{% if player.role == 'row' %} Your Choice{% else %} Partner's Choice {% endif %}</th>
            <td></td>
                <th>Concert</th>
                <th>Movie</th>
        </tr>
        <tr>
            <th>Movie</th>
                <td> (0, 0)</td>
                <td> (600, 200)</td>
        </tr>
        <tr>
            <th>Concert</th>
                <td> (200, 600)</td>
                <td>(0, 0)</td>
        </tr>
    </tbody>
</table>
<br>
<style>
  .myButton {
	box-shadow:inset 0px 1px 0px 0px #54a3f7;
	background:linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);
	background-color:#007dc1;
	border-radius:3px;
	border:1px solid #124d77;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:13px;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #154682;
}
.myButton:hover {
	background:linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);
	background-color:#0061a7;
}
.myButton:active {
	position:relative;
	top:1px;
}

  </style>
<button name = "choice" class = "myButton" value = "True">
  Movie
</button>
 <button name = "choice"  class = "myButton" value = "False">
  Concert
</button>

{% endblock %}