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

{% block title %}
    Please select a bucket (Practice)
{% endblock %}

{% block content %}
    <p>
        This is a practice round.
    </p>
    <p>
        You now have the opportunity to place your token in one of the three buckets.  Your color type and the
        payoff table are listed below for your reference.
    </p>
    <p>
        Your color type is <strong> {{ player.role }} </strong>
    </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 your token will not be placed in any of the buckets, but you will
            still pay the cost of participating and receive the payoff that corresponds to your color type.</strong>
    </p>

    {% formfield player.vote label="Which bucket would you like to place your token in?" %}

    {% next_button %}

{% endblock %}