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

{% block title %} {% endblock %}


{% block styles %}<style>

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

.flip-card-inner {
  position: relative;
  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;
}

.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;
}

</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">

	<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 was 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 bio and was grown in Canakkale, Turkey, which is famous with its pink and big tomatoes. It has the same quality as Matto. It is rich in vitamin C and 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>

	<br>

	<!-- 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 was 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 %}