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

{% block title %} {% endblock %}

<!-- SCRIPTS -->

{% block scripts %} <script>




</script> {% endblock %} 

<!-- STYLES -->

{% block styles %}<style>

ul {
  list-style-type: none; /* Remove bullets */
  padding: 0; /* Remove padding */
  margin: 0; /* Remove margins */
}

ul li {
  border: 1px solid #ddd; /* Add a thin border to each list item */
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6; /* Add a grey background color */
  padding: 5px; /* Add some padding */
}

.sl {
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 300px;
  margin: auto;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 30px;
  margin-right: 30px;
  font-family: arial;
  padding-right: 20px; 
  padding-left: 20px;
  padding-top: 10px
  padding-bottom: 10px;
}

.align {
	text-align: center;
}

/*Textwrap*/
.left{
float: left;
margin: 20px;
}

</style> {% endblock %}

<!-- BODY -->

{% block content %}

<h1 style="text-align:center; font-family: arial;">Your Friends are Coming! </h1>
<p style="text-align:justify ; font-family: arial;"> You will host a dinner party for your friends from college who you have not seen for a long time. Therefore you want to impress them by preparing a delicious dinner. You have prepared a shopping list for the occassion which contains 4 products.</p>

		
<div class=left>
	<div class=align>
		<div class="sl">
		<br>
 		 <p><b>Shopping List</b></p>
  		<ul>
  		<li>Salmon</li>
  		<li>White Wine</li>
  		<li>Tomato</li>
  		<li>Lettuce</li>  		
		</ul>  
		<br>
		</div>
	</div>
</div>

<p> 
You have to purchase all the products in your shopping list to finalize the shopping session. On the following pages you will see eight different product cards for each product on your list. The products name, price and picture will be visible on the front of the product cards. Simply hover over the images to reveal more information about the corresponding product.
<br> 
<br> 
Clicking the "Add to Cart" button will select the product you wish to purchase and take you directly to the next page. It will not be possible to return to the previous page once an item is chosen. 
<br> 
<br>
In addition to the items in your shopping list, you will also see some additional products on the market. Here, you have the option to buy the product by clicking the "Add to Cart" button, or simply skip the page by clicking the "Skip" button. There will be no skip button displayed on the product pages, which are in your predefined shopping list.
<br>
<br>
You have a 3 minute time limit on each page. Every product is given an undisclosed value and a displayed price. The product details on the back of the product images give you an indication of the value of the product. Your gain from each product is directly related to the value per price, which allows you to win up to 70 Cents per item. While you can not lose money on the items in your predefined shopping list, you are equally likely to gain or lose on the extra items. The maximum amount that you can win is 7 Euros.
</p>

<!-- Please answer the following questions.

<form>
  <p>What is the minimum number of products that you should buy?</p>
  <input type="radio" id="7" value="7">
  <label for="7">7</label><br>
  <input type="radio" id="8" value="8">
  <label for="8">8</label><br>
  <input type="radio" id="4" value="4">
  <label for="4">4</label>

   <p>What is the maximum number of products that you can buy?</p>
  <input type="radio" id="7" value="7">
  <label for="7">10</label><br>
  <input type="radio" id="8" value="8">
  <label for="8">8</label><br>
  <input type="radio" id="4" value="4">
  <label for="4">4</label> -->

{% next_button %}

{% endblock %}