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


{% block content %}

{% if form.errors %}
  {% include "global/field_validation_error.html" %}
{% endif %}

{% include "global/fopen_bt.html" %}
Information on Part 4
{% include "global/fopen_at.html" %}
<!-- Tab navigation -->
<div class="sticky bar_container">
<ul class="nav nav-tabs navbar-light bg-light justify-content-center bar" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link instructions-tab active" id="instructions-tab" data-bs-toggle="tab" href="#instructions" role="tab" aria-controls="instructions" onclick="topFunction();">
            Instructions
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link control-tab" id="control-tab" data-bs-toggle="tab" href="#control" role="tab" aria-controls="control" onclick="topFunction();">
            Control
        </a>
    </li>
</ul>
</div>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane show active" id="instructions" role="tabpanel" aria-labelledby="instructions-tab">

<p>
  We will now ask you whether you would be willing to buy the recommendation for different price levels. 
  The different scenarios may also include situations in which you have to pay something to avoid getting the recommendation. 
  Depending on your answers you may or may not receive a recommendation for the next <b>{{ Constants.play_rounds }} rounds</b>. 
  To determine whether you receive the recommendation, the computer will randomly draw a cost for the recommendation after you gave your answers. 
</p>
<p>
  <ul>
    <li>If your valuation is equal to or larger than the randomly drawn cost, 
      you <b>will get the recommendation and you will pay the randomly drawn cost in each of the {{ Constants.play_rounds }} rounds.</b> 
    </li>
    <li>If your valuation is lower, you <b>will not get the recommendation and you won't have to pay anything.</b> 
    </li>
  </ul>
  <b>This means that it is in your best interest to answer each question carefully and honestly.</b>
</p>

<br>
<img align="middle" width="100%" class="center" src="{% static "images/WTP_Q_new.png" %}"/>
<br>
<p>
There will be <b>two sets</b> of {{Constants.no_decisions}} questions.
Each set of questions features a <b>different payment level for the completion of tasks.</b> 
After you have answered the questions, one of the payment levels is randomly selected for you. 
Because the payment levels are randomly selected, you cannot affect which payment level is chosen. 
<b>Instead, on the following questions, you will make decisions assuming that a given payment level is chosen.</b>
</p>
<br>
<div class="no-center">
<button onclick="topFunction();" type="button" class="nexttab btn-primary btn next">Next</button>
</div>
</div>

<div class="tab-pane" id="control" role="tabpanel" aria-labelledby="control-tab">
<br>
{% formfield player.control_q1 label="Do you receive the recommendation if the randomly drawn cost is above the price that you would be willing to pay?" %}
<br>
{% formfield player.control_q2 label="How often do you have to pay the costs if you receive the recommendation?" %}
<br>
<button onclick="topFunction();" type="button" class="prevtab btn-primary btn back">Back</button>
<button class="otree-btn-next btn btn-primary">Next</button>

</div>

</div>
 {% include "global/fclose.html" %}
<!-- To hide the next button, use css ("display: none" on the "otree-btn-next" class) -->
<input type="hidden" name="WTP_Instructions_time_spent" value="0" id="WTP_Instructions_time_spent"/>
<input type="hidden" name="WTP_Instructions_warnings" value="0" id="WTP_Instructions_warnings"/>
{% endblock %}

{% block styles %}
<style>
  .center {
   display: block;
   margin-left: auto;
   margin-right: auto;
   width: 75%;
 }
  #myTab {
  display: none;
  }
  .no-center {
    text-align: right;
  }
  .center-me {
    text-align: right;
  }
  .nexttab {
    float: right;
  }
  .otree-form-errors {
    visibility: hidden;
    display: none;
  }
  .alert-danger {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-radius: .25rem;
  }

  img {
  border: 1px solid #ced4da;
  width: 400px;
  }
</style>
{% endblock %}

{% block scripts %}
<script src="{% static 'back_button_v1/js/prev_next_button.js' %}"></script>

{% if form.errors %}
<script>
    $('.nexttab').click()
</script>
{% endif %}

{% endblock %}