{% extends 'site/base.html' %}
{% load static %}
{% load main_filters %}
{% block title %}

{% endblock title %}


{% block css %}

{% endblock css %}


{% block content %}

<div class="modal fade" id="product-view">
  <div class="modal-dialog">
    <div class="modal-content">
      <button class="modal-close icofont-close" data-bs-dismiss="modal"></button>
      <div class="product-view">
        <div class="row">
          <div class="col-md-6 col-lg-6">
            <div class="view-gallery">
              <div class="view-label-group">
                <label class="view-label new">new</label><label class="view-label off">-10%</label>
              </div>
              <ul class="preview-slider slider-arrow">
                <li><img src="{% static 'images/product/01.jpg' %}" alt="product" /></li>
                <li><img src="{% static 'images/product/01.jpg' %}" alt="product" /></li>
                <li><img src="{% static 'images/product/01.jpg' %}" alt="product" /></li>
                <li><img src="{% static 'images/product/01.jpg' %}" alt="product" /></li>
                <li><img src="{% static 'images/product/01.jpg' %}" alt="product" /></li>
                <li><img src="{% static 'images/product/01.jpg' %}" alt="product" /></li>
                <li><img src="{% static 'images/product/01.jpg' %}" alt="product" /></li>
              </ul>
              <ul class="thumb-slider">
                <li><img src="{% static 'images/product/01.jpg' %}" alt="product" /></li>
                <li><img src="{% static 'images/product/01.jpg' %}" alt="product" /></li>
                <li><img src="{% static 'images/product/01.jpg' %}" alt="product" /></li>
                <li><img src="{% static 'images/product/01.jpg' %}" alt="product" /></li>
                <li><img src="{% static 'images/product/01.jpg' %}" alt="product" /></li>
                <li><img src="{% static 'images/product/01.jpg' %}" alt="product" /></li>
                <li><img src="{% static 'images/product/01.jpg' %}" alt="product" /></li>
              </ul>
            </div>
          </div>
          
        </div>
      </div>
    </div>
  </div>
</div>


<section class="banner-part">
  <div class="container">
    <div class="row">
      <div class="col-lg-3">
        <div class="banner-category">
          <div class="banner-category-head">
            <i class="fas fa-bars"></i><span>top categories</span>
          </div>
          <ul class="banner-category-list">
            {% for category in categories %}
            <li class="banner-category-item">
              <a href="{% url 'category-detail' category.id %}"><i class="flaticon-dairy-products"></i><span>{{ category.name }}</span></a>
              <div class="banner-category-dropdown">
                <div class="banner-sub-category">
                  <ul>
                    
                    {%  if not category.children.all %}
                    <li><a href="{% url 'category-detail' category.id %}">{{ category.name }}</a></li>
                    {% else %}
                    <li><a href="{% url 'category-detail' category.id %}">{{ category.name }}</a></li>
                    {% endif %}
                  </ul>
                </div>
              </div>
            </li>
          {% endfor %}

            
          </ul>
        </div>
      </div>
      <div class="col-lg-9">
        <div class="row">
          <div class="col-lg-12">
            <div class="home-grid-slider slider-dots">
              <div class="banner-wrap bg1">
                <div class="row align-items-center">
                  <div class="col-md-6 col-lg-6">
                    <div class="banner-content">
                      <h2>
                        we are delivered organic foods item within 24 hours.
                      </h2>
                      <a href="#" class="btn btn-inline"><i class="fas fa-shopping-basket"></i><span>shop now</span></a>
                    </div>
                  </div>
                  <div class="col-md-6 col-lg-6">
                    <div class="banner-image">
                      <img src="{% static 'images/home/index/01.png' %}" alt="" />
                    </div>
                  </div>
                </div>
              </div>
              <div class="banner-wrap bg2">
                <div class="row align-items-center">
                  <div class="col-md-6 col-lg-6">
                    <div class="banner-content">
                      <h2>
                        get your organic healthy foods item online today.
                      </h2>
                      <a href="#" class="btn btn-inline"><i class="fas fa-shopping-basket"></i><span>shop now</span></a>
                    </div>
                  </div>
                  <div class="col-md-6 col-lg-6">
                    <div class="banner-image">
                      <img src="{% static 'images/home/index/02.png' %}" alt="" />
                    </div>
                  </div>
                </div>
              </div>
              <div class="banner-wrap bg3">
                <div class="row align-items-center">
                  <div class="col-md-6 col-lg-6">
                    <div class="banner-content">
                      <h2>
                        we are delivered organic foods item within 24 hours.
                      </h2>
                      <a href="#" class="btn btn-inline"><i class="fas fa-shopping-basket"></i><span>shop now</span></a>
                    </div>
                  </div>
                  <div class="col-md-6 col-lg-6">
                    <div class="banner-image">
                      <img src="{% static 'images/home/index/03.png' %}" alt="" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-6 col-lg-6">
            <div class="banner-promo">
              <a href="#"><img src="{% static 'images/promo/home/04.jpg' %}" alt="promo" /></a>
            </div>
          </div>
          <div class="col-md-6 col-lg-6">
            <div class="banner-promo">
              <a href="#"><img src="{% static 'images/promo/home/05.jpg' %}" alt="promo" /></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


<section class="section intro-part">
  <div class="container">
    <div class="row intro-content">
      <div class="col-sm-6 col-lg-3">
        <div class="intro-wrap">
          <div class="intro-icon"><i class="fas fa-truck"></i></div>
          <div class="intro-content">
            <h5>free home delivery</h5>
            <p>Lorem ipsum dolor sit amet adipisicing elit nobis.</p>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-lg-3">
        <div class="intro-wrap">
          <div class="intro-icon"><i class="fas fa-sync-alt"></i></div>
          <div class="intro-content">
            <h5>instant return policy</h5>
            <p>Lorem ipsum dolor sit amet adipisicing elit nobis.</p>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-lg-3">
        <div class="intro-wrap">
          <div class="intro-icon"><i class="fas fa-headset"></i></div>
          <div class="intro-content">
            <h5>quick support system</h5>
            <p>Lorem ipsum dolor sit amet adipisicing elit nobis.</p>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-lg-3">
        <div class="intro-wrap">
          <div class="intro-icon"><i class="fas fa-lock"></i></div>
          <div class="intro-content">
            <h5>secure payment way</h5>
            <p>Lorem ipsum dolor sit amet adipisicing elit nobis.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


<section class="section deals-part">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="section-heading">
          <h2>best deals on items</h2>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12">
        <div class="countdown deals-clock" data-countdown="2022/12/22">
          <span class="countdown-time"><span>00</span><small>days</small></span><span
            class="countdown-time"><span>00</span><small>hours</small></span><span
            class="countdown-time"><span>00</span><small>minutes</small></span><span
            class="countdown-time"><span>00</span><small>seconds</small></span>
        </div>
      </div>
    </div>
    <div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-4">
      
      {% for product in products %}
            <div class="col product-item">
              <div class="product-card">
                <div class="product-media">
                  {% if product.remark %}
                  <div class="product-label"><label class="label-text {{ product.remark }}">{{ product.remark }}</label>
                  </div>
                  {% endif %}
                  <button class="product-wish wish"><i class="fas fa-heart"></i></button>
                  <a class="product-image "   href="{% url 'product_details' product.id %}"><img src="{{ product.image.url }}" alt="{{ product.title }}"></a>

                </div>
                <div class="product-content" x-data="productAddComponent" >
                  <div class="product-rating">
                    {% with product.rating|get_rating_stars as data_dict %}
                    <div class="product-rating">
                      {% for _ in data_dict.full_stars %}
                      <i class="active icofont-star"></i>
                      {% endfor %}
                      {% if data_dict.half_stars %}
                      <i class="active icofont-star"></i>
                      {% endif %}
                      {% for _ in data_dict.empty_stars %}
                      <i class="icofont-star"></i>
                      {% endfor %}
                      {% if product.rating|floatformat %}
                      <a href="#">{{ product.rating }}</a>
                      {% endif %}
                    </div>
                    {% endwith %}
                  </div>

                  <h6 class="product-name" style="height: 52px; overflow: hidden;"><a href="#">{{ product.title }}</a></h6>
                  <h6 class="product-price">
                    {% if product.discount %}
                    <del>{{ product.previous_price }}</del>
                    <span>{{ product.price }}</span>
                    {% else %}
                    <span>{{ product.price }}</span>
                    {% endif %}
                  </h6>
                  <button class="product-add" 
                  data-product-img="{{ product.image.url }}"
                  data-product-id="{{ product.id }}" 
                  data-product-price="{{ product.price }}" 
                  data-product-points="{{ product.points }}" 
                  data-product-title="{{ product.title }}"
                  @click="addToCart($event)" 

                  title="Add to Cart">
                    <i class="fas fa-shopping-basket"></i><span>add</span>
                  </button>

                  <a class="product-add mt-1"  href="{% url 'checkout_buy_now' product.id %}">
                  
                    <i class="fas fa-shopping-bag me-3"></i><span>BUY NOW</span>
                </a>

                </div>
              </div>
            </div>
            {% endfor %}

        

     
    </div>
    <div class="row">
      <div class="col-lg-12">
        <div class="section-btn-25">
          <a href="{% url 'shop' %}" class="btn btn-inline"><i class="fas fa-eye"></i><span>view all deals</span></a>
        </div>
      </div>
    </div>
  </div>
</section>


<!-- <section class="section feature-part">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="section-heading">
          <h2>our featured items</h2>
        </div>
      </div>
    </div>
    <div class="row row-cols-1 row-cols-md-1 row-cols-lg-2 row-cols-xl-2">
      <div class="col">
        <div class="feature-card">
          <div class="feature-media">
            <div class="feature-label">
              <label class="label-text feat">feature</label>
            </div>
            <button class="feature-wish wish">
              <i class="fas fa-heart"></i></button><a class="feature-image" href="product-video.html"><img
                src="{% static 'images/product/09.jpg' %}" alt="product" /></a>
            <div class="feature-widget">
              <a title="Product Compare" href="compare.html" class="fas fa-random"></a><a title="Product Video"
                href="https://youtu.be/9xzcVxSBbG8" class="venobox fas fa-play" data-autoplay="true"
                data-vbtype="video"></a><a title="Product View" href="#" class="fas fa-eye" data-bs-toggle="modal"
                data-bs-target="#product-view"></a>
            </div>
          </div>
          <div class="feature-content">
            <h6 class="feature-name">
              <a href="product-video.html">fresh organic green chilis</a>
            </h6>
            <div class="feature-rating">
              <i class="active icofont-star"></i><i class="active icofont-star"></i><i
                class="active icofont-star"></i><i class="active icofont-star"></i><i class="icofont-star"></i><a
                href="product-video.html">(3 Reviews)</a>
            </div>
            <h6 class="feature-price">
              <span>$28</span>
            </h6>
            <p class="feature-desc">
              Lorem ipsum dolor sit consectetur adipisicing xpedita dicta
              amet olor ut eveniet commodi...
            </p>
            <button class="product-add" title="Add to Cart">
              <i class="fas fa-shopping-basket"></i><span>add</span>
            </button>
            <div class="product-action">
              <button class="action-minus" title="Quantity Minus">
                <i class="icofont-minus"></i></button><input class="action-input" title="Quantity Number" type="text"
                name="quantity" value="1" /><button class="action-plus" title="Quantity Plus">
                <i class="icofont-plus"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="feature-card">
          <div class="feature-media">
            <div class="feature-label">
              <label class="label-text feat">feature</label>
            </div>
            <button class="feature-wish wish">
              <i class="fas fa-heart"></i></button><a class="feature-image" href="product-video.html"><img
                src="{% static 'images/product/10.jpg' %}" alt="product" /></a>
            <div class="feature-widget">
              <a title="Product Compare" href="compare.html" class="fas fa-random"></a><a title="Product Video"
                href="https://youtu.be/9xzcVxSBbG8" class="venobox fas fa-play" data-autoplay="true"
                data-vbtype="video"></a><a title="Product View" href="#" class="fas fa-eye" data-bs-toggle="modal"
                data-bs-target="#product-view"></a>
            </div>
          </div>
          <div class="feature-content">
            <h6 class="feature-name">
              <a href="product-video.html">fresh organic green chilis</a>
            </h6>
            <div class="feature-rating">
              <i class="active icofont-star"></i><i class="active icofont-star"></i><i
                class="active icofont-star"></i><i class="active icofont-star"></i><i class="icofont-star"></i><a
                href="product-video.html">(3 Reviews)</a>
            </div>
            <h6 class="feature-price">
              <span>$28</span>
            </h6>
            <p class="feature-desc">
              Lorem ipsum dolor sit consectetur adipisicing xpedita dicta
              amet olor ut eveniet commodi...
            </p>
            <button class="product-add" title="Add to Cart">
              <i class="fas fa-shopping-basket"></i><span>add</span>
            </button>
            <div class="product-action">
              <button class="action-minus" title="Quantity Minus">
                <i class="icofont-minus"></i></button><input class="action-input" title="Quantity Number" type="text"
                name="quantity" value="1" /><button class="action-plus" title="Quantity Plus">
                <i class="icofont-plus"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="feature-card">
          <div class="feature-media">
            <div class="feature-label">
              <label class="label-text feat">feature</label>
            </div>
            <button class="feature-wish wish">
              <i class="fas fa-heart"></i></button><a class="feature-image" href="product-video.html"><img
                src="{% static 'images/product/11.jpg' %}" alt="product" /></a>
            <div class="feature-widget">
              <a title="Product Compare" href="compare.html" class="fas fa-random"></a><a title="Product Video"
                href="https://youtu.be/9xzcVxSBbG8" class="venobox fas fa-play" data-autoplay="true"
                data-vbtype="video"></a><a title="Product View" href="#" class="fas fa-eye" data-bs-toggle="modal"
                data-bs-target="#product-view"></a>
            </div>
          </div>
          <div class="feature-content">
            <h6 class="feature-name">
              <a href="product-video.html">fresh organic green chilis</a>
            </h6>
            <div class="feature-rating">
              <i class="active icofont-star"></i><i class="active icofont-star"></i><i
                class="active icofont-star"></i><i class="active icofont-star"></i><i class="icofont-star"></i><a
                href="product-video.html">(3 Reviews)</a>
            </div>
            <h6 class="feature-price">
              <span>$28</span>
            </h6>
            <p class="feature-desc">
              Lorem ipsum dolor sit consectetur adipisicing xpedita dicta
              amet olor ut eveniet commodi...
            </p>
            <button class="product-add" title="Add to Cart">
              <i class="fas fa-shopping-basket"></i><span>add</span>
            </button>
            <div class="product-action">
              <button class="action-minus" title="Quantity Minus">
                <i class="icofont-minus"></i></button><input class="action-input" title="Quantity Number" type="text"
                name="quantity" value="1" /><button class="action-plus" title="Quantity Plus">
                <i class="icofont-plus"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="feature-card">
          <div class="feature-media">
            <div class="feature-label">
              <label class="label-text feat">feature</label>
            </div>
            <button class="feature-wish wish">
              <i class="fas fa-heart"></i></button><a class="feature-image" href="product-video.html"><img
                src="{% static 'images/product/12.jpg' %}" alt="product" /></a>
            <div class="feature-widget">
              <a title="Product Compare" href="compare.html" class="fas fa-random"></a><a title="Product Video"
                href="https://youtu.be/9xzcVxSBbG8" class="venobox fas fa-play" data-autoplay="true"
                data-vbtype="video"></a><a title="Product View" href="#" class="fas fa-eye" data-bs-toggle="modal"
                data-bs-target="#product-view"></a>
            </div>
          </div>
          <div class="feature-content">
            <h6 class="feature-name">
              <a href="product-video.html">fresh organic green chilis</a>
            </h6>
            <div class="feature-rating">
              <i class="active icofont-star"></i><i class="active icofont-star"></i><i
                class="active icofont-star"></i><i class="active icofont-star"></i><i class="icofont-star"></i><a
                href="product-video.html">(3 Reviews)</a>
            </div>
            <h6 class="feature-price">
              <span>$28</span>
            </h6>
            <p class="feature-desc">
              Lorem ipsum dolor sit consectetur adipisicing xpedita dicta
              amet olor ut eveniet commodi...
            </p>
            <button class="product-add" title="Add to Cart">
              <i class="fas fa-shopping-basket"></i><span>add</span>
            </button>
            <div class="product-action">
              <button class="action-minus" title="Quantity Minus">
                <i class="icofont-minus"></i></button><input class="action-input" title="Quantity Number" type="text"
                name="quantity" value="1" /><button class="action-plus" title="Quantity Plus">
                <i class="icofont-plus"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="feature-card">
          <div class="feature-media">
            <div class="feature-label">
              <label class="label-text feat">feature</label>
            </div>
            <button class="feature-wish wish">
              <i class="fas fa-heart"></i></button><a class="feature-image" href="product-video.html"><img
                src="{% static 'images/product/13.jpg' %}" alt="product" /></a>
            <div class="feature-widget">
              <a title="Product Compare" href="compare.html" class="fas fa-random"></a><a title="Product Video"
                href="https://youtu.be/9xzcVxSBbG8" class="venobox fas fa-play" data-autoplay="true"
                data-vbtype="video"></a><a title="Product View" href="#" class="fas fa-eye" data-bs-toggle="modal"
                data-bs-target="#product-view"></a>
            </div>
          </div>
          <div class="feature-content">
            <h6 class="feature-name">
              <a href="product-video.html">fresh organic green chilis</a>
            </h6>
            <div class="feature-rating">
              <i class="active icofont-star"></i><i class="active icofont-star"></i><i
                class="active icofont-star"></i><i class="active icofont-star"></i><i class="icofont-star"></i><a
                href="product-video.html">(3 Reviews)</a>
            </div>
            <h6 class="feature-price">
              <span>$28</span>
            </h6>
            <p class="feature-desc">
              Lorem ipsum dolor sit consectetur adipisicing xpedita dicta
              amet olor ut eveniet commodi...
            </p>
            <button class="product-add" title="Add to Cart">
              <i class="fas fa-shopping-basket"></i><span>add</span>
            </button>
            <div class="product-action">
              <button class="action-minus" title="Quantity Minus">
                <i class="icofont-minus"></i></button><input class="action-input" title="Quantity Number" type="text"
                name="quantity" value="1" /><button class="action-plus" title="Quantity Plus">
                <i class="icofont-plus"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="feature-card">
          <div class="feature-media">
            <div class="feature-label">
              <label class="label-text feat">feature</label>
            </div>
            <button class="feature-wish wish">
              <i class="fas fa-heart"></i></button><a class="feature-image" href="product-video.html"><img
                src="{% static 'images/product/14.jpg' %}" alt="product" /></a>
            <div class="feature-widget">
              <a title="Product Compare" href="compare.html" class="fas fa-random"></a><a title="Product Video"
                href="https://youtu.be/9xzcVxSBbG8" class="venobox fas fa-play" data-autoplay="true"
                data-vbtype="video"></a><a title="Product View" href="#" class="fas fa-eye" data-bs-toggle="modal"
                data-bs-target="#product-view"></a>
            </div>
          </div>
          <div class="feature-content">
            <h6 class="feature-name">
              <a href="product-video.html">fresh organic green chilis</a>
            </h6>
            <div class="feature-rating">
              <i class="active icofont-star"></i><i class="active icofont-star"></i><i
                class="active icofont-star"></i><i class="active icofont-star"></i><i class="icofont-star"></i><a
                href="product-video.html">(3 Reviews)</a>
            </div>
            <h6 class="feature-price">
              <span>$28</span>
            </h6>
            <p class="feature-desc">
              Lorem ipsum dolor sit consectetur adipisicing xpedita dicta
              amet olor ut eveniet commodi...
            </p>
            <button class="product-add" title="Add to Cart">
              <i class="fas fa-shopping-basket"></i><span>add</span>
            </button>
            <div class="product-action">
              <button class="action-minus" title="Quantity Minus">
                <i class="icofont-minus"></i></button><input class="action-input" title="Quantity Number" type="text"
                name="quantity" value="1" /><button class="action-plus" title="Quantity Plus">
                <i class="icofont-plus"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12">
        <div class="section-btn-25">
          <a href="#" class="btn btn-outline"><i class="fas fa-eye"></i><span>view all
              feature</span></a>
        </div>
      </div>
    </div>
  </div>
</section> -->





<section class="section newitem-part">
  <div class="container">
    <div class="row">
      <div class="col">
        <div class="section-heading">
          <h2>collected new items</h2>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <ul class="new-slider slider-arrow">
          {% for new_product in new_products %}

          <li>
            
            <div class="product-card">
              <div class="product-media">
                <div class="product-label">
                  <label class="label-text new">{{ new_product.remark }}</label>
                </div>
                <button class="product-wish wish">
                  <i class="fas fa-heart"></i></button><a class="product-image" href="{% url 'product_details' new_product.id %}"><img style="height: 198px; width:198; overflow: hidden;"
                    src="{{new_product.image.url}}" alt="product" /></a>
                
              </div>
              <div class="product-content">
                <div class="product-rating">
                  <i class="active icofont-star"></i><i class="active icofont-star"></i><i
                    class="active icofont-star"></i><i class="active icofont-star"></i><i class="icofont-star"></i><a
                    href="product-video.html">(3)</a>
                </div>
                <h6 class="product-name" style="height: 52px; overflow: hidden;">
                  <a href="{% url 'product_details' new_product.id %}">{{ new_product.title }}</a>
                </h6>
                <h6 class="product-price">
                
                  {% if new_product.discount %}
                    <del>{{ new_product.previous_price }}</del>
                    <span>{{ new_product.price }}</span>
                    {% else %}
                    <span>{{ new_product.price }}</span>
                    {% endif %}
                    
                    
                </h6>
                <button class="product-add" 
                data-product-img="{{ new_product.image.url }}"
                data-product-id="{{ new_product.id }}" 
                data-product-price="{{ new_product.price }}" 
                data-product-points="{{ new_product.points }}" 
                data-product-title="{{ new_product.title }}"
                @click="addToCart($event)" 

                title="Add to Cart">
                  <i class="fas fa-shopping-basket"></i><span>add</span>
                </button>

                  <a class="product-add mt-1"  href="{% url 'checkout_buy_now' new_product.id %}">
                  
                    <i class="fas fa-shopping-bag me-3"></i><span>BUY NOW</span>
                </a>

                <div class="product-action">
                  <button class="action-minus" title="Quantity Minus">
                    <i class="icofont-minus"></i></button><input class="action-input" title="Quantity Number"
                    type="text" name="quantity" value="1" /><button class="action-plus" title="Quantity Plus">
                    <i class="icofont-plus"></i>
                  </button>
                </div>
              </div>
            </div>
              
            
          </li>
          {% endfor %}
          
          
        </ul>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <div class="section-btn-25">
          <a href="{% url 'shop' %}" class="btn btn-outline"><i class="fas fa-eye"></i><span>view all new
              item</span></a>
        </div>
      </div>
    </div>
  </div>
</section>








<section class="section brand-part">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="section-heading">
          <h2>shop by brands</h2>
        </div>
      </div>
    </div>
    <div class="brand-slider slider-arrow">
      
      {% for brand in brands %}
      <div class="brand-wrap">
        <div class="brand-media">
          <img src="{{brand.img.url}}" alt="brand" />
          <div class="brand-overlay">
            <a href="#"><i class="fas fa-link"></i></a>
          </div>
        </div>
        <div class="brand-meta">
          <h4>{{brand.name}}</h4>
        </div>
      </div>
      {% endfor %}
        
  
      
    </div>
    <div class="row">
      <div class="col-lg-12">
        <div class="section-btn-50">
          <a href="#" class="btn btn-outline"><i class="fas fa-eye"></i><span>view all brands</span></a>
        </div>
      </div>
    </div>
  </div>
</section>








<section class="news-part" style="background: url(images/newsletter.jpg) no-repeat center">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-md-5 col-lg-6 col-xl-7">
        <div class="news-text">
          <h2>Get 20% Discount for Subscriber</h2>
          <p>Lorem ipsum dolor consectetur adipisicing accusantium</p>
        </div>
      </div>
      <div class="col-md-7 col-lg-6 col-xl-5">
        <form class="news-form">
          <input type="text" placeholder="Enter Your Email Address" /><button>
            <span><i class="icofont-ui-email"></i>Subscribe</span>
          </button>
        </form>
      </div>
    </div>
  </div>
</section>

{% endblock content %}


{% block js %}

{% endblock js %}