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

{% block title %}
    Stag Hunt
{% endblock %}

{% block content %}


Choose your hunt.
<br><br>

<table class="table table-md table-bordered">
    <thead>
        <tr>
            <th></th>
            <th colspan="3" scope="col" class="text-center">Hunter 2<br></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th rowspan="3" scope="row" class="align-middle text-center">Hunter 1</th>
            <td></td>
                <th>Stag</th>
                <th>Rabbit</th>
        </tr>
        <tr>
            <th>Stag</th>
                <td> (95, 95)</td>
                <td> (20, 85)</td>
        </tr>
        <tr>
            <th>Rabbit</th>
                <td> (85, 20)</td>
                <td>(60, 60)</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">
Stag
</button>
 <button name = "choice"  class = "myButton" value = "False">
Rabbit
</button>

{% endblock %}