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


{% block content %}

{% include "global/fopen_bt.html" %}
<div class="progress-bar">
  <div class="progress"></div>
</div>
Question 2
{% include "global/fopen_at.html" %}

<p>
  Reward Level: <b>{{incentives}} points</b> per correctly solved task
</p>
{% if player.WTP_Dec1 == True %}
<p>
Suppose the recommendation costs <b>{{ rec_points }} each round</b>. Which of the following options do you prefer?
</p>
{% else %}
<p>
Suppose the recommendation <b>costs nothing</b> and to <b>not receive the recommendation</b> you have to pay <b>{{ no_rec }} each round</b>.
Which of the following options do you prefer?
</p>
{% endif %}
<div class='center'>
  <button name="WTP_Dec2" class="btn btn-primary" value="True">I want the <br>Recommendation</button>
  OR
  <button name="WTP_Dec2" class="btn btn-primary" value="False">I don't want the <br>Recommendation</button>
</div>
 {% include "global/fclose.html" %}

 <input type="hidden" name="WTP_Dec2_time_spent" value="0" id="WTP_Dec2_time_spent"/>
 <input type="hidden" name="WTP_Dec2_warnings" value="0" id="WTP_Dec2_warnings"/>

{% endblock %}

{% block scripts %}
{% block styles %}
<style>
.btn {
  margin: 10px;
}
.center {
 display: block;
 margin-left: auto;
 margin-right: auto;
 width: 50%;
}
/* CSS for the progress bar */
.progress-bar {
  width: 100%;
  height: 20px;
  background-color: #ddd;
  margin-bottom: 10px;
}
.progress {
  width: 14.286%; /* Change this percentage according to progress */
  height: 100%;
  background-color: rgb(0, 105, 217);
}
</style>
{% endblock %}

{% endblock %}