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

{% block title %}
    Participation
{% endblock %}

{% block content %}
    <p>
        <strong>You now have the choice to either participate in determining the winning bucket or to
            abstain.</strong>
    </p>
    <p>
        If you choose to participate then you will pay your individual cost as listed below.
    </p>
    <p>
        If you choose not to participate then you will not pay the cost, but your payoff
        will be determined by the actions of the other participants in your group.
    </p>
    <p>
        <strong>Note: You will still receive the appropriate payoff given your color and the outcome of the experiment
            regardless of participation. </strong>
    </p>
    <p>
        Your color type is <strong> {{ player.role }} </strong>
    </p>
    <p>
        Your cost of participation is <strong> {{ player.individual_cost }} </strong> points
    </p>
    <p>
        The payoff table is:
    </p>
<style>
    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
    }
    th, td {
        padding: 10px;
    }
    table.center {
        margin-left: auto;
        margin-right: auto;
    }
</style>
    <table class="center">
        <thead>
        <tr>
            <th>Color</th>
            <th>Bucket 1</th>
            <th>Bucket 2</th>
            <th>Bucket 3</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>Red</td>
            <td>300 points</td>
            <td>200 points</td>
            <td>100 points</td>
        </tr>
        <tr>
            <td>Blue</td>
            <td>200 points</td>
            <td>300 points</td>
            <td>100 points</td>
        </tr>
        <tr>
            <td>Green</td>
            <td>150 points</td>
            <td>150 points</td>
            <td>300 points</td>
        </tr>
        </tbody>
    </table>
    <p></p>
    <p>
        <strong>If you do not make a selection then the default choice will be to abstain and not participate</strong>
    </p>
    {% formfield player.participate label="Do you wish to pay the above cost and participate in this round?" %}

    {% next_button %}

{% endblock %}