{% extends 'hexabox/elements/layouts/admin.html' %}
        
{% block additional_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='hexabox/vendor/star-rating/star-rating-svg.css')}}">
{% endblock %}
        
{% block content %}

			<div class="container-fluid mh-auto">
                <div class="row">
				
					<!-- Start - Product 1 -->
                    <div class="col-xl-6">
                        <div class="card">
                            <div class="card-body p-2">
                                <div class="row gx-2">
                                    <div class="col-xxl-5 col-sm-5">
										<img class="img-fluid rounded" src="{{ url_for('static', filename='hexabox/images/product/2.jpg')}}" alt="">
									</div>
                                    <div class="col-xxl-7 col-sm-7 p-2 p-sm-3">
										<h3 class="mb-2 fs-5 fw-semibold">
											<a href="/ecom-product-detail">Sleeveless Jumpsuit</a>
										</h3>
										<div class="mb-3">
											<ul class="d-flex align-items-start gap-1 mb-1">
												<li><i class="fa fa-star text-orange"></i></li>
												<li><i class="fa fa-star text-orange"></i></li>
												<li><i class="fa fa-star text-orange"></i></li>
												<li><i class="fa-solid fa-star-half-stroke text-orange"></i></li>
												<li><i class="fa-solid fa-star-half-stroke text-orange"></i></li>
											</ul>
											<div class="d-flex align-items-center justify-content-between gap-2">
												<div class="clearfix d-flex flex-wrap">
													<span>(34 reviews) / </span>
													<a class="text-decoration-underline" href="javascript:void(0)"  data-bs-toggle="modal" data-bs-target="#reviewModal">Write a review?</a>
												</div>
												<span class="fs-5 text-primary fw-semibold">$320.00</span>
											</div>
										</div>
										<ul class="small mb-3">
											<li class="mb-1">
												<span class="fw-medium text-dark me-1">Availability:</span> In Stock <i class="fa fa-check-circle text-success"></i>
											</li>
											<li class="mb-1">
												<span class="fw-medium text-dark me-1">Product Code:</span> 0405689
											</li>
											<li class="mb-1">
												<span class="fw-medium text-dark me-1">Brand:</span> Lee
											</li>
										</ul>
										<p class="mb-0">There are many variations of passages of Lorem Ipsum available but the majority have suffered alteration in some injected words.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
					</div>
					<!-- End - Product 1 -->
					
					<!-- Start - Product 2 -->
					<div class="col-xl-6">
                        <div class="card">
                            <div class="card-body p-2">
                                <div class="row gx-2">
                                    <div class="col-xxl-5 col-sm-5">
										<img class="img-fluid rounded" src="{{ url_for('static', filename='hexabox/images/product/3.jpg')}}" alt="">
                                    </div>
                                    <div class="col-xxl-7 col-sm-7 p-2 p-sm-3">
										<h3 class="mb-2 fs-5 fw-semibold">
											<a href="/ecom-product-detail">Spaghetti Strap Summer Dress</a>
										</h3>
										<div class="mb-3">
											<ul class="d-flex align-items-start gap-1 mb-1">
												<li><i class="fa fa-star text-orange"></i></li>
												<li><i class="fa fa-star text-orange"></i></li>
												<li><i class="fa fa-star text-orange"></i></li>
												<li><i class="fa-solid fa-star-half-stroke text-orange"></i></li>
												<li><i class="fa-solid fa-star-half-stroke text-orange"></i></li>
											</ul>
											<div class="d-flex align-items-center justify-content-between gap-2">
												<div class="clearfix d-flex flex-wrap">
													<span>(34 reviews) / </span>
													<a class="text-decoration-underline" href="javascript:void(0)"  data-bs-toggle="modal" data-bs-target="#reviewModal">Write a review?</a>
												</div>
												<span class="fs-5 text-primary fw-semibold">$325.00</span>
											</div>
										</div>
										<ul class="small mb-3">
											<li class="mb-1">
												<span class="fw-medium text-dark me-1">Availability:</span> In Stock <i class="fa fa-check-circle text-success"></i>
											</li>
											<li class="mb-1">
												<span class="fw-medium text-dark me-1">Product Code:</span> 0405689
											</li>
											<li class="mb-1">
												<span class="fw-medium text-dark me-1">Brand:</span> Lee
											</li>
										</ul>
										<p class="mb-0">There are many variations of passages of Lorem Ipsum available but the majority have suffered alteration in some injected words.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
					</div>
					<!-- End - Product 2 -->
					
					<!-- Start - Product 3 -->
					<div class="col-xl-6">
                        <div class="card">
                            <div class="card-body p-2">
                                <div class="row gx-2">
                                    <div class="col-xxl-5 col-sm-5">
										<img class="img-fluid rounded" src="{{ url_for('static', filename='hexabox/images/product/4.jpg')}}" alt="">
                                    </div>
                                    <div class="col-xxl-7 col-sm-7 p-2 p-sm-3">
										<h3 class="mb-2 fs-5 fw-semibold">
											<a href="/ecom-product-detail">Black Cocktail Dress</a>
										</h3>
										<div class="mb-3">
											<ul class="d-flex align-items-start gap-1 mb-1">
												<li><i class="fa fa-star text-orange"></i></li>
												<li><i class="fa fa-star text-orange"></i></li>
												<li><i class="fa fa-star text-orange"></i></li>
												<li><i class="fa-solid fa-star-half-stroke text-orange"></i></li>
												<li><i class="fa-solid fa-star-half-stroke text-orange"></i></li>
											</ul>
											<div class="d-flex align-items-center justify-content-between gap-2">
												<div class="clearfix d-flex flex-wrap">
													<span>(34 reviews) / </span>
													<a class="text-decoration-underline" href="javascript:void(0)"  data-bs-toggle="modal" data-bs-target="#reviewModal">Write a review?</a>
												</div>
												<span class="fs-5 text-primary fw-semibold">$480.00</span>
											</div>
										</div>
										<ul class="small mb-3">
											<li class="mb-1">
												<span class="fw-medium text-dark me-1">Availability:</span> In Stock <i class="fa fa-check-circle text-success"></i>
											</li>
											<li class="mb-1">
												<span class="fw-medium text-dark me-1">Product Code:</span> 0405689
											</li>
											<li class="mb-1">
												<span class="fw-medium text-dark me-1">Brand:</span> Lee
											</li>
										</ul>
										<p class="mb-0">There are many variations of passages of Lorem Ipsum available but the majority have suffered alteration in some injected words.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
					</div>
					<!-- End - Product 3 -->
                    
					<!-- Start - Product 4 -->
					<div class="col-xl-6">
                        <div class="card">
                            <div class="card-body p-2">
                                <div class="row gx-2">
                                    <div class="col-xxl-5 col-sm-5">
										<img class="img-fluid rounded" src="{{ url_for('static', filename='hexabox/images/product/5.jpg')}}" alt="">
                                    </div>
                                    <div class="col-xxl-7 col-sm-7 p-2 p-sm-3">
										<h3 class="mb-2 fs-5 fw-semibold">
											<a href="/ecom-product-detail">White Long Sleeves Dress</a>
										</h3>
										<div class="mb-3">
											<ul class="d-flex align-items-start gap-1 mb-1">
												<li><i class="fa fa-star text-orange"></i></li>
												<li><i class="fa fa-star text-orange"></i></li>
												<li><i class="fa fa-star text-orange"></i></li>
												<li><i class="fa-solid fa-star-half-stroke text-orange"></i></li>
												<li><i class="fa-solid fa-star-half-stroke text-orange"></i></li>
											</ul>
											<div class="d-flex align-items-center justify-content-between gap-2">
												<div class="clearfix d-flex flex-wrap">
													<span>(34 reviews) / </span>
													<a class="text-decoration-underline" href="javascript:void(0)"  data-bs-toggle="modal" data-bs-target="#reviewModal">Write a review?</a>
												</div>
												<span class="fs-5 text-primary fw-semibold">$658.00</span>
											</div>
										</div>
										<ul class="small mb-3">
											<li class="mb-1">
												<span class="fw-medium text-dark me-1">Availability:</span> In Stock <i class="fa fa-check-circle text-success"></i>
											</li>
											<li class="mb-1">
												<span class="fw-medium text-dark me-1">Product Code:</span> 0405689
											</li>
											<li class="mb-1">
												<span class="fw-medium text-dark me-1">Brand:</span> Lee
											</li>
										</ul>
										<p class="mb-0">There are many variations of passages of Lorem Ipsum available but the majority have suffered alteration in some injected words.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
					</div>
					<!-- End - Product 4 -->
					
					<!-- Start - Product 5 -->
                    <div class="col-xl-6">
                        <div class="card">
                            <div class="card-body p-2">
                                <div class="row gx-2">
                                    <div class="col-xxl-5 col-sm-5">
										<img class="img-fluid rounded" src="{{ url_for('static', filename='hexabox/images/product/6.jpg')}}" alt="">
									</div>
                                    <div class="col-xxl-7 col-sm-7 p-2 p-sm-3">
										<h3 class="mb-2 fs-5 fw-semibold">
											<a href="/ecom-product-detail">Off Shoulder Sheath Dress</a>
										</h3>
										<div class="mb-3">
											<ul class="d-flex align-items-start gap-1 mb-1">
												<li><i class="fa fa-star text-orange"></i></li>
												<li><i class="fa fa-star text-orange"></i></li>
												<li><i class="fa fa-star text-orange"></i></li>
												<li><i class="fa-solid fa-star-half-stroke text-orange"></i></li>
												<li><i class="fa-solid fa-star-half-stroke text-orange"></i></li>
											</ul>
											<div class="d-flex align-items-center justify-content-between gap-2">
												<div class="clearfix d-flex flex-wrap">
													<span>(34 reviews) / </span>
													<a class="text-decoration-underline" href="javascript:void(0)"  data-bs-toggle="modal" data-bs-target="#reviewModal">Write a review?</a>
												</div>
												<span class="fs-5 text-primary fw-semibold">$290.00</span>
											</div>
										</div>
										<ul class="small mb-3">
											<li class="mb-1">
												<span class="fw-medium text-dark me-1">Availability:</span> In Stock <i class="fa fa-check-circle text-success"></i>
											</li>
											<li class="mb-1">
												<span class="fw-medium text-dark me-1">Product Code:</span> 0405689
											</li>
											<li class="mb-1">
												<span class="fw-medium text-dark me-1">Brand:</span> Lee
											</li>
										</ul>
										<p class="mb-0">There are many variations of passages of Lorem Ipsum available but the majority have suffered alteration in some injected words.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
					</div>
					<!-- End - Product 5 -->
					
					<!-- Start - Product 6 -->
                    <div class="col-xl-6">
                        <div class="card">
                            <div class="card-body p-2">
                                <div class="row gx-2">
                                    <div class="col-xxl-5 col-sm-5">
										<img class="img-fluid rounded" src="{{ url_for('static', filename='hexabox/images/product/7.jpg')}}" alt="">
                                    </div>
                                    <div class="col-xxl-7 col-sm-7 p-2 p-sm-3">
										<h3 class="mb-2 fs-5 fw-semibold">
											<a href="/ecom-product-detail">Boat Neckline Pleated Skirt</a>
										</h3>
										<div class="mb-3">
											<ul class="d-flex align-items-start gap-1 mb-1">
												<li><i class="fa fa-star text-orange"></i></li>
												<li><i class="fa fa-star text-orange"></i></li>
												<li><i class="fa fa-star text-orange"></i></li>
												<li><i class="fa-solid fa-star-half-stroke text-orange"></i></li>
												<li><i class="fa-solid fa-star-half-stroke text-orange"></i></li>
											</ul>
											<div class="d-flex align-items-center justify-content-between gap-2">
												<div class="clearfix d-flex flex-wrap">
													<span>(34 reviews) / </span>
													<a class="text-decoration-underline" href="javascript:void(0)"  data-bs-toggle="modal" data-bs-target="#reviewModal">Write a review?</a>
												</div>
												<span class="fs-5 text-primary fw-semibold">$600.00</span>
											</div>
										</div>
										<ul class="small mb-3">
											<li class="mb-1">
												<span class="fw-medium text-dark me-1">Availability:</span> In Stock <i class="fa fa-check-circle text-success"></i>
											</li>
											<li class="mb-1">
												<span class="fw-medium text-dark me-1">Product Code:</span> 0405689
											</li>
											<li class="mb-1">
												<span class="fw-medium text-dark me-1">Brand:</span> Lee
											</li>
										</ul>
										<p class="mb-0">There are many variations of passages of Lorem Ipsum available but the majority have suffered alteration in some injected words.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
					</div>
					<!-- End - Product 6 -->

                </div>
				
				<!-- Start - Product Review Modal -->
				<div class="modal fade" id="reviewModal" tabindex="-1" aria-labelledby="reviewModalLabel" aria-hidden="true">
					<div class="modal-dialog modal-dialog-centered">
						<div class="modal-content">
							<div class="modal-header">
								<h5 class="modal-title" id="reviewModalLabel">Review</h5>
								<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
							</div>
							<div class="modal-body">
								<form>
									<div class="text-center mb-4">
										<img src="{{ url_for('static', filename='hexabox/images/product/1.jpg')}}" class="avatar avatar-lg" alt="">
										<div class="rating-stars mt-3">
											<ul id="stars">
												<li class="star" title="Poor" data-value="1">
													<i class="fa fa-star fa-fw fs-4"></i>
												</li>
												<li class="star" title="Fair" data-value="2">
													<i class="fa fa-star fa-fw fs-4"></i>
												</li>
												<li class="star" title="Good" data-value="3">
													<i class="fa fa-star fa-fw fs-4"></i>
												</li>
												<li class="star" title="Excellent" data-value="4">
													<i class="fa fa-star fa-fw fs-4"></i>
												</li>
												<li class="star" title="WOW!!!" data-value="5">
													<i class="fa fa-star fa-fw fs-4"></i>
												</li>
											</ul>
										</div>
									</div>
									<div class="mb-3">
										<textarea class="form-control" placeholder="Comment" rows="5"></textarea>
									</div>
									<button class="btn btn-success w-100">RATE</button>
								</form>
							</div>
						</div>
					</div>
				</div>
				<!-- End - Product Review Modal -->
				
            </div>

{% endblock %}
{% block additional_js %}
<script src="{{ url_for('static', filename='hexabox/vendor/star-rating/jquery.star-rating-svg.js')}}"></script>
{% endblock %}