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


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


{# ****************************************************************************************************************** #}
{# *** SCRIPTS *** #}
{# ****************************************************************************************************************** #}
{% block scripts %}
    {% if Constants.enforce_consistency == True %}
        {% if Constants.one_choice_per_page == False and Constants.random_order == False %}
            <script src="{% static 'cem/js/consistency.js' %}"></script>
        {% endif %}
    {% endif %}
{% endblock %}


{# ****************************************************************************************************************** #}
{# *** TITLE *** #}
{# ****************************************************************************************************************** #}
{% block title %}
    {% trans "Here is an Example with Candies" %}
{% 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 %}


        <!-- ------------------------------------------------------------------------------------------------------- -->
        <!-- Table - Lottery Decisions (Accept/Reject) -->
        <!-- ------------------------------------------------------------------------------------------------------- -->
        {% if Constants.accept_reject == True and Constants.variation != 'sure_payoff' %}

            <div class="card">
                <table class="table table-striped">

                    <thead>

                <thead>
                    Remember that all the monies here are in Kenyan Shillings.
                    </thead>
                        <tr class="header">
                            <th class="lottery_left">{% trans "Lottery" %}</th>
                            <th class="formfield">{% trans "Accept" %}</th>
                            <th class="formfield">{% trans "Reject" %}</th>
                        </tr>
                    </thead>

                    <tbody>
                        {% for i,f,p,hi,lo,sp in choices %}
                            <tr>
                                <!-- lotteries -->
                                <td class="lottery_left">
                                    <b>{{ hi }}</b>
                                    {% trans "candies if heads"},
                                    <b>{{ lo }}</b> {% trans "if tails" %}
                                </td>

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

                                <!-- reject -->
                                <td class="formfield">
                                    <input type="radio" name="{{ f }}" value="B" required>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

        <!-- ------------------------------------------------------------------------------------------------------- -->
        <!-- Table - Lottery Decisions (Option A/B) -->
        <!-- ------------------------------------------------------------------------------------------------------- -->
        {% else %}

            <div class="card">
                <table class="table table-striped">
                    <thead>
                        <tr class="header">
                            <th class="lottery">{% trans "Option A" %}</th>
                            <th class="formfield"></th>
                            <th class="sure_payoff">{% trans "Option B" %}</th>
                        </tr>
                    </thead>

                    <tbody>
                        {% for i,f,p,hi,lo,sp in choices %}
                            <tr>
                                <!-- lotteries -->
                                <td class="lottery">
                                 {{ hi }}   {% trans "candies" %}  {% trans "if heads" %},
                                      {% trans "0 if tails" %}
                                </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>

                                <!-- sure payoff -->
                                <td class="sure_payoff">
                                    {{ sp }} {% trans "candies for sure " %}

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

        {% endif %}
    </div>
               <p></p>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Submit
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"> Submit</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p> Do you want to submit the choices made?
	<tr>
	<td  id=“lane”></td></p>
	</tr>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">No</button>
        <button class="btn btn-primary">Yes</button>
      </div>
    </div>
  </div>
</div>
</div>
</div>



 <script src="{% static "COP_Experiment/Basic.js" %}"></script>





{% endblock %}