{% extends 'base.html' %} {% block content %}
<!-- Navbar -->

<!--Main layout-->
<main class="mt-5 pt-4">
  <div class="container dark-grey-text mt-5">
    <!--Grid row-->
    <div class="row wow fadeIn">
      <!--Grid column-->
      <div class="col-md-6 mb-4">
        <img
          src="{{object.imag.url}}"
          class="img-fluid"
          alt=""
        />
      </div>
      <!--Grid column-->

      <!--Grid column-->
      <div class="col-md-6 mb-4">
        <!--Content-->
        <div class="p-4">
          <h3 class="dark-grey-text font-weight-bold"> {{ object.title }}</h3>
          <div class="mb-3">
            <a href="">
              <span class="badge purple mr-1">
                {{ object.get_category_display }}
              </span>
            </a>
          </div>
          
          <p class="lead">
            <span class="mr-1">
              {% if object.discount_price %}
              <del>${{object.price}}</del>
            </span>
            <span>${{ object.discount_price }}</span>
            {%else%}
            <span> ${{ object.price }} </span>
            {% endif %}
          </p>

          <p class="lead font-weight-bold">Description</p>

          <p>{{object.description}}</p>
          <a
            href="{{object.get_add_to_cart_url}}"
            class="btn btn-primary btn-lg my-0 p"
          >
            Add to cart
            <i class="fa fa-shopping-basket"></i>
          </a>
          <a
            href="{{object.get_remove_from_cart_url}}"
            class="btn btn-danger btn-sm my-0 p"
          >
            Remove
          </a>
        </div>
        <!--Content-->
      </div>
      <!--Grid column-->
    </div>
    <!--Grid row-->

    <hr />

    <!--Grid row-->
    <div class="row d-flex justify-content-center wow fadeIn">
      <!--Grid column-->
      <div class="col-md-6 text-center">
        <h4 class="my-4 h4">Additional information</h4>

        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus
          suscipit modi sapiente illo soluta odit voluptates, quibusdam officia.
          Neque quibusdam quas a quis porro? Molestias illo neque eum in
          laborum.
        </p>
      </div>
      <!--Grid column-->
    </div>
    <!--Grid row-->

    <!--Grid row-->
    <div class="row wow fadeIn">
      <!--Grid column-->
      <div class="col-lg-4 col-md-12 mb-4">
        <img
          src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/11.jpg"
          class="img-fluid"
          alt=""
        />
      </div>
      <!--Grid column-->

      <!--Grid column-->
      <div class="col-lg-4 col-md-6 mb-4">
        <img
          src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/12.jpg"
          class="img-fluid"
          alt=""
        />
      </div>
      <!--Grid column-->

      <!--Grid column-->
      <div class="col-lg-4 col-md-6 mb-4">
        <img
          src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/13.jpg"
          class="img-fluid"
          alt=""
        />
      </div>
      <!--Grid column-->
    </div>
    <!--Grid row-->
  </div>
</main>
<!--Main layout-->
<!--/.Footer-->

<!-- SCRIPTS -->
<!-- JQuery -->
{% endblock content %}