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

{% block title %}
    Hawk-Dove Game
{% endblock %}

{% block content %}

Pick Hawk or Dove. The chart below represents possible payoff matrices.
<br><br>

<table class="table table-md table-bordered">
    <thead>
        <tr>
            <th></th>
            <th colspan="3" scope="col" class="text-center">Partner's Choice<br></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th rowspan="3" scope="row" class="align-middle text-center">Your Choice</th>
            <td></td>
                <th>Hawk</th>
                <th>Dove</th>
        </tr>
        <tr>
            <th>Hawk</th>
                <td> (-1, -1)</td>
                <td> (3, 0)</td>
        </tr>
        <tr>
            <th>Dove</th>
                <td> (0, 3)</td>
                <td>(1.5, 1.5)</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 = "False">
  Hawk
</button>
<button name = "choice" class = "myButton" value = "True">
    Dove
  </button>

{% endblock %}