{% extends 'main.html' %}

{% load static %}

{% block title %}
    Магазин
{% endblock title %}

{% block content %}
    <div class="container">
        <div class="row flex-lg-row">
            <div class="col-lg-3">
                {% include 'category_menu.html' %}
            </div>
            <div class="col-lg-9">
                <div class="grid-controller">
                    <div class="grid-controller__buttons">
                        <a class="grid-controller__btn list-view btn">
                            <span class="material-icons lh-1_5">
                                view_list
                            </span>
                        </a>
                        <a class="grid-controller__btn grid-view btn">
                            <span class="material-icons lh-1_5">
                                grid_on
                            </span>
                        </a>
                    </div>
                </div>
                <div class="store-product-list mb-3">
                    {% for product in object_list %}
                        <a class="card card-block-link slider-product-card" href="{{ product.get_absolute_url }}">
                            <div class="card-img-block">
                                <img src="{{ product.get_main_image }}" class="card-img-top card-img" alt="{{ product.title }}">
                            </div>
                            <div class="card-body">
                                <h6 class="card-title">{{ product.get_super_title }}</h6>
                                <div class="card-footer-block">
                                    <p class="card-price product_price">{{product.price}}</p>
                                    <div class="card-buttons">
                                        <button class="btn btn-outline-danger card-buttons__favorite-btn">
                                            <span class="material-icons-round">
                                                favorite_border
                                            </span>
                                        </button>
                                        <button class="btn btn-outline-primary">
                                            Добавить
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </a>
                    {% endfor %}
                </div>
                {% comment %} Pagination  {% endcomment %}
                <nav aria-label="Page navigation example">
                    <ul class="pagination justify-content-center">
                        {% if page_obj.has_previous %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page.previous_page_number }}" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                        {% else %}
                            <li class="page-item disabled">
                                <a class="page-link" href="#" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                        {% endif %}

                        {% for number in paginator.page_range %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{number}}">{{number}}</a>
                            </li>
                        {% endfor %}

                        {% if page_obj.has_next %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.next_page_number }}" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        {% else %}
                            <li class="page-item disabled">
                                <a class="page-link" href="#" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        {% endif %}
                    </ul>
                </nav>
            </div>
        </div>
    </div>
{% endblock content %}


{% block scripts %}
    <script src="{% static 'js/grid-controller.js' %}"></script>
    <script src="{% static 'js/product-price.js' %}"></script>
    <script>
        $('.category-menu__header-button').click(function(){
            toogleMenu($(this), 'expand_less', 'expand_more')
        })
    </script>
{% endblock scripts %}