{% 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;
}

</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="butdiv"><button id="skip" name="extra_04" value=0><b>Skip</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/napkins.jpg" %}" style="width:100%;height:100%;">
	    	</div>
	   		<div class="flip-card-back">
	   			<div class="align-items-center">
	     	 		<p> Brighten up your party table with these beautiful napkins. Its disposable and biodegradable fabric helps you take care of unexpected spills. It has a better quality than Endo and has a reasonable price. The pack contains 25 red paper napkins.</p> 
	     	 	</div>
	    	</div>
	  	</div>
	  </div>
	  <h3>Softy</h3>
	  {% if player.sale_page == 4 %}
	    <p class="price"><del>€4.90</del>
      		<span class="discount"> €2.90 </span>
	  	</p>
	{% else %}
		<p class="price">€4.90</p>
	{% endif %}
	  <p><button name="extra_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/napkins.jpg" %}" style="width:100%;height:100%;">
	    	</div>
	   		<div class="flip-card-back">
	   			<div class="align-items-center">
	     	 		<p> Brighten up your party table with these beautiful napkins. The napkins are reusable and %100 cotton. It has a reasonable price and quality. They are machine washable. Dont bleach. The pack contains 25 red paper napkins.</p> 
	     	 	</div>
	    	</div>
	  	</div>
	  </div>
	  <h3>Bonny</h3>
	  {% if player.sale_page == 4 %}
	    <p class="price"><del>€4.90</del>
      		<span class="discount"> €2.90 </span>
	  	</p>
	{% else %}
		<p class="price">€4.90</p>
	{% endif %}
	  <p><button name="extra_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/napkins.jpg" %}" style="width:100%;height:100%;">
	    	</div>
	   		<div class="flip-card-back">
	   			<div class="align-items-center">
	     	 		<p> Brighten up your party table with these beautiful napkins. It has a better quality than Bonny. The napkins are reusable and %100 polyester. Hand-wash is recommended. The pack contains 25 red paper.</p> 
	     	 	</div>
	    	</div>
	  	</div>
	  </div>
	  <h3>Noa</h3>
	  {% if player.sale_page == 4 %}
	    <p class="price"><del>€3.90</del>
      		<span class="discount"> €2.90 </span>
	  	</p>
	{% else %}
		<p class="price">€3.90</p>
	{% endif %}
	  <p><button name="extra_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/napkins.jpg" %}" style="width:100%;height:100%;">
	    	</div>
	   		<div class="flip-card-back">
	   			<div class="align-items-center">
	     	 		<p>Brighten up your party table with these beautiful napkins. The napkins are reusable and %100 cotton. Hand-wash is recommended. It has a lower quality than Rumba. The pack contains 25 red paper napkins.</p> 
	     	 	</div>
	    	</div>
	  	</div>
	  </div>
	  <h3>Bobu</h3>
	  {% if player.sale_page == 4 %}
	    <p class="price"><del>€5.90</del>
      		<span class="discount"> €3.90 </span>
	  	</p>
	{% else %}
		<p class="price">€5.90</p>
	{% endif %}
	  <p><button name="extra_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/napkins.jpg" %}" style="width:100%;height:100%;">
	    	</div>
	   		<div class="flip-card-back">
	   			<div class="align-items-center">
	     	 		<p>Brighten up your party table with these beautiful napkins. Its fabric is thin and smells like roses. It has a better quality than Rumba. The pack contains 25 red paper napkins. </p> 
	     	 	</div>
	    	</div>
	  	</div>
	  </div>
	  <h3>Endo</h3>
	  {% if player.sale_page == 4 %}
	    <p class="price"><del>€2.50</del>
      		<span class="discount"> €1.25 </span>
	  	</p>
	{% else %}
		<p class="price">€2.50</p>
	{% endif %}
	  <p><button name="extra_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/napkins.jpg" %}" style="width:100%;height:100%;">
	    	</div>
	   		<div class="flip-card-back">
	   			<div class="align-items-center">
	     	 		<p>Brighten up your party table with these beautiful napkins. It is from the same brand as Endo. It has a better quality than Heaven. Its fabric is thin and smells like mint. The pack contains 25 red paper napkins.</p> 
	     	 	</div>
	    	</div>
	  	</div>
	  </div>
	  <h3>Fun</h3>
	  {% if player.sale_page == 4 %}
	    <p class="price"><del>€2.50</del>
      		<span class="discount"> €1.25 </span>
	  	</p>
	{% else %}
		<p class="price">€2.50</p>
	{% endif %}
	  <p><button name="extra_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/napkins.jpg" %}" style="width:100%;height:100%;">
	    	</div>
	   		<div class="flip-card-back">
	   			<div class="align-items-center">
	     	 		<p> Brighten up your party table with these beautiful napkins. Its disposable and biodegradable fabric helps you take care of unexpected spills. The pack contains 25 red paper napkins.</p> 
	     	 	</div>
	    	</div>
	  	</div>
	  </div>
	  <h3>Rumba</h3>
	  {% if player.sale_page == 4 %}
	    <p class="price"><del>€3.90</del>
      		<span class="discount"> €2.90 </span>
	  	</p>
	{% else %}
		<p class="price">€3.90</p>
	{% endif %}
	  <p><button name="extra_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/napkins.jpg" %}" style="width:100%;height:100%;">
	    	</div>
	   		<div class="flip-card-back">
	   			<div class="align-items-center">
	     	 		<p>Brighten up your party table with these beautiful napkins. Its fabric is thick, which allows it to soak more water. It has a lower quality than Fun. The pack contains 25 red paper napkins. </p> 
	     	 	</div>
	    	</div>
	  	</div>
	  </div>
	  <h3>Heaven</h3>
	  {% if player.sale_page == 4 %}
	    <p class="price"><del>€1.90</del>
      		<span class="discount"> €0.90 </span>
	  	</p>
	{% else %}
		<p class="price">€1.90</p>
	{% endif %}
	  <p><button name="extra_04" value=8>Add to Cart</button></p>
	</div>
</div>


{% endblock %}