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

{% block title %}
    The Scenario
{% endblock %}

{% block styles %}
    <link rel="stylesheet" type="text/css" href="{% static 'global/matrix.css' %}" />

    <style>
        .highlight-row-on-hover:hover td {
            background-color: #fcf8e3;
        }

    </style>

{% endblock %}

{% block content %}

    <div class="form-group required">
        <p>
            You run out of supplies while camping in a remote area and must forage for food to eat.
            There are two types of fruit that grow in this area: tree-fruit and berries. You think you could
            probably pick a few berries on your own but there are not many
            bushes and they may not be enough to keep your energy up. By contrast, tree-fruit is bigger and would
            definitely provide enough sustenance but it grows high up in a big tree and you would not be able to shake
            the fruit loose without help. You
            notice the other participant walking nearby with a foraging basket but you cannot tell if they are planning
            to look for tree-fruit or berries. If they pick berries, there will be barely any left in the area for
            you to pick. The other participant looks over and sees you.
            This leaves you with two choices: you could either try to shake tree-fruit loose (hoping the other participant
            cooperates by helping you) or try to pick berries by yourself (knowing they will provide you
             with less energy). Given these point distributions, what will you do? Please click one of the buttons
            below to select your answer.

        </p>
        <p><b>Remember: </b>In each cell, the amount on the left is the number of points you will receive given this outcome, and the amount on
            the right is the number of points the other participant will receive. </p>
        <table class="table table-bordered text-center" style="width: auto; margin: auto">
            <tr>
                <th colspan="2" rowspan="2"></th>
                <th colspan="2">The Other Participant</th>
            </tr>
            <tr>
                <th>Cooperate</th>
                <th>Defect</th>
            </tr>
            <tr>
                <th rowspan="2"><span>You</span></th>
                <td><button name="decision" value="Cooperate" class="btn btn-primary btn-large">I will cooperate</button></td>
                <td>{{Constants.both_cooperate_payoff}}, {{Constants.both_cooperate_payoff}}</td>
                <td>{{ Constants.betrayed_payoff }}, {{Constants.betray_payoff}}</td>
            </tr>
            <tr>
                <td><button name="decision" value="Defect" class="btn btn-primary btn-large">I will defect</button></td>
                <td>{{Constants.betray_payoff}}, {{ Constants.betrayed_payoff }}</td>
                <td>{{Constants.both_defect_payoff}}, {{Constants.both_defect_payoff}}</td>
            </tr>
        </table>
    </div>

 <p>Here you can chat with the other participant.</p>

    {% chat %}


    {% include Constants.instructions_template %}

{% endblock %}