<!-- public facing landing page -->
<!DOCTYPE html>
<html>
	<head>
		
		<style type="text/css">
.carousel-item {
  height: 100vh;
  min-height: 350px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


.carousel-item:after {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background:rgba(0,0,0,0.2);
}


.fixed-top.scrolled {
  background-color: #5d3f3f !important;
  transition: background-color 400ms linear;
}    

.fixed-top.scrolled .nav-link {
  color:#555;
}


.separator {
    display: flex;
    align-items: center;
    text-align: center;

    padding-top: 30px;
    padding-bottom: 40px;
}
.separator::before, .separator::after {
    content: '';
    flex: 1;
    border-bottom: 2px solid #f1f1f1;
}
.separator::before {
    margin-right: .25em;

}
.separator::after {
    margin-left: .25em;

}
		</style>
		{% include 'sections/resources.html'%}

		<script type="text/javascript">
$(function () {
  $(document).scroll(function () {
	  var $nav = $(".fixed-top");
	  $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
	});
});
		</script>
	</head>
<body>
	{% include 'sections/nav.html'%}
	<header> <!--https://startbootstrap.com/snippets/full-slider-->
  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
      <!-- Slide One - Set the background image for this slide in the line below -->
      <div class="carousel-item active" style="background-image: url('https://source.unsplash.com/LAaSoL0LrYs/1920x1080')">
        <div class="carousel-caption d-none d-md-block">
          <h2 class="display-4">First Slide</h2>
          <p class="lead">This is a description for the first slide.</p>
        </div>
      </div>
      <!-- Slide Two - Set the background image for this slide in the line below -->
      <div class="carousel-item" style="background-image: url('https://source.unsplash.com/bF2vsubyHcQ/1920x1080')">
        <div class="carousel-caption d-none d-md-block">
          <h2 class="display-4">Second Slide</h2>
          <p class="lead">This is a description for the second slide.</p>
        </div>
      </div>
      <!-- Slide Three - Set the background image for this slide in the line below -->
      <div class="carousel-item" style="background-image: url('https://source.unsplash.com/szFUQoyvrxM/1920x1080')">
        <div class="carousel-caption d-none d-md-block">
          <h2 class="display-4">Third Slide</h2>
          <p class="lead">This is a description for the third slide.</p>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
  </div>
</header>


<div class="">
  <div class="row">
    <div class="col-12 col-sm-6 col-md-4" style="padding-right: 0; padding-left: 0;">
<!--Zoom effect-->
<div class="view overlay zoom">
    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(131).jpg" class="img-fluid " alt="smaple image">
    <div class="mask flex-center rgba-red-light">
        <p class="white-text">
        	pegje  p0rewtj e0e tyj <br>
        	<button class="btn btn-info">wtgfwrtg</button>
        </p>
    </div>
</div>
    </div>
    <div class="col-12 col-sm-6 col-md-4" style="padding-right: 0; padding-left: 0;">
<!--Zoom effect-->
<div class="view overlay zoom">
    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(131).jpg" class="img-fluid " alt="smaple image">
    <div class="mask flex-center rgba-red-light">
        <p class="white-text">
        	pegje  p0rewtj e0e tyj <br>
        	<button class="btn btn-info">wtgfwrtg</button>
        </p>
    </div>
</div>
    </div>
    <div class="col-12 col-sm-6 col-md-4" style="padding-right: 0; padding-left: 0;">
<!--Zoom effect-->
<div class="view overlay zoom">
    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(131).jpg" class="img-fluid " alt="smaple image">
    <div class="mask flex-center rgba-red-light">
        <p class="white-text">
        	pegje  p0rewtj e0e tyj <br>
        	<button class="btn btn-info">wtgfwrtg</button>
        </p>
    </div>
</div>
    </div>
  </div>

</div> <!--img end-->

<div class="container p-5">
	<div class="text-center">
		<h2 ><b>WELCOME TO OUR SHOP</b></h2>
		<p >blablabla.</p>
		<p>
			<button type="button" class="btn btn-primary">Primary</button>
		</p>
	</div>
</div>
<div style="background-color: #fff; border-top: 5px solid #DC417F; border-bottom: 5px solid #DC417F;">
	<div style="background-color: #DC417F; border-top: 5px solid white; border-bottom: 5px solid white; padding-top: 30px; padding-bottom: 20px;"  class="text-center">
		<h2 class="white-text"><b>HOME DELIVERY</b></h2>
		<p class="white-text">PLAINE WILHEMS ONLY</p>
	</div>
</div>

<div class="container" style="padding-top: 50px;">
	<div class="separator">&nbsp;&nbsp;&nbsp;<b>OUR CATEGORIES</b>&nbsp;&nbsp;&nbsp;</div>

	<div>
		<div class="row">
		
		{%for category in get_categories()%}
			{%if category.name.upper() != 'UNCATEGORISED'%}
			{%set filename_ = ''%}
	        {%if category.resources%}
	          {%set filename_ = category.resources[0].filename%}
	        {%endif%}
	        {%set img_url = url_for('category.category_image', filename=filename_) %}

	        <div class="col-12 col-sm-6 col-md-3">
	        <!-- Card -->
			<div class="card" style="margin-bottom: 10px;">

			  <!-- Card image -->
			  <div style="background-image: url('{{img_url}}'); background-size: cover; height: 150px;">
	        		
	        	</div>

			  <!-- Card content -->
			  <div class="card-body text-center">

			    <!-- Title -->
			    <h4 class="card-title"><a>{{ category.name }}</a></h4>
			    <!-- Text -->
			    {%set sum_ = namespace(items=0) %}
			    {%for subcategory in category.subcategories%}
			    	{%set sum_.items =  sum_.items + len(subcategory.products) %}
			    	
			    {%endfor%}
			    <p class="card-text">{{ sum_.items }} products</p>
			    <!-- Button -->
			    

			  </div>

			</div>
			<!-- Card -->
			</div>
	        {%endif%}
		{%endfor%}

		</div>
	</div>

	<div class="separator">&nbsp;&nbsp;&nbsp;<b>NEW PRODUCTS</b>&nbsp;&nbsp;&nbsp;</div>

	<div class="row">
		{%set target_prds = get_products()[::-1]%}
		{%set target_num=5%}
		{%if len(target_prds) >= 5%}

		{%else%}
			{%set target_num=len(target_prds)%}
		{%endif%}
		{%for i in range(target_num)%}

			{%set product = target_prds[i]%}
			<div class="col-12 col-sm-6 col-md-3">
	        <!-- Card -->
			<div class="card" style="margin-bottom: 10px;">
				{%set filename_ = ''%}
	        {%if product.resources%}
	          {%set filename_ = product.resources[0].filename%}
	        {%endif%}
	        {%set img_url = url_for('resource.product_image', filename=filename_) %}
			  <!-- Card image -->
			  <div style="background-image: url('{{img_url}}'); background-size: cover; height: 150px;">
	        		
	        	</div>

			  <!-- Card content -->
			  <div class="card-body text-center">

			    <!-- Title -->
			    <h4 class="card-title"><a>{{ product.name }}</a></h4>
			    <!-- Text -->
			    
			    <p class="card-text">Rs {{product.selling_price}}</p>
			    <!-- Button -->
			    

			  </div>

			</div>
			<!-- Card -->
			</div>
		{%endfor%}
		
	</div>
</div>



	{% include 'sections/footer.html'%}
</body>
</html>