{% extends 'base.html' %}
{% load static %}
{% block content %}

<!--Carousel Wrapper-->
<div
  id="carousel-example-1z"
  class="carousel slide carousel-fade pt-4"
  data-ride="carousel"
>
  <!--Indicators-->
  <ol class="carousel-indicators">
    <li
      data-target="#carousel-example-1z"
      data-slide-to="0"
      class="active"
    ></li>
    <li data-target="#carousel-example-1z" data-slide-to="1"></li>
    <li data-target="#carousel-example-1z" data-slide-to="2"></li>
  </ol>
  <!--/.Indicators-->

  <!--Slides-->
  <div class="carousel-inner" role="listbox">
    <!--First slide-->
    <div class="carousel-item active">
      <div
        class="view"
        style="
          background-image: url({% static 'img/AD.png' %});
          background-repeat: no-repeat;
          background-size: cover;
        "
      >
        <!-- Mask & flexbox options-->
        <div
          class="mask rgba-black-strong d-flex justify-content-center align-items-center"
        >
          <!-- Content -->
          <div class="text-center white-text mx-5 wow fadeIn">
            <h1 class="mb-4">
              <strong>Condimentum lacinia quis vel eros</strong>
            </h1>

            <p>
              <strong>magnis dis parturient montes nascetur</strong>
            </p>

            <p class="mb-4 d-none d-md-block">
              <strong
                >Vitae tortor condimentum lacinia quis. Sed adipiscing diam
                donec adipiscing tristique risus nec feugiat. Non enim praesent
                elementum facilisis leo vel fringilla.</strong
              >
            </p>

            <a
              
              href="{% url 'core:shop' %}"
              class="btn btn-outline-white btn-lg">
              SHOP NOW
            </a>
          </div>
          <!-- Content -->
        </div>
        <!-- Mask & flexbox options-->
      </div>
    </div>
    <!--/First slide-->

    <!--Second slide-->
    <div class="carousel-item">
      <div
        class="view"
        style="
          background-image: url('https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/8-col/img%283%29.jpg');
          background-repeat: no-repeat;
          background-size: cover;
        "
      >
        <!-- Mask & flexbox options-->
        <div
          class="mask rgba-black-strong d-flex justify-content-center align-items-center"
        >
          <!-- Content -->
          <div class="text-center white-text mx-5 wow fadeIn">
            <h1 class="mb-4">
              <strong>A show of Love</strong>
            </h1>

            <p>
              <strong>facilisis gravida neque convallis a</strong>
            </p>

            <p class="mb-4 d-none d-md-block">
              <strong
                >Amet luctus venenatis lectus magna fringilla urna. Rhoncus
                dolor purus non enim. Id leo in vitae turpis massa sed. Sodales
                neque sodales ut etiam sit amet.</strong
              >
            </p>

            <a
              href="{% url 'core:shop' %}"
              class="btn btn-outline-white btn-lg">
               SHOP NOW
            </a>
          </div>
          <!-- Content -->
        </div>
        <!-- Mask & flexbox options-->
      </div>
    </div>
    <!--/Second slide-->

    <!--Third slide-->
    <div class="carousel-item">
      <div
        class="view"
        style="
          background-image: url('https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/8-col/img%285%29.jpg');
          background-repeat: no-repeat;
          background-size: cover;
        "
      >
        <!-- Mask & flexbox options-->
        <div
          class="mask rgba-black-strong d-flex justify-content-center align-items-center"
        >
          <!-- Content -->
          <div class="text-center white-text mx-5 wow fadeIn">
            
            <h1 class="mb-4">
              <strong>Best Gift Combos</strong>
            </h1>

            <p>
              <strong>Compassion</strong>
            </p>

            <p class="mb-4 d-none d-md-block">
              <strong
                >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Nascetur ridiculus mus mauris vitae.</strong
              >
            </p>

            <a
              href="{% url 'core:shop' %}"
              class="btn btn-outline-white btn-lg"> SHOP NOW
            </a>
          </div>
          <!-- Content -->
        </div>
        <!-- Mask & flexbox options-->
      </div>
    </div>
    <!--/Third slide-->
  </div>
  <!--/.Slides-->

  <!--Controls-->
  <a
    class="carousel-control-prev"
    href="#carousel-example-1z"
    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="#carousel-example-1z"
    role="button"
    data-slide="next"
  >
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
  <!--/.Controls-->
</div>
<!--/.Carousel Wrapper-->

<!--Main layout-->
<main>
  
    <!--/.Navbar-->
    <!--div class="container">
    <!--Section: Products v.3-->
    <section class="text-center mb-4">
      <!--Grid row-->
      <div class="row wow fadeIn">
        {% for item in object_list %}
        <!--Grid column-->
        <div class="col-lg-4 col-md-8 mb-4">
          <!--Card-->
          <div class="card">
            
            <!--Card image-->
            <div class="view overlay">
              <img
                src="{{ item.imag.url}}"
                class="card-img-top p-3"
                alt="product"
                
              />

              <a href="{{item.get_absolute_url}}">
                <div class="mask rgba-white-slight"></div>
              </a>
            </div>
            <!--Card image-->
            <hr>
            <!--Card content-->
            <div class="card-body text-center">
              <!--Category & Title-->
              <a href="" class="grey-text">
                <h5>{{ item.get_category_display }}</h5>
              </a>
              <h5>
                <strong>
                  <a href="{{item.get_absolute_url}}" class="dark-grey-text">
                    {{ item.title }}
                    <span
                      class="badge badge-pill {{ item.get_label_display }}-color"
                      >NEW</span
                    >
                  </a>
                </strong>
              </h5>

              <p class="font-weight-lighter black-text">
                <strong>
                  {% if item.discount_price %}
                 <span> {{item.discount_price}}</span>
                 <del>${{item.price}}</del> 
                  {%else%}
                  {{ item.price }} 
                  {% endif %}
                </strong>
              </p>
              <a href="{% url 'core:add-to-cart-home' item.slug %}" class="btn btn-primary btn-lg my-0 p"> Add to cart </a>
            </div>
            
           
            <!--Card content-->
          </div>
          <!--Card-->
        </div>
        <!--Grid column-->
        <!--Grid column-->
        {% endfor %}
        
      </div>
      <!--Grid row-->
    </section>
    <!--Section: Products v.3-->

    <!--Pagination-->
    {% comment %}     <nav class="d-flex justify-content-center wow fadeIn">
      <ul class="pagination pg-blue">
        <!--Arrow left-->
        <li class="page-item disabled">
          <a class="page-link" href="#" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
            <span class="sr-only">Previous</span>
          </a>
        </li>

        <li class="page-item active">
          <a class="page-link" href="#"
            >1
            <span class="sr-only">(current)</span>
          </a>
        </li>
        <li class="page-item">
          <a class="page-link" href="#">2</a>
        </li>
        <li class="page-item">
          <a class="page-link" href="#">3</a>
        </li>
        <li class="page-item">
          <a class="page-link" href="#">4</a>
        </li>
        <li class="page-item">
          <a class="page-link" href="#">5</a>
        </li>

        <li class="page-item">
          <a class="page-link" href="#" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
            <span class="sr-only">Next</span>
          </a>
        </li>
      </ul>
    </nav> {% endcomment %}
    <!--Pagination-->

  <div class="container-img"
  style="
        background-image: url({% static 'img/Gifts2.png' %});
        background-repeat: no-repeat;
        background-size: cover;
  "
  >
    <div class="mask rgba-white-slight d-flex justify-content-center align-items-center">
         <div class="text-center white-text mx-5 p-lg-5 wow fadeIn">
            <a class="mx-5 btn-h1">
              <strong>Best Gift Combos</strong>
            </a>

            <p>
              <strong>Compassion</strong>
            </p>

            <a
              target=""
              href="{% url 'core:shop' %}"
              class="btn btn-white btn-lg"> SHOP NOW
            </a>
          </div>
    
    </div>
  </div>


    <section class="text-center mb-4">
      <!--Grid row-->
      <div class="row wow fadeIn">
        {% for item in object_list %}
        <!--Grid column-->
        <div class="col-lg-4 col-md-8 mb-4">
          <!--Card-->
          <div class="card">
            <!--Card image-->
            <div class="view overlay">
              <img
                src="{{ item.imag.url}}"
                class="card-img-top"
                alt=""
              />
              <a href="{{item.get_absolute_url}}">
                <div class="mask rgba-white-slight"></div>
              </a>
            </div>
            <!--Card image-->
            <hr>
            <!--Card content-->
            <div class="card-body text-center">
              <!--Category & Title-->
              <a href="" class="grey-text">
                <h5>{{ item.get_category_display }}</h5>
              </a>
              <h5>
                <strong>
                  <a href="{{item.get_absolute_url}}" class="dark-grey-text">
                    {{ item.title }}
                    <span
                      class="badge badge-pill {{ item.get_label_display }}-color"
                      >NEW</span
                    >
                  </a>
                </strong>
              </h5>

              <p class="font-weight-lighter black-text">
                <strong>
                  {% if item.discount_price %}
                 <span> {{item.discount_price}}</span>
                 <del>${{item.price}}</del> 
                  {%else%}
                  {{ item.price }} {% endif %}
                </strong>
              </p>
               <a
            href="{% url 'core:add-to-cart-home' item.slug %}"
            class="btn btn-primary btn-lg my-0 p">
            Add to cart
          </a>
            </div>
           
            <!--Card content-->
          </div>
          <!--Card-->
        </div>
        <!--Grid column-->
        <!--Grid column-->

        {% endfor %}
      </div>
      <!--Grid row-->
    </section>

   <div class="container-img"
  style="
        background-image: url({% static 'img/Gifts2.png' %});
        background-repeat: no-repeat;
        background-size: cover; ">
    <div class="mask rgba-white-slight d-flex justify-content-center align-items-center">
         <div class="text-center white-text mx-5 p-lg-5 wow fadeIn">
            <h1 class="mx-5 btn-h1">
              <strong>Winter Gifts</strong>
            </h1>

            <p>
              <strong>Compassionate gifts for a cold day</strong>
            </p>

            <a
              target="_blank"
              href="{% url 'core:shop' %}"
              class="btn btn-white btn-lg"> SHOP NOW
            </a>
          </div>
    
      </div>
  </div>
    <section class="text-center mb-4">
      <!--Grid row-->
      <div class="row wow fadeIn">
        {% for item in object_list %}
        <!--Grid column-->
        <div class="col-lg-4 col-md-8 mb-4">
          <!--Card-->
          <div class="card">
            <!--Card image-->
            <div class="view overlay">
              <img
                src="{{ item.imag.url}}"
                class="card-img-top"
                alt=""
              />
              <a href="{{item.get_absolute_url}}">
                <div class="mask rgba-white-slight"></div>
              </a>
            </div>
            <!--Card image-->
            <hr>
            <!--Card content-->
            <div class="card-body text-center">
              <!--Category & Title-->
              <a href="" class="grey-text">
                <h5>{{ item.get_category_display }}</h5>
              </a>
              <h5>
                <strong>
                  <a href="{{item.get_absolute_url}}" class="dark-grey-text">
                    {{ item.title }}
                    <span
                      class="badge badge-pill {{ item.get_label_display }}-color"
                      >NEW</span
                    >
                  </a>
                </strong>
              </h5>

              <p class="font-weight-lighter black-text">
                <strong>
                  {% if item.discount_price %}
                 <span> {{item.discount_price}}</span>
                 <del>${{item.price}}</del> 
                  {%else%}
                  {{ item.price }} {% endif %}
                </strong>
              </p>
               <a
            href="{{item.get_add_to_cart_home_url}}"
            class="btn btn-primary btn-lg my-0 p">
            Add to cart
          </a>
            </div>
           
            <!--Card content-->
          </div>
          <!--Card-->
        </div>
        <!--Grid column-->
        <!--Grid column-->

        {% endfor %}
      </div>
      <!--Grid row-->
    </section>
    <section class="text-center mb-4">
      <!--Grid row-->
      <div class="row wow fadeIn">
        {% for item in object_list %}
        <!--Grid column-->
        <div class="col-lg-4 col-md-8 mb-4">
          <!--Card-->
          <div class="card">
            <!--Card image-->
            <div class="view overlay">
              <img
                src="{{ item.imag.url}}"
                class="card-img-top"
                alt=""
              />
              <a href="{{item.get_absolute_url}}">
                <div class="mask rgba-white-slight"></div>
              </a>
            </div>
            <!--Card image-->
            <hr>
            <!--Card content-->
            <div class="card-body text-center">
              <!--Category & Title-->
              <a href="" class="grey-text">
                <h5>{{ item.get_category_display }}</h5>
              </a>
              <h5>
                <strong>
                  <a href="{{item.get_absolute_url}}" class="dark-grey-text">
                    {{ item.title }}
                    <span
                      class="badge badge-pill {{ item.get_label_display }}-color"
                      >NEW</span
                    >
                  </a>
                </strong>
              </h5>

              <p class="font-weight-lighter black-text">
                <strong>
                  {% if item.discount_price %}
                 <span> {{item.discount_price}}</span>
                 <del>${{item.price}}</del> 
                  {%else%}
                  {{ item.price }} {% endif %}
                </strong>
              </p>
               <a
            href="{% url 'core:add-to-cart-home' item.slug %}"
            class="btn btn-primary btn-lg my-0 p">
            Add to cart
          </a>
            </div>
           
            <!--Card content-->
          </div>
          <!--Card-->
        </div>
        <!--Grid column-->
        <!--Grid column-->

        {% endfor %}
      </div>
      <!--Grid row-->
    </section>
  </div>

</main>
<!--Main layout-->

<!-- SCRIPTS -->
<!-- JQuery -->

{% endblock content %}