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


{% block content %}

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

<p>
  Reward Level: <b>{{incentives}} points</b> per correctly solved task
</p>
<p>
Suppose the recommendation is <b>for free</b>. Which of the following options do you prefer?
</p>

<div class='center'>
  <button name="WTP_Dec1" class="btn btn-primary" value="True">I want the <br>Recommendation</button>
  OR
  <button name="WTP_Dec1" class="btn btn-primary" value="False">I don't want the <br>Recommendation</button>
</div>
 {% include "global/fclose.html" %}

 <input type="hidden" name="WTP_Dec1_time_spent" value="0" id="WTP_Dec1_time_spent"/>
 <input type="hidden" name="WTP_Dec1_warnings" value="0" id="WTP_Dec1_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: 0%; /* Change this percentage according to progress */
  height: 100%;
  background-color: rgb(0, 105, 217);
}
</style>
{% endblock %}

{% endblock %}