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

{% block title %}
    <table class="table">
        <tr>
            <td style="width:80%;border-color:transparent">Your purchasing decision</td>
            <td style="width:20%;border-color:transparent;text-align: right;font-size: 60%;color: #78797a"> Part{% if subsession.round_number < first_round_part3 %} 2 {% else %} 3 {% endif %}- Round {{ displayed_round_number }}</td>
        </tr>
    </table>
{% endblock %}

{% block content %}

    {% include 'compensation_beliefs/InstructionsBase.html' %}

     <p></p>
     <div class="alert alert-info">Your role is <strong>{{player.role}}</strong> in this part. </div>

    <table>
        <tr>
            <td style="width: 75%; vertical-align:top; height:5cm">
                <p>
                    The price of the product in this round is <b>{{ player.price }}</b>.
                </p>
                     {% formfield group.buy_decision %}
            </td>

            <td style="width: 25%; vertical-align:top">
               {% if player.treatment == 'Risk' %}
                   <div class="card">
                       <div class="card-header" id="headingOne">
                           <h5 class="mb-0">
                               <button type="button" class="btn btn-light collapsed" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                    Click here to reveal number of sliders
                               </button>
                               <input type="hidden" id="id_information_taken" name="information_taken" value="False">
                           </h5>
                       </div>
                       <div id="collapseOne" class="collapse" aria-labelledby="headingOne">
                           <div class="card-body">
                               If you decide to buy the product and this round is selected for payment, <b>Person B will have to solve {{ harmed_sliders }} sliders</b>.
                           </div>
                       </div>
                   </div>

               {% else %}
                   <div class="card">

                           <div class="card-body">
                               If you decide to buy the product and this round is selected for payment,
                               <b> {% if player.treatment == "Harm" %}two{% endif %} Person B{% if player.treatment == "Harm" %}s{% endif %}
                                   will have to solve {{ harmed_sliders }} sliders{% if player.treatment == "Harm" %} each{% endif %}</b>.
                           </div>
                   </div>
               {% endif %}

            </td>
       </tr>
    </table>


     {% next_button %}

{% endblock %}


{% block scripts %}
    <script>
        function set_clicked(event) {
            var information_taken = document.getElementById("id_information_taken");
            information_taken.value = "True";
            collapsible.removeEventListener('click', set_clicked)
        }

        var collapsible = document.getElementsByClassName("btn btn-light collapsed");
        collapsible[0].addEventListener('click', set_clicked);
    </script>
{% endblock %}