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

{% block style %}
    <style>
        #my_table td {
           text-align: center;
        }
        
        #my_table th {
           text-align: center;
        }
        #my_table th {
            background: #0671ce;
        }
        #my_table th {
            table-layout: fixed ;
            width: 50% ;
        }
        #my_table2 td {
           text-align: center;
        }

        #my_table2 th {
           text-align: center;
        }
        #my_table2 th {
            background: #dedfe0;
        }

    </style>
{% endblock %}



{% block title %}
    Choose Contract
{% endblock %}

{% block content %}
    <p>
        <strong>Round # {{player.round_number}}</strong>
        <br><br>
        Please, choose which contract you prefer (A or B).
        <br>
        Remember that the future is unknown until after you choose.
        <br>
    </p>

    <table class="table table-bordered" id="my_table">
        <thead>
        <tr>
            <th>{{ 'Contract A' }}</th>   <th >{{ 'Contract B' }}</th>
        </tr>
        </thead>
            <tr>
                <td id="L" class="choice_cell">{{ L }}</td>   <td id="R" class="choice_cell">{{ R }}</td>
            </tr>
    </table>

        <br><br>
        The possible futures are:
    </p>
    <table class="table table-bordered" id="my_table2">
        <thead>
        <tr>
             <th>{{ 'State' }}</th>   <th>{{ 'Description' }}</th>   <th >{{ 'Probability' }}</th>
        </tr>
        </thead>
        <tr>
            <td>{{ 'Normal' }}</td> <td>{{ 'No costs: contract realized as it is' }}</td>   <td>{{ '8/10 (or 80%)' }}</td>
        </tr>
        <tr>
            <td>{{ 'Abnormal' }}<td id="C" class="choice_cell">{{ C }}</td><td>{{ '2/10 (or 20%)' }}</td>
        </tr>
    </table>
    <br><br>

     <p>Click on which contract you prefer, and find out the future on the next page.</p>

    <button name="choose_b" value="False" class=" btn btn-primary"> Contract A </button>
    <button name="choose_b" value="True" class=" btn btn-primary" > Contract B</button>

    <p>



{% endblock %}