{% extends 'base.html.twig' %}
{% block body %}
<div class="container-fluid main-holder px-5 bg-light">
<div class="row">
<div class="col-lg-3">
<select class="form-select rounded-pill py-3 px-3 shadow-none border-0 fs-5 bg-transparent fw-bold mb-3" id="">
<option selected>Select a City</option>
{% for c in ecomvariables.cities() %}
<option value="{{ c.id }}">{{ c.name }}</option>
{% endfor %}
</select>
</div>
</div>
</div>
<div class="container-fluid px-5 mt-5">
<div class="row">
<div class="col-lg-12">
<h1 class="fw-bolder">Nick Tahoes <span class="small">/ Men’s Apparel</span></h1>
<h6>Explore Nick Tahoes products</h6>
</div>
</div>
<div class="row pb-4">
{% for k, product in products %}
{% if product.path is not empty %}
<div class="col-lg-3 mt-4"> <a href="{{ path('sajong_ecom_product_details', {'path':product.path })}}">
<div class="card border-0 rounded-5 p-0 overflow-hidden shadow-sm"> <img src="{{ asset(product.image) }}" alt="" class="img-fluid"> </div>
<h6 class="fw-bold mb-3 mt-3">{{ product.title }}</h6>
<h6 class="fw-bold mb-4">$ {{ (product.price/100)|number_format(2) }}</h6>
</a>
</div>
{% endif %}
{% endfor %}
<div class="col-lg-3 mt-4"> <a href="#">
<div class="card border-0 rounded-5 p-0 overflow-hidden shadow-sm"> <img src="img/pdt1.jpg" alt="" class="img-fluid"> </div>
<h6 class="fw-bold mb-3 mt-3">Lorem ipsum</h6>
<h6 class="fw-bold mb-4">$55.00</h6>
</a>
</div>
<div class="col-lg-3 mt-4"> <a href="#0">
<div class="card border-0 rounded-5 p-0 overflow-hidden shadow-sm"> <img src="img/pdt2.jpg" alt="" class="img-fluid"> </div>
<h6 class="fw-bold mb-3 mt-3">Lorem ipsum</h6>
<h6 class="fw-bold mb-4">$55.00</h6>
</a> </div>
<div class="col-lg-3 mt-4"> <a href="#0">
<div class="card border-0 rounded-5 p-0 overflow-hidden shadow-sm"> <img src="img/pdt3.jpg" alt="" class="img-fluid"> </div>
<h6 class="fw-bold mb-3 mt-3">Lorem ipsum</h6>
<h6 class="fw-bold mb-4">$55.00</h6>
</a> </div>
<div class="col-lg-3 mt-4"> <a href="#0">
<div class="card border-0 rounded-5 p-0 overflow-hidden shadow-sm"> <img src="img/pdt4.jpg" alt="" class="img-fluid"> </div>
<h6 class="fw-bold mb-3 mt-3">Lorem ipsum</h6>
<h6 class="fw-bold mb-4">$55.00</h6>
</a> </div>
<div class="col-lg-3 mt-4"> <a href="#0">
<div class="card border-0 rounded-5 p-0 overflow-hidden shadow-sm"> <img src="img/pdt1.jpg" alt="" class="img-fluid"> </div>
<h6 class="fw-bold mb-3 mt-3">Lorem ipsum</h6>
<h6 class="fw-bold mb-4">$55.00</h6>
</a> </div>
<div class="col-lg-3 mt-4"> <a href="#0">
<div class="card border-0 rounded-5 p-0 overflow-hidden shadow-sm"> <img src="img/pdt2.jpg" alt="" class="img-fluid"> </div>
<h6 class="fw-bold mb-3 mt-3">Lorem ipsum</h6>
<h6 class="fw-bold mb-4">$55.00</h6>
</a> </div>
<div class="col-lg-3 mt-4"> <a href="#0">
<div class="card border-0 rounded-5 p-0 overflow-hidden shadow-sm"> <img src="img/pdt3.jpg" alt="" class="img-fluid"> </div>
<h6 class="fw-bold mb-3 mt-3">Lorem ipsum</h6>
<h6 class="fw-bold mb-4">$55.00</h6>
</a> </div>
<div class="col-lg-3 mt-4"> <a href="#0">
<div class="card border-0 rounded-5 p-0 overflow-hidden shadow-sm"> <img src="img/pdt4.jpg" alt="" class="img-fluid"> </div>
<h6 class="fw-bold mb-3 mt-3">Lorem ipsum</h6>
<h6 class="fw-bold mb-4">$55.00</h6>
</a> </div>
<div class="col-lg-3 mt-4"> <a href="#0">
<div class="card border-0 rounded-5 p-0 overflow-hidden shadow-sm"> <img src="img/pdt1.jpg" alt="" class="img-fluid"> </div>
<h6 class="fw-bold mb-3 mt-3">Lorem ipsum</h6>
<h6 class="fw-bold mb-4">$55.00</h6>
</a> </div>
<div class="col-lg-3 mt-4"> <a href="#0">
<div class="card border-0 rounded-5 p-0 overflow-hidden shadow-sm"> <img src="img/pdt2.jpg" alt="" class="img-fluid"> </div>
<h6 class="fw-bold mb-3 mt-3">Lorem ipsum</h6>
<h6 class="fw-bold mb-4">$55.00</h6>
</a> </div>
<div class="col-lg-3 mt-4"> <a href="#0">
<div class="card border-0 rounded-5 p-0 overflow-hidden shadow-sm"> <img src="img/pdt3.jpg" alt="" class="img-fluid"> </div>
<h6 class="fw-bold mb-3 mt-3">Lorem ipsum</h6>
<h6 class="fw-bold mb-4">$55.00</h6>
</a> </div>
<div class="col-lg-3 mt-4"> <a href="#0">
<div class="card border-0 rounded-5 p-0 overflow-hidden shadow-sm"> <img src="img/pdt4.jpg" alt="" class="img-fluid"> </div>
<h6 class="fw-bold mb-3 mt-3">Lorem ipsum</h6>
<h6 class="fw-bold mb-4">$55.00</h6>
</a> </div>
</div>
<div class="row mb-5">
<div class="col-md-12 text-center mb-2"> <button type="button" class="btn bg-secondary text-white px-4 py-3 rounded-pill">Load More</button> </div>
</div>
</div>
{% endblock %}