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


{% block title %}
    Choice on Opportunities to Make Own Decisions
{% endblock %}

{% block content %}

<!--
    <p>
        Please make a choice for each of below.
    <p/>

    <p>
        {% formfield player.active1 %}
    <p/>

    <p>
        {% formfield player.active2 %}
    <p/>

    <p>
        {% formfield player.active3 %}
    <p/>

    <p>
        {% formfield player.active4 %}
    <p/>

    <p>
        {% formfield player.active5 %}
    <p/>
-->

<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 2px solid #dddddd;
  text-align: center;
  padding: 8px;
}

<!--tr:nth-child(even) {-->
<!--  background-color: #dddddd;-->
<!--}-->
</style>


<table>
    <tr>
        <th>Decisions</th>
        <th>Option A:</th>
        <th>Option B:</th>
    </tr>
    <tr>
    <div>
        <td> Decision 1 </td>
        {% for choice in form.active1 %}
            <td>  {{ choice }} </td>
        {% endfor %}
    </div>
    </tr>
    <tr>
    <div>
        <td> Decision 2 </td>
        {% for choice in form.active2 %}
            <td>  {{ choice }} </td>
        {% endfor %}
    </div>
    </tr>
    <tr>
    <div>
        <td> Decision 3 </td>
        {% for choice in form.active3 %}
            <td>  {{ choice }} </td>
        {% endfor %}
    </div>
    </tr>
        <tr>
    <div>
        <td> Decision 4 </td>
        {% for choice in form.active4 %}
            <td>  {{ choice }} </td>
        {% endfor %}
    </div>
    </tr>
    <tr>
    <div>
        <td> Decision 5 </td>
        {% for choice in form.active5 %}
            <td>  {{ choice }} </td>
        {% endfor %}
    </div>
    </tr>
</table>

    {% next_button %}
{% endblock %}