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

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

{% block content %}


Based on a V value of 3, and a C value of 5, please select either 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> You revieve -1, Your Partner Recieves-1</td>
                <td> You recieve 3,  Your Partner Recieves 0</td>
        </tr>
        <tr>
            <th>Dove</th>
                <td> Your recieve 0, Your Partner Recieves 3</td>
                <td>You recieve 1.5, Your Partner Recieves 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 = "True">
  Dove
</button>
 <button name = "choice"  class = "myButton" value = "False">
  Hawk
</button>

{% endblock %}