{% extends "base.html" %}
{% load i18n %}
{% block title %}Online Shopping{% endblock %}

{% block content %}
<div class="container-fluid">
    {% include "searchbar.html" %}
    <div class="row">
        <div class="col-3">
            {% for category in firstcategorylist %}
            <div class="list-group dropright">
            <a href="#" class="list-group-item list-group-item-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ category }}</a>
            <div id="{{ category }}" class="dropdown-menu">
                <table class="table table-borderless">
                    {% for cate in category.secondlevelcategory %}
                        {% if cate.numofproductincategory == 0 %}
                        {% else %}
                        <thead>
                        <tr>
                            <th scope="col">{{ cate }}
                                <small><a href="{{ cate.get_absolute_url }}">{% trans "View More" %}</a></small>
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            {% for product in cate.categoryproductlist %}
                            <td><a href="{{ product.get_absolute_url }}"><img src="{{ product.image.url }}" height="200" width="200"></a></td>
                            {% endfor %}
                        </tr>
                        <tr>
                            {% for product in cate.categoryproductlist %}
                            <td>{{ product }}</td>
                            {% endfor %}
                        </tr>
                        <tr>
                            {% for product in cate.categoryproductlist %}
                            <td>{{ product.price }}</td>
                            {% endfor %}
                        </tr>
                        </tbody>
                        {% endif %}
                    {% endfor %}
                </table>
            </div>
        </div>
            {% endfor %}
        </div>
        <div class="col-6">
            <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src="/media/image/664e721184afb881fbefc8f586bb005d_OB4uyhL.jpg" class="d-block w-100" alt="..." height="400" width="400">
                    </div>

                    <div class="carousel-item">
                        <img src="/media/image/664e721184afb881fbefc8f586bb005d.jpg" class="d-block w-100" alt="..." height="400" width="400">
                    </div>

                    <div class="carousel-item">
                        <img src="/media/image/77acdbc1d5a63a94e6f8e031c82223fb.jpg" class="d-block w-100" alt="..." height="400" width="400">
                    </div>

                </div>
                <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
        <div class="col-3" >
            <p>{% trans "Quick Links" %}</p>
            <ul class="list-group list-group-flush">
                <li class="list-group-item"><a href="#">{% trans "Detailed Categories" %}</a></li>
                <li class="list-group-item"><a href="#">{% trans "Popular Posts" %}</a></li>
                <li class="list-group-item"><a href="#">{% trans "Available Coupons" %}</a></li>
                <li class="list-group-item"><a href="#">{% trans "Snap-up Products" %}</a></li>
            </ul>
        </div>
    </div>
    <br>
    <div class="row">
    </div>
    <div>
        <script>
           $(".firstlevelcate").hover(function(){
               var catename = $(this).text();
               console.log(catename);
               });
        </script>
    </div>
</div>
{% endblock %}