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

{% block title %} {% endblock %}

<!-- SCRIPTS -->

{% 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, 210px);
	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_01" value=0></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/salmon.jpg" %}" style="width:100%;height:100%;">
	    	</div>
	   		<div class="flip-card-back">
	   			<div class="align-items-center">
	     	 		<p>Heylo Fish is a farmed salmon. It has less quality than Norwella Fish and can not be eaten raw. It is less effected with pollutants and therefore very healthy. Recommended to serve with vegetables.</p> 
	     	 	</div>
	    	</div>
	  	</div>
	  </div>
	  <h3>Heylo Fish </h3>
	  <p class="price">€13.90</p>
	  <p><button name="list_01" 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/salmon.jpg" %}" style="width:100%;height:100%;">
	    	</div>
	   		<div class="flip-card-back">
	   			<div class="align-items-center">
	     	 		<p>Holo Fish has a lower quality than Heylo Fish. It is recommended to serve this salmon as burger. Recipe: Grind in the food processor and combine with spring seasonings and eggs. Form a patty and fry it. Voila! </p> 
	     	 	</div>
	    	</div>
	  	</div>
	  </div>
	  <h3>Holo Fish</h3>
	  <p class="price">€10.90</p>
	  <p><button name="list_01" 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/salmon.jpg" %}" style="width:100%;height:100%;">
	    	</div>
	   		<div class="flip-card-back">
	   			<div class="align-items-center">
	     	 		<p>Bento Fish is middle range quality smoked salmon and has a better quality than Holo Fish. It is sliced very thinly and usually served with a slice of bread and cream cheese.</p> 
	     	 	</div>
	    	</div>
	  	</div>
	  </div>
	  <h3>Bento Fish</h3>
	  <p class="price">€15.90</p>
	  <p><button name="list_01" 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/salmon.jpg" %}" style="width:100%;height:100%;">
	    	</div>
	   		<div class="flip-card-back">
	   			<div class="align-items-center">
	     	 		<p>Dante Fish is wild salmon. It has a better quality than Bento Fish and very rich in omega-3 fatty acid.</p> 
	     	 	</div>
	    	</div>
	  	</div>
	  </div>
	  <h3>Dante Fish</h3>
	  <p class="price">€17.90</p>
	  <p><button name="list_01" 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/salmon.jpg" %}" style="width:100%;height:100%;">
	    	</div>
	   		<div class="flip-card-back">
	   			<div class="align-items-center">
	     	 		<p>Enmando Fish has the same quality as Heylo Fish. It is very rich in omega-3 fatty acid and very healthy. It is recommended to bake it covered with lemon slices and soy sauce.</p> 
	     	 	</div>
	    	</div>
	  	</div>
	  </div>
	  <h3>Enmando Fish</h3>
	  <p class="price">€15.90</p>
	  <p><button name="list_01" 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/salmon.jpg" %}" style="width:100%;height:100%;">
	    	</div>
	   		<div class="flip-card-back">
	   			<div class="align-items-center">
	     	 		<p>Norwella Fish is high quality sushi grade salmon, which goes well with soy sauce and wasabi. Usually served with sushi rice and unlike others it can be eaten raw. It is a nice alternative for people, who is on a raw food diet.</p> 
	     	 	</div>
	    	</div>
	  	</div>
	  </div>
	  <h3>Norwella Fish</h3>
	  <p class="price">€30.90</p>
	  <p><button name="list_01" 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/salmon.jpg" %}" style="width:100%;height:100%;">
	    	</div>
	   		<div class="flip-card-back">
	   			<div class="align-items-center">
	     	 		<p>Moaw Fish is farmed salmon and very expensive due to its Nordic origin. It is very rich in omega-3 fatty acid and goes well with white wine. It can be cooked in pan or bake with vegetables.</p> 
	     	 	</div>
	    	</div>
	  	</div>
	  </div>
	  <h3>Moaw Fish</h3>
	  <p class="price">€20.90</p>
	  <p><button name="list_01" 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/salmon.jpg" %}" style="width:100%;height:100%;">
	    	</div>
	   		<div class="flip-card-back">
	   			<div class="align-items-center">
	     	 		<p>Ardo Fish is wild salmon and has a better quality than Moaw Fish. It is from Norway and very rich in omega-3 fatty acid and goes well with white wine. Recommended to serve with vegetables.</p> 
	     	 	</div>
	    	</div>
	  	</div>
	  </div>
	  <h3>Ardo Fish</h3>
	  <p class="price">€25.90</p>
	  <p><button name="list_01" value=8>Add to Cart</button></p>
	</div>
</div>

{% endblock %}