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

{# ****************************************************************************************************************** #}
{# *** TITLE *** #}
{# ****************************************************************************************************************** #}
{% block title %}
For each row in the table below, which option would you prefer?
{% endblock %}

{# ****************************************************************************************************************** #}
{# *** STYLES *** #}
{# ****************************************************************************************************************** #}
{% block styles %}
    <link href="{% static 'MPL_Patience_en/css/custom.css' %}" rel="stylesheet">
    <style>
        div.otree-form-errors {
            display: none;
        }
    </style>
{% endblock %}

{# ****************************************************************************************************************** #}
{# *** SCRIPTS *** #}
{# ****************************************************************************************************************** #}
{% block scripts %}
<script>
    'use strict';

    function patientdate() {
        var datum = new Date();
        datum.setDate(datum.getDate() + 365);
        document.getElementById("datum")
            .innerHTML = datum.toLocaleDateString("de-DE")
}
document.addEventListener('DOMContentLoaded', patientdate);
</script>

<script src="{% static 'MPL_Patience_en/js/consistency2.js' %}"></script>


{% endblock %}

{# ****************************************************************************************************************** #}
{# *** CONTENT *** #}
{# ****************************************************************************************************************** #}
{% block content %}


   <div class="wrapper">




       <!-- ------------------------------------------------------------------------------------------------------- -->
        <!-- Lottery Decisions: Choice List -->
        <!-- ------------------------------------------------------------------------------------------------------- -->
            <div class="card">
                <table class="table table-striped">
                    <thead>
                        <tr class="header">
                            <th class="lottery-a">Option A</th>
                            <th class="formfield"></th>
                            <th class="lottery-b">Option B</th>
                        </tr>
                    </thead>

                    <tbody>
                        {% for i,f,a,b in choices %}
                            <tr>
                                <!-- A lotteries -->
                                <td class="lottery-a">
                                     {{ a }} points in 395 days <br>
                                    ({{ player.pat_date_2 }})

                                <!-- radio select form fields -->
                                {% if i == 1 %}
                                <td class="formfield">
                                    <input type="radio" name="{{ f }}" value="patient" >
                                    <input type="radio" name="{{ f }}" value="impatient"checked="checked">
                                </td>

                                {% elif i == 16 %}
                                <td class="formfield">
                                    <input type="radio" name="{{ f }}" value="patient">
                                    <input type="radio" name="{{ f }}" value="impatient" >
                                </td>
                                {% else %}
                                <td class="formfield">
                                    <input type="radio" name="{{ f }}" value="patient" required>
                                    <input type="radio" name="{{ f }}" value="impatient" required>
                                </td>
                                {% endif %}


                                <!-- B lotteries -->
                                <td class="lottery-b">
                                    {{ b }} points  in 30 days<br>
                                    ({{ player.pat_date_0 }})
                                </td>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

<br>

    {% next_button %}

{% endblock %}