{% extends 'base.html' %}
{% load static %}
{% block title %}Luxe Beauty | Home{% endblock%}
{% load humanize %}

{% block content %}

{% if messages %}
<div class="container">
    {% for message in messages %}
    <div class="alert alert-dismissible {% if message.tags %}alert-{{ message.tags }}{% endif %}" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
        <p>{{ message }}</p>
    </div>
    {% endfor %}
</div>
{% endif %}

  <!-- banner section start -->
<div class="banner_section layout_padding">
   <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner">
         {% for banner in banners %}
         <div class="carousel-item {% if forloop.first %}active{% endif %}">
            <div class="container">
               <div class="row">
                  <div class="col-sm-6">
                     <h1 class="banner_taital">{{ banner.title }}</h1>
                     <p class="banner_text">{{ banner.description }}</p>
                     <div class="read_bt"><a href="">Shop Now</a></div>
                  </div>
                  <div class="col-sm-6">
                     <div class="banner_img"><img src="{{ banner.image.url }}"></div>
                  </div>
               </div>
            </div>
         </div>
         {% endfor %}
      </div>
   </div>
</div>
<!-- banner section end -->



      <!-- shop by category -->
         <div class="">
             <div class="container">
                 <div class="row">
                     <div class="col-sm-12">
                         <h1 class="product_taital">Shop By Category</h1>
                     </div>
                 </div>
                 <div class="">
                     <div class="row">
                        {% for category in categories %}
                         <div class="col-4 col-sm-6 col-lg-2">
                             <div class="card">
                              <a href="{% url 'category_products' category.id %}">
                                 <img src="{{category.image.url}}" alt="{{category.name}}">
                              </a>
                             </div>
                             <a href="{% url 'category_products' category.id %}">
                             <span class="category-name">{{category.name}}</span>
                           </a>
                         </div>
                         {% endfor %}
                     </div>
                 </div>
             </div>
         </div>
         
      <!-- end category -->

      <!-- product section start -->
      <div class="product_section layout_padding">
         <div class="container">
            <div class="row">
               <div class="col-sm-12">
                  <div class="new-container">
                     <span class="new-arrival">New Arrival</span>
                     <a href="#" class="pill-button">View All</a>
                 </div>
               </div>
            </div>
            <div class="product_section_2 layout_padding">
               <div class="row">
                  {% for product in newproducts %}
                  <div class="col-lg-3 col-sm-6 col-6">
                     <div class="product_box">
                        <!-- <div class="img_container"> -->
   
                           <a href="{% url 'product_detail' product.id %}">       <img src="{{ product.image.url}}" class="image_1"></a>
                           <div class="cart d-lg-none">
                              <div class="add-to-cart-btn">
                                  <form action="{% url 'add_to_cart' product.id %}" method="post">
                                      {% csrf_token %}
                                      <button data-product-id="{{ product.id }}" type="submit" id="add" class=" custom-toast success-toast" style="background-color: white;">
                                          <i class="fa fa-shopping-cart"></i>
                                      </button>
                                  </form>
                              </div>
                              <i class="fa fa-heart eye-icon" data-product-id="{{ product.id }}"></i>
                          </div>
                        <!-- </div> -->
                        <a href="{% url 'product_detail' product.id %}">   <p class="bursh_text">{{product.product_name}}</p></a>
                         <p class="price_text">UGX {{product.price|intcomma}}</p>
                         <div class="d-none d-md-block">
                           <div class="btn_main">
                              <div class="buy_bt  d-md-block">
                                 <ul>
                                
                                    <div class="add-to-cart-btn">

                                       <form action="{% url 'add_to_cart' product.id %}" method="post">
                                           {% csrf_token %}
                                           <button data-product-id="{{ product.id }}" type="submit" id="add"
                                               class=" custom-toast   success-toast" >ADD TO CART</button>
           
                                       </form>
                                    </div> 
                                                                 
                                    <li><a href="#">Buy Now</a></li>
                                 </ul>
                              </div>
                              
                           </div>
                         </div>
                         
                     </div>
                 </div>
                 {% endfor %}
               </div>
            </div>
         </div>
      </div>
      <!-- product section end -->
      <div class="feature-image">
         <a href="https://example.com">
             <img src="{% static 'images/01.jpg' %}" alt="Feature Image">
         </a>
     </div>


           <!-- hotkit section start -->
           <div class="product_section layout_padding">
            <div class="container">
               <div class="row">
                  <div class="col-sm-12">
                     <div class="new-container">
                        <span class="new-arrival">Hot Kit</span>
                        <a href="#" class="pill-button">View All</a>
                    </div>
                  </div>
               </div>
               <div class="product_section_2 layout_padding">
                  <div class="row">
                     {% for product in hotkit %}
                     <div class="col-lg-3 col-sm-6 col-6">
                        <div class="product_box">
                           <!-- <div class="img_container"> -->
      
                              <a href="{% url 'product_detail' product.id %}">       <img src="{{ product.image.url}}" class="image_1"></a>
                              <div class="cart d-lg-none">
                                 <div class="add-to-cart-btn">
                                     <form action="{% url 'add_to_cart' product.id %}" method="post">
                                         {% csrf_token %}
                                         <button data-product-id="{{ product.id }}" type="submit" id="add" class=" custom-toast success-toast" style="background-color: white;">
                                             <i class="fa fa-shopping-cart"></i>
                                         </button>
                                     </form>
                                 </div>
                                 <i class="fa fa-heart eye-icon" data-product-id="{{ product.id }}"></i>
                             </div>
                           <!-- </div> -->
                           <a href="{% url 'product_detail' product.id %}">   <p class="bursh_text">{{product.product_name}}</p></a>
                            <p class="price_text">UGX {{product.price|intcomma}}</p>
                            <div class="d-none d-md-block">
                              <div class="btn_main">
                                 <div class="buy_bt  d-md-block">
                                    <ul>
                                   
                                       <div class="add-to-cart-btn">
   
                                          <form action="{% url 'add_to_cart' product.id %}" method="post">
                                              {% csrf_token %}
                                              <button data-product-id="{{ product.id }}" type="submit" id="add"
                                                  class=" custom-toast   success-toast" >ADD TO CART</button>
              
                                          </form>
                                       </div> 
                                                                    
                                       <li><a href="#">Buy Now</a></li>
                                    </ul>
                                 </div>
                                 
                              </div>
                            </div>
                            
                        </div>
                    </div>
                    {% endfor %}
                  </div>
               </div>
            </div>
         </div>
         <!-- hotsell section end -->

                    <!-- bestsellers section start -->
                    <div class="product_section layout_padding">
                     <div class="container">
                        <div class="row">
                           <div class="col-sm-12">
                              <div class="new-container">
                                 <span class="new-arrival">Best Sellers</span>
                                 <a href="#" class="pill-button">View All</a>
                             </div>
                           </div>
                        </div>
                        <div class="product_section_2 layout_padding">
                           <div class="row">
                              {% for product in sellers %}
                              <div class="col-lg-3 col-sm-6 col-6">
                                 <div class="product_box">
                                    <!-- <div class="img_container"> -->
               
                                       <a href="{% url 'product_detail' product.id %}">       <img src="{{ product.image.url}}" class="image_1"></a>
                                       <div class="cart d-lg-none">
                                          <div class="add-to-cart-btn">
                                              <form action="{% url 'add_to_cart' product.id %}" method="post">
                                                  {% csrf_token %}
                                                  <button data-product-id="{{ product.id }}" type="submit" id="add" class=" custom-toast success-toast" style="background-color: white;">
                                                      <i class="fa fa-shopping-cart"></i>
                                                  </button>
                                              </form>
                                          </div>
                                          <i class="fa fa-heart eye-icon" data-product-id="{{ product.id }}"></i>
                                      </div>
                                    <!-- </div> -->
                                    <a href="{% url 'product_detail' product.id %}">   <p class="bursh_text">{{product.product_name}}</p></a>
                                     <p class="price_text">UGX {{product.price|intcomma}}</p>
                                     <div class="d-none d-md-block">
                                       <div class="btn_main">
                                          <div class="buy_bt  d-md-block">
                                             <ul>
                                            
                                                <div class="add-to-cart-btn">
            
                                                   <form action="{% url 'add_to_cart' product.id %}" method="post">
                                                       {% csrf_token %}
                                                       <button data-product-id="{{ product.id }}" type="submit" id="add"
                                                           class=" custom-toast   success-toast" >ADD TO CART</button>
                       
                                                   </form>
                                                </div> 
                                                                             
                                                <li><a href="#">Buy Now</a></li>
                                             </ul>
                                          </div>
                                          
                                       </div>
                                     </div>
                                     
                                 </div>
                             </div>
                             {% endfor %}
                           </div>
                        </div>
                     </div>
                  </div>
                  <!-- bestsellers section end -->
                  <div class="feature-image">
                     <a href="https://example.com">
                         <img src="{% static 'images/02.png' %}" alt="Feature Image">
                     </a>
                 </div> 

                  <!-- bestliquid section start -->
           <div class="product_section layout_padding">
            <div class="container">
               <div class="row">
                  <div class="col-sm-12">
                     <div class="new-container">
                        <span class="new-arrival">Best Liquid/Glue</span>
                        <a href="#" class="pill-button">View All</a>
                    </div>
                  </div>
               </div>
               <div class="product_section_2 layout_padding">
                  <div class="row">
                     {% for product in bestliquid %}
                     <div class="col-lg-3 col-sm-6 col-6">
                        <div class="product_box">
                           <!-- <div class="img_container"> -->
      
                              <a href="{% url 'product_detail' product.id %}">       <img src="{{ product.image.url}}" class="image_1"></a>
                              <div class="cart d-lg-none">
                                 <div class="add-to-cart-btn">
                                     <form action="{% url 'add_to_cart' product.id %}" method="post">
                                         {% csrf_token %}
                                         <button data-product-id="{{ product.id }}" type="submit" id="add" class=" custom-toast success-toast" style="background-color: white;">
                                             <i class="fa fa-shopping-cart"></i>
                                         </button>
                                     </form>
                                 </div>
                                 <i class="fa fa-heart eye-icon" data-product-id="{{ product.id }}"></i>
                             </div>
                           <!-- </div> -->
                           <a href="{% url 'product_detail' product.id %}">   <p class="bursh_text">{{product.product_name}}</p></a>
                            <p class="price_text">UGX {{product.price|intcomma}}</p>
                            <div class="d-none d-md-block">
                              <div class="btn_main">
                                 <div class="buy_bt  d-md-block">
                                    <ul>
                                   
                                       <div class="add-to-cart-btn">
   
                                          <form action="{% url 'add_to_cart' product.id %}" method="post">
                                              {% csrf_token %}
                                              <button data-product-id="{{ product.id }}" type="submit" id="add"
                                                  class=" custom-toast   success-toast" >ADD TO CART</button>
              
                                          </form>
                                       </div> 
                                                                    
                                       <li><a href="#">Buy Now</a></li>
                                    </ul>
                                 </div>
                                 
                              </div>
                            </div>
                            
                        </div>
                    </div>
                    {% endfor %}
                  </div>
               </div>
            </div>
         </div>
         <!-- bestliquid section end -->
         <div class="feature-image">
            <a href="https://example.com">
                <img src="{% static 'images/03.png' %}" alt="Feature Image">
            </a>
        </div> 
        <!-- bestliquid section start -->
        <div class="product_section layout_padding">
         <div class="container">
            <div class="row">
               <div class="col-sm-12">
                  <div class="new-container">
                     <span class="new-arrival">Hot -Selling Tool</span>
                     <a href="#" class="pill-button">View All</a>
                 </div>
               </div>
            </div>
            <div class="product_section_2 layout_padding">
               <div class="row">
                  {% for product in hotsellingtool %}
                  <div class="col-lg-3 col-sm-6 col-6">
                     <div class="product_box">
                        <!-- <div class="img_container"> -->
   
                           <a href="{% url 'product_detail' product.id %}">       <img src="{{ product.image.url}}" class="image_1"></a>
                           <div class="cart d-lg-none">
                              <div class="add-to-cart-btn">
                                  <form action="{% url 'add_to_cart' product.id %}" method="post">
                                      {% csrf_token %}
                                      <button data-product-id="{{ product.id }}" type="submit" id="add" class=" custom-toast success-toast" style="background-color: white;">
                                          <i class="fa fa-shopping-cart"></i>
                                      </button>
                                  </form>
                              </div>
                              <i class="fa fa-heart eye-icon" data-product-id="{{ product.id }}"></i>
                          </div>
                        <!-- </div> -->
                        <a href="{% url 'product_detail' product.id %}">   <p class="bursh_text">{{product.product_name}}</p></a>
                         <p class="price_text">UGX {{product.price|intcomma}}</p>
                         <div class="d-none d-md-block">
                           <div class="btn_main">
                              <div class="buy_bt  d-md-block">
                                 <ul>
                                
                                    <div class="add-to-cart-btn">

                                       <form action="{% url 'add_to_cart' product.id %}" method="post">
                                           {% csrf_token %}
                                           <button data-product-id="{{ product.id }}" type="submit" id="add"
                                               class=" custom-toast   success-toast" >ADD TO CART</button>
           
                                       </form>
                                    </div> 
                                                                 
                                    <li><a href="#">Buy Now</a></li>
                                 </ul>
                              </div>
                              
                           </div>
                         </div>
                         
                     </div>
                 </div>
                 {% endfor %}
               </div>
            </div>
         </div>
      </div>
      <!-- bestliquid section end -->
      <!-- about section start -->
      <div class="about_section layout_padding">
         <div class="container">
            <div class="about_section_main">
               <div class="row">
                  <div class="col-md-6">
                     <div class="about_taital_main">
                        <h1 class="about_taital">About Luxe Beauty </h1>
                        <p class="about_text">Founded in 2010, Luxe Beauty began as a small venture driven by a passion for enhancing natural beauty. Over the years, we have grown into a prominent company in the beauty industry, committed to delivering exceptional products and services to our valued customers.

                           At Luxe Beauty, we believe in the transformative power of quality cosmetics. Our journey from a modest startup to a leading beauty brand has been fueled by our dedication to innovation, excellence, and customer satisfaction. We take pride in offering a wide range of high-quality beauty products that cater to diverse needs and preferences.
                           
                           Our mission is to empower individuals to look and feel their best. We are proud to have built a reputation for reliability, and our products are trusted by beauty enthusiasts and professionals alike. Luxe Beauty continues to expand, reaching new heights and setting trends in the beauty world.
                           
                           Thank you for being part of our journey. We look forward to continuing to serve you with the finest in beauty.</p>
                        <!-- <div class="readmore_bt"><a href="#">Read More</a></div> -->
                     </div>
                  </div>
                  <div class="col-md-6">
                     <div><img src="{% static 'images/about-img.png' %}" class="image_3"></div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!-- about section end -->
      <!-- customer section start -->
      <!-- <div class="customer_section layout_padding">
         <div class="container">
            <div class="row">
               <div class="col-sm-12">
                  <h1 class="customer_taital">What says customers</h1>
               </div>
            </div>
            <div id="main_slider" class="carousel slide" data-ride="carousel">
               <div class="carousel-inner">
                  <div class="carousel-item active">
                     <div class="client_section_2">
                        <div class="client_main">
                           <div class="client_left">
                              <div class="client_img"><img src="{% static 'images/client-img.png' %}"></div>
                           </div>
                           <div class="client_right">
                              <h3 class="name_text">Jonyro</h3>
                              <p class="dolor_text">consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation  eu </p>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="carousel-item">
                     <div class="client_section_2">
                        <div class="client_main">
                           <div class="client_left">
                              <div class="client_img"><img src="{% static 'images/client-img.png' %}"></div>
                           </div>
                           <div class="client_right">
                              <h3 class="name_text">Jonyro</h3>
                              <p class="dolor_text">consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation  eu </p>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="carousel-item">
                     <div class="client_section_2">
                        <div class="client_main">
                           <div class="client_left">
                              <div class="client_img"><img src="{% static 'images/client-img.png' %}"></div>
                           </div>
                           <div class="client_right">
                              <h3 class="name_text">Jonyro</h3>
                              <p class="dolor_text">consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation  eu </p>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
               <a class="carousel-control-prev" href="#main_slider" role="button" data-slide="prev">
               <i class="fa fa-angle-left"></i>
               </a>
               <a class="carousel-control-next" href="#main_slider" role="button" data-slide="next">
               <i class="fa fa-angle-right"></i>
               </a>
            </div>
         </div>
      </div> -->
      <!-- customer section end -->
      <!-- contact section start -->
      <!-- <div class="contact_section layout_padding">
         <div class="container">
            <div class="row">
               <div class="col-md-6">
                  <h1 class="contact_taital">Get In Touch</h1>
                  <p class="contact_text">Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation  eu </p>
               </div>
               <div class="col-md-6">
                  <div class="contact_main">
                     <div class="contact_bt"><a href="#">Contact Form</a></div>
                     <div class="newletter_bt"><a href="#">Newletter</a></div>
                  </div>
               </div>
            </div>
         </div>
         <div class="map_main">
            <div class="map-responsive">
               <iframe src="https://www.google.com/maps/embed/v1/place?key=AIzaSyA0s1a7phLN0iaD6-UE7m4qP-z21pH0eSc&amp;q=Eiffel+Tower+Paris+France" width="600" height="400" frameborder="0" style="border:0; width: 100%;" allowfullscreen=""></iframe>
            </div>
         </div>
      </div> -->
      <!-- contact section end -->
      <!-- footer section start -->
      <div class="footer_section layout_padding">
         <div class="container">
            <div class="footer_logo"><a href="index.html"><img src="{% static 'images/main-footer-logo.svg' %}" style="width: 300px;"></a></div>
            <div class="contact_section_2">
               <div class="row">
                  <div class="col-sm-4">
                     <h3 class="address_text">Contact Us</h3>
                     <div class="address_bt">
                        <ul>
                           <li>
                              <a href="#">
                              <i class="fa fa-map-marker" aria-hidden="true"></i><span class="padding_left10">Address : Kampala Uganda</span>
                              </a>
                           </li>
                           <li>
                              <a href="#">
                              <i class="fa fa-phone" aria-hidden="true"></i><span class="padding_left10">Call : +256 789 401 436</span>
                              </a>
                           </li>
                           <li>
                              <a href="#">
                              <i class="fa fa-envelope" aria-hidden="true"></i><span class="padding_left10">Email : bionluxe@gmail.com</span>
                              </a>
                           </li>
                        </ul>
                     </div>
                  </div>
                  <div class="col-sm-4">
                     <div class="footer_logo_1"><a href="index.html"><img src="{% static 'images/main-footer-logo.svg' %}" style="width: 300px;"></a></div>
                     <p class="dummy_text">Transform your beauty routine with Luxe and embrace the elegance that comes with using our exquisite Beauty Kit. Treat yourself to the ultimate beauty experience and let your natural beauty shine through. Try it today and feel the Luxe difference!</p>
                  </div>
                  <div class="col-sm-4">
                     <div class="main">
                        <h3 class="address_text">Best Products</h3>
                        <p class="ipsum_text">At Luxe Beauty, we believe in the transformative power of quality cosmetics.</p>
                     </div>
                  </div>
               </div>
            </div>
            <div class="social_icon">
               <ul>
                  <li>
                     <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
                  </li>
                  <li>
                     <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
                  </li>
                  <li>
                     <a href="#"><i class="fa fa-tiktok" aria-hidden="true"></i></a>
                  </li>
                  <li>
                     <a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
                  </li>
               </ul>
            </div>
         </div>
      </div>
{% endblock %}