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

{% block title %} {% endblock %}


{% block scripts %} <script>

	// Shuffle products in page
	var a = $("#wrapper > div").remove().toArray();
	for (var i = a.length - 1; i >= 1; i--) {
	    var j = Math.floor(Math.random() * (i + 1));
	    var bi = a[i];
	    var bj = a[j];
	    a[i] = bj;
	    a[j] = bi;
	}
	$("#wrapper").append(a);

	// Timer
	var minutes = 3;	// Minutes for timer	
	var distance = 42; 	// Initialize with anything above 0
	function timer(){
		// Get timer field
		var timer = document.getElementById("watch")
		// Get target time
		var duration = new Date().getTime() + minutes * 1000 * 60;
		// Run timer
		var x = setInterval(
			function() {
				var now = new Date().getTime();
				distance = duration - now;
				var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
				var seconds = Math.floor((distance % (1000 * 60)) / 1000);
				timer.innerHTML = minutes + "m " + seconds + "s ";
				// When timer ends, display Game over!
				if (distance < 0) {
					clearInterval(x);
					document.getElementById("watch").innerHTML = "Time over!";
					endShop();
				}
			}, 0);
	}

	function endShop(){
		// Pass to next page
		document.getElementById("skip").click();
	}

	// Start timer on page start
	timer()

</script> {% endblock %} 

{% block styles %}<style>

.flip-card {
  background-color: transparent;
  width: 100%;
  height: 198px;
  perspective: 1000px;
  max-width: 100%;
  font-family: arial;
}

.flip-card-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: transparent;
  color: black;
  transform: rotateY(180deg);
  text-align: center;
  font-size: 13px;
}

.ozan {
	text-align: center;
}

/*Style of the card*/

.card {
	background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 208px;
  margin: auto;
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: 10px;
  margin-right: 10px;
  display:inline-block;
  font-family: arial;
}

.price {
  color: grey;
  font-size: 22px;
}

.butdiv {
  text-align: center;
}

.butdiv button {
  border: solid;
  border-width: 1px;
  outline: 0;
  padding: 5px;
  color: black;
  background-color: white;
  outline-color: black;
  text-align: center;
  cursor: pointer;
  width: 187px;
  font-size: 15px;
}

.card button {
  border: none;
  outline: 0;
  padding: 5px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 90%;
  font-size: 15px;
}

.card button:hover {
  opacity: 0.7;
}

/*Aligns the text on the backside of the flipcard */

.align-items-center {
	padding: 20px 0;
    text-align: justify;
    margin-left: 15px;
    margin-right: 15px;
}

.discount{
	color: #CF0000;
	font-size: 26px;
}

.wrapper {
	display:grid;
    grid-template-columns: repeat(4, 208px);
	text-align: center;
  	grid-auto-flow: row;
  	justify-content: center;
}

.blank button {
	display: none;
	}

</style> {% endblock %}
<!-- BODY -->

{% block content %}

<h1 style="text-align:center; font-family: arial;">Let's Shop ! </h1>
<p style="text-align: center; font-family: arial;"> Hover over the images to gain more information about the products.  <br> Click on the "Add to Cart" button to choose the product you want to purchase. </p>

<div class="ozan"><p id="watch"></p></div>
<p><div class="blank"><button id="skip" name="list_04" value=0><b></b></button></div></p>

<div class="wrapper" id="wrapper">
	<div class="card">
	  <div class="flip-card">
	  	<div class="flip-card-inner">
	    	<div class="flip-card-front">
	      		<img src="{% static "shopping/tomato.jpg" %}" style="width:100%;height:100%;">
	    	</div>
	   		<div class="flip-card-back">
	   			<div class="align-items-center">
	     	 		<p>Matto is a bio product and is grown in Germany. It is rich in vitamin C and can be served raw or cooked. It has a lower quality than Roma tomatoes.</p> 
	     	 	</div>
	    	</div>
	  	</div>
	  </div>
	  <h3>Matto</h3>
	  <p class="price">€5.90</p>
	  <p><button name="list_04" value=1>Add to Cart</button></p>
	</div>

	<div class="card">
	  <div class="flip-card">
	  	<div class="flip-card-inner">
	    	<div class="flip-card-front">
	      		<img src="{% static "shopping/tomato.jpg" %}" style="width:100%;height:100%;">
	    	</div>
	   		<div class="flip-card-back">
	   			<div class="align-items-center">
	     	 		<p>Roma tomatoes are rich in vitamin C and can be served raw or cooked. It has a sweeter taste than the others. It has a lower quality than St. Marino.</p> 
	     	 	</div>
	    	</div>
	  	</div>
	  </div>
	  <h3>Roma</h3>
	  <p class="price">€4.90</p>
	  <p><button name="list_04" value=2>Add to Cart</button></p>
	</div>

	<div class="card">
	  <div class="flip-card">
	  	<div class="flip-card-inner">
	    	<div class="flip-card-front">
	      		<img src="{% static "shopping/tomato.jpg" %}" style="width:100%;height:100%;">
	    	</div>
	   		<div class="flip-card-back">
	   			<div class="align-items-center">
	     	 		<p>St. Marino is a cocktail tomato, which is smaller than the others and looks better in a salad. It is rich in vitamin C and can be served raw or cooked as the others. It has an acidic taste.</p> 
	     	 	</div>
	    	</div>
	  	</div>
	  </div>
	  <h3>St. Marino</h3>
	  <p class="price">€5.90</p>
	  <p><button name="list_04" value=3>Add to Cart</button></p>
	</div>

	<div class="card">
	  <div class="flip-card">
	  	<div class="flip-card-inner">
	    	<div class="flip-card-front">
	      		<img src="{% static "shopping/tomato.jpg" %}" style="width:100%;height:100%;">
	    	</div>
	   		<div class="flip-card-back">
	   			<div class="align-items-center">
	     	 		<p>Domdom is a bio product and is grown in Canakkale, which is famous with its pink and big tomatoes. It has the same quality as Matto. The canned tomatoes in that area are mostly prepared with that kind.</p> 
	     	 	</div>
	    	</div>
	  	</div>
	  </div>
	  <h3>Domdom</h3>
	  <p class="price">€3.90</p>
	  <p><button name="list_04" value=4>Add to Cart</button></p>
	</div>


	<!-- Second Row -->

	<div class="card">
	  <div class="flip-card">
	  	<div class="flip-card-inner">
	    	<div class="flip-card-front">
	      		<img src="{% static "shopping/tomato.jpg" %}" style="width:100%;height:100%;">
	    	</div>
	   		<div class="flip-card-back">
	   			<div class="align-items-center">
	     	 		<p>Prix Bono is rich in vitamin C and can be served as a fresh ingredient of a salad with a main course.</p> 
	     	 	</div>
	    	</div>
	  	</div>
	  </div>
	  <h3>Prix Bono</h3>
	  <p class="price">€3.90</p>
	  <p><button name="list_04" value=5>Add to Cart</button></p>
	</div>

	<div class="card">
	  <div class="flip-card">
	  	<div class="flip-card-inner">
	    	<div class="flip-card-front">
	      		<img src="{% static "shopping/tomato.jpg" %}" style="width:100%;height:100%;">
	    	</div>
	   		<div class="flip-card-back">
	   			<div class="align-items-center">
	     	 		<p>Celebrity is grown in France. It has slightly lower quality than the bio tomatoes but still very delicious. It goes well with salad. It is rich in vitamin C and can be served raw or cooked.</p> 
	     	 	</div>
	    	</div>
	  	</div>
	  </div>
	  <h3>Celebrity</h3>
	  <p class="price">€2.90</p>
	  <p><button name="list_04" value=6>Add to Cart</button></p>
	</div>

	<div class="card">
	  <div class="flip-card">
	  	<div class="flip-card-inner">
	    	<div class="flip-card-front">
	      		<img src="{% static "shopping/tomato.jpg" %}" style="width:100%;height:100%;">
	    	</div>
	   		<div class="flip-card-back">
	   			<div class="align-items-center">
	     	 		<p>Campari has a middle range quality. It is recommended to use it when preparing homemade ketchup or as a pasta sauce. It is rich in vitamin C and can be served raw or cooked.</p> 
	     	 	</div>
	    	</div>
	  	</div>
	  </div>
	  <h3>Campari</h3>
	  <p class="price">€1.90</p>
	  <p><button name="list_04" value=7>Add to Cart</button></p>
	</div>

	<div class="card">
	  <div class="flip-card">
	  	<div class="flip-card-inner">
	    	<div class="flip-card-front">
	      		<img src="{% static "shopping/tomato.jpg" %}" style="width:100%;height:100%;">
	    	</div>
	   		<div class="flip-card-back">
	   			<div class="align-items-center">
	     	 		<p>Santorini has the same quality as Campari. It is rich in vitamin C and can be served as an ingredient in salads or can be cooked as a sauce for the main course.</p> 
	     	 	</div>
	    	</div>
	  	</div>
	  </div>
	  <h3>Santorini</h3>
	  <p class="price">€2.90</p>
	  <p><button name="list_04" value=8>Add to Cart</button></p>
	</div>
</div>


{% endblock %}