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


{# ****************************************************************************************************************** #}
{# *** STYLES *** #}
{# ****************************************************************************************************************** #}
{% block styles %}
    <link href="{% static 'mpl/css/custom.css' %}" rel="stylesheet">
{% endblock %}



{# ****************************************************************************************************************** #}
{# *** TITLE *** #}
{# ****************************************************************************************************************** #}
{% block title %}
    {% trans "Your Decision" %}
{% endblock %}


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

    <div class="wrapper">

        <!-- ------------------------------------------------------------------------------------------------------- -->
        <!-- Progress Bar -->
        <!-- ------------------------------------------------------------------------------------------------------- -->
        {% if Constants.one_choice_per_page == True and Constants.progress_bar == True %}
            <label>
                {% blocktrans trimmed with page=page total=total %}
                    Page {{ page }} of {{ total }}
                {% endblocktrans %}
            </label>
            <div class="progress">
                <div class="progress-bar" role="progressbar" style="width:{{ progress|json }}%;">
                    <span class="sr-only"></span>
                </div>
            </div>
        {% endif %}


        <!-- ------------------------------------------------------------------------------------------------------- -->
        <!-- Lottery Decisions: Large Pies -->
        <!-- ------------------------------------------------------------------------------------------------------- -->
        {% if Constants.one_choice_per_page == True and Constants.large_pies == True %}

            <div class="card">
                <table class="table">
                    <thead>
                        <tr class="header">
                            <th class="center">{% trans "Option A" %}</th>
                            <th class="center">{% trans "Option B" %}</th>
                        </tr>
                    </thead>

                    <tbody>
                        {% for i,f,p in choices %}
                            <tr>
                                <td class="pie-chart">
                                    {% with j=i|stringformat:"s" %}
                                        {% with pies_a="pie_a_"|add:j %}
                                            <div id="{{ pies_a }}" class="pie-chart"></div>
                                        {% endwith %}
                                    {% endwith %}
                                </td>
                                <td class="pie-chart">
                                    {% with j=i|stringformat:"s" %}
                                        {% with pies_b="pie_b_"|add:j %}
                                            <div id="{{ pies_b }}" class="pie-chart"></div>
                                        {% endwith %}
                                    {% endwith %}
                                </td>
                            </tr>
                            <tr>
                                <td class="center">
                                    <button name="{{ f }}" value="A" class="btn btn-primary">
                                        {% trans "Option A" %}
                                    </button>
                                </td>
                                <td class="center">
                                    <button name="{{ f }}" value="B" class="btn btn-primary">
                                        {% trans "Option B" %}
                                    </button>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>


        <!-- ------------------------------------------------------------------------------------------------------- -->
        <!-- Lottery Decisions: Choice List -->
        <!-- ------------------------------------------------------------------------------------------------------- -->
        {% else %}

            <div class="card">
                <table class="table table-striped">
                    <thead>
                        <tr class="header" align="center">

                            <th class="lottery-a">{% trans "Option A" %}</th>
                            <th class="formfield"></th>
                            <th class="lottery-b">{% trans "Option B" %}</th>

                        </tr>
                    </thead>

                    <tbody>
                        {% for i,f,p, k in choices %}
                        <!-- we need four variables to loop over because we have added the variable option_b to the participant.vars mpl_choices. -->
                            <tr>

                                <!-- A lotteries -->
                                <td class="lottery-a" >
                                    {{ lottery_a_hi }} {% trans "with a probability of " %}{{ p }},<br/>
                                    {{ lottery_a_lo }} {% trans "otherwise" %}

                                    <html lang="en-US">
                                    <body>

                                    <div id="piechart"></div>

                                    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

                                    <script type="text/javascript">
                                    // Load google charts
                                    google.charts.load('current', {'packages':['corechart']});
                                    google.charts.setOnLoadCallback(drawChart);

                                    // Draw the chart and set the chart values
                                    function drawChart() {
                                      var data = google.visualization.arrayToDataTable([
                                      ['Task', 'Hours per Day'],
                                      ['{{lottery_a_hi}}', {{prob1}}],
                                      ['{{lottery_a_lo}}', {{prob2}}],
                                      ]);

                                      // Optional; add a title and set the width and height of the chart
                                      var options = {'width':550, 'height':400};

                                      // Display the chart inside the <div> element with id="piechart"
                                      var chart = new google.visualization.PieChart(document.getElementById('piechart'));
                                      chart.draw(data, options);
                                    }
                                    </script>

                                    </body>
                                    </html>


                                </td>



                                <!-- radio select form fields -->
                                <td class="formfield">
                                    <input type="radio" name="{{ f }}" value="A" required>
                                    <input type="radio" name="{{ f }}" value="B" required>
                                </td>

                                <!-- B lotteries -->
                                <td class="lottery-b">
                                    {{ k }} {% trans "guaranteed" %}<br/>

                                </td>


                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

        {% next_button %}

    {% endif %}

</div>

{% endblock %}