{% extends "base.html" %} {% load static %} {% block branding %}

<main id="content">
  <section class="py-2" style="background-color: #eee6ee">
    <div class="container">
      <nav aria-label="breadcrumb">
        <ol
          class="breadcrumb breadcrumb-site py-0 d-flex justify-content-center"
        >
          <li class="breadcrumb-item">
            <a class="text-decoration-none text-body" href="{% url 'home' %}"
              >Home</a
            >
          </li>
          <li class="breadcrumb-item pl-0 d-flex align-items-center">
            <a
              class="text-decoration-none text-body"
              href="{% url 'products' %}"
              >Products</a
            >
          </li>
          {% for i in prod %}
          <li
            class="breadcrumb-item active pl-0 d-flex align-items-center"
            aria-current="page"
          >
            {{i.name}}
          </li>
          {% endfor %}
        </ol>
      </nav>
    </div>
  </section>
  <section class="pt-11 product-details-layout-2">
    <div class="container">
      <div class="row">
        <div class="col-md-6 pr-xl-9 mb-8 mb-md-0">
          <div class="galleries-product galleries-product-02 position-relative">
            <div
              class="slick-slider slider-for mx-0"
              data-slick-options='{"slidesToShow": 1, "autoplay":false,"dots":false,"arrows":false,"asNavFor": ".slider-nav"}'
            >
              <div class="box px-0">
                <div class="card p-0 rounded-0 border-0">
                  {% for i in prod %}
                  <a
                    href="/media/{{ i.image }}"
                    class="card-img"
                    data-gtf-mfp="true"
                    data-gallery-id="02"
                  >
                    <img
                      src="/media/{{ i.image }}"
                      alt="product gallery"
                      class="w-70"
                    />
                  </a>
                  {% endfor %}
                </div>
              </div>
              <div class="box px-0">
                <div class="card p-0 rounded-0 border-0 mb-5">
                  <a
                    href='{% static "images/product-16.jpg" %}'
                    class="card-img"
                    data-gtf-mfp="true"
                    data-gallery-id="02"
                  >
                    <img
                      src='{% static "images/product-16.jpg" %}'
                      alt="product gallery"
                      class="w-100"
                    />
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        {% for i in prod %}
        <div class="col-md-6">
          <h1 class="fs-28 text-secondary">Product Name</h1>
          <h2 class="fs-24 mb-2">{{ i.name }}</h2>
          <p class="d-flex align-items-center mb-3">
            <!-- <span class="text-line-through">$39.00</span> -->
            <!-- <span class="fs-18 text-secondary font-weight-bold"
              >Rs. {{ i.price }}</span
            > -->
            <!-- <span class="badge badge-primary fs-16 ml-4 font-weight-600 px-3">20%</span> -->
          </p>
          <p class="mb-2 font-weight-bold fs-18">Description</p>
          <p class="mb-4 w-75">{{i.detail_description}}</p>
          <button
            class="border-0 py-2 px-4 rounded fs-18 font-weight-bold whatsapp-button d-flex align-items-center"
          >
            <img
              src='{% static "images/whatsapp-24.png" %}'
              class="mr-2"
              alt="Whatsapp"
            />
            Whatsapp Us
          </button>
          <ul class="list-inline d-flex justify-content-start mb-0 fs-16 pt-8">
            <li class="list-inline-item">
              <a class="text-body hover-secondary text-decoration-none" href="#"
                ><i class="fab fa-facebook-f mr-1"></i> Facebook</a
              >
            </li>
            <li class="list-inline-item ml-4">
              <a class="text-body hover-secondary text-decoration-none" href="#"
                ><i class="fab fa-instagram mr-1"></i> Instagram</a
              >
            </li>
            <li class="list-inline-item ml-4">
              <a class="text-body hover-secondary text-decoration-none" href="#"
                ><i class="fab fa-youtube mr-1"></i> Youtube</a
              >
            </li>
          </ul>
        </div>
        {% endfor %}
      </div>
    </div>
  </section>
</main>
{% endblock %}