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

    <!-- Breadcrumb Start-->
    <section class="breadcrumb"><img class="img-fluid img-src" src="{% static 'main/assets/images/herointro/3.webp' %}" alt="">
        <div class="container">
            <div class="grid grid-cols-12">
                <div class="col-span-12">
                    <div class="breadcrumb-contain">
                        <h1 data-sal-delay="100" data-sal="slide-up" data-sal-duration="800">Shop Cart</h1>
                        <ul data-sal-delay="200" data-sal="slide-up" data-sal-duration="800">
                            <li><a href="{% url 'main:home' %}">Home<i class="bi bi-chevron-right"></i></a></li>
                            <li><a href="#">Shop Cart</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Breadcrumb end-->
    <!-- cart start-->
    <section class="space-py-100 cdxshopping-cart">
        <div class="container">
            <div class="grid grid-cols-12 cdx-gap">
                <div class="col-span-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="overflow-x-auto">
                                <table class="table cart-tbl">
                                    <thead>
                                        <tr>
                                            <th class="text-primary fs-16">Product</th>
                                            <th class="text-primary fs-16">Product name</th>
                                            <th class="text-primary fs-16">Quantity</th>
                                            <th class="text-primary fs-16">Price</th>
                                            <th class="text-primary fs-16">Total</th>
                                            <th class="text-primary fs-16">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody class="cartBody">
                                        <tr>
                                            <td>
                                                <div class="product-imgwrap"><img class="img-fluid" src="{% static 'main/assets/images/course/1.webp' %}" alt="herointro image"></div>
                                            </td>
                                            <td class="cart-title">Learn Python: The Complete Python Programming Course</td>
                                            <td>
                                                <div class="input-group pro-quantity"><span class="input-group-text count-minus"><i class="bi bi-dash"></i></span>
                                                    <input class="form-control pro-qty" type="text" name="qty count" value="1"><span class="input-group-text count-plus"><i class="bi bi-plus"></i></span>
                                                </div>
                                            </td>
                                            <td>DZD150</td>
                                            <td>DZD200</td>
                                            <td>
                                                <div class="cart-action"><a class="text-light" href="javascript:void(0)"> <i data-feather="heart"></i></a><a href="javascript:void(0)"> <i data-feather="trash-2"></i></a></div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div class="product-imgwrap"><img class="img-fluid" src="{% static 'main/assets/images/course/2.webp' %}" alt=""></div>
                                            </td>
                                            <td class="cart-title">Photoshop Master Course: From Beginner to Photoshop Pro</td>
                                            <td>
                                                <div class="input-group pro-quantity"><span class="input-group-text count-minus"><i class="bi bi-dash"></i></span>
                                                    <input class="form-control pro-qty" type="text" name="qty count" value="1"><span class="input-group-text count-plus"><i class="bi bi-plus"></i></span>
                                                </div>
                                            </td>
                                            <td>DZD80</td>
                                            <td>DZD320 </td>
                                            <td>
                                                <div class="cart-action"><a class="text-light" href="javascript:void(0)"> <i data-feather="heart"></i></a><a href="javascript:void(0)"> <i data-feather="trash-2"></i></a></div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div class="product-imgwrap"><img class="img-fluid" src="{% static 'main/assets/images/course/3.webp' %}" alt=""></div>
                                            </td>
                                            <td class="cart-title">Data Science and Machine Learning Bootcamp with R</td>
                                            <td>
                                                <div class="input-group pro-quantity"><span class="input-group-text count-minus"><i class="bi bi-dash"></i></span>
                                                    <input class="form-control pro-qty" type="text" name="qty count" value="1"><span class="input-group-text count-plus"><i class="bi bi-plus"></i></span>
                                                </div>
                                            </td>
                                            <td>DZD180 </td>
                                            <td>DZD180 </td>
                                            <td>
                                                <div class="cart-action"><a class="text-light" href="javascript:void(0)"> <i data-feather="heart"></i></a><a href="javascript:void(0)"> <i data-feather="trash-2"></i></a></div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div class="product-imgwrap"><img class="img-fluid" src="{% static 'main/assets/images/course/4.webp' %}" alt=""></div>
                                            </td>
                                            <td class="cart-title">User Experience (UX): The Ultimate Guide to Usability and UX</td>
                                            <td>
                                                <div class="input-group pro-quantity"><span class="input-group-text count-minus"><i class="bi bi-dash"></i></span>
                                                    <input class="form-control pro-qty" type="text" name="qty count" value="1"><span class="input-group-text count-plus"><i class="bi bi-plus"></i></span>
                                                </div>
                                            </td>
                                            <td>DZD300 </td>
                                            <td>DZD600 </td>
                                            <td>
                                                <div class="cart-action"><a class="text-light" href="javascript:void(0)"> <i data-feather="heart"></i></a><a href="javascript:void(0)"> <i data-feather="trash-2"></i></a></div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="cartbtn-group">
                                <div><a class="btn btn-primary btn-md" href="productno-filter.html">Continue Shopping      </a></div>
                                <div>
                                    <div class="group-btn"><a class="btn btn-primary btn-md" href="javascript:void(0);">Update Cart </a><a class="btn btn-primary btn-md removeAll_cart" href="javascript:void(0);">Clear Shopping Cart       </a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-start-auto col-span-12 2xl:col-span-4 2xl:col-start-9 lg.col-span-4 lg:col-start-8 md:col-span-6 md:col-start-7">
                    <div class="card">
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table chekout-tbl mb-0">
                                    <tbody>
                                        <tr>
                                            <th>Discounts</th>
                                            <td>DZD 1600.00</td>
                                        </tr>
                                        <tr>
                                            <th>Special Offer Saving</th>
                                            <td>DZD 0.00</td>
                                        </tr>
                                        <tr>
                                            <th>Subtotal exc VAT</th>
                                            <td>DZD 14.80</td>
                                        </tr>
                                        <tr>
                                            <th>VAT</th>
                                            <td>DZD 140.00</td>
                                        </tr>
                                        <tr>
                                            <th>Grand Total inc VAT</th>
                                            <td>DZD 1660.80</td>
                                        </tr>
                                        <tr>
                                            <td colspan="2"><a class="btn btn-primary btn-md w-100" href="checkout.html">Proceed to checkout</a></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- cart end  -->

{% endblock %}
