{% extends 'base.jinja' %}
{% block title %}
{{ category.title }}{% for parent in category.get_parents() %} > {{ parent.title }}{% endfor %}
{% endblock %}
{% block content %}
    <div class=" breadcrumbs">
        <ol class="breadcrumb breadcrumb-arrow">
            <li><a href="/">Главная</a></li>
        {% if category %}
            {% for parent in category.get_parents() %}
                <li><a href="{{ parent.get_absolute_url() }}">{{ parent.title }}</a></li>
            {% endfor %}
            <li class="active"><span>{{ category.title }}</span></li>
            {% else %}
            <li class="active"><span>Поиск</span></li>
        {% endif %}

        </ol>
    </div>
    <div class="row">
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">

            <div class="panel panel-default panel-filter">
                <div class="panel-heading">
                    <h3 class="panel-title">Фильтрация товаров</h3>
                </div>
                <div class="panel-body">
                    {% include 'includes/category_filter.jinja' with context %}

                </div>
            </div>


        </div>
        <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9 index-goods category-items">
        {% if products %}
            <div class="category-paginator">
                <div class="category-paginator-top">
                    <div class="row">
                        <div class="col-xs-4">С {{ products.start_index() }} до {{ products.end_index() }}
                            из {{ products.paginator.count }}</div>
                        <div class="col-xs-4 text-center paginate">Страница: {% if products.has_previous() %}
                            <a href="?page={{ products.previous_page_number() }}">&larr;</a>{% endif %}
                            {% for page in products.paginator.page_range %}
                                {% if page == products.number %}
                                    {{ page }}
                                {% else %}
                                    <a href="?page={{ page }}">{{ page }}</a>
                                {% endif %}

                            {% endfor %}

                            {% if products.has_next() %}
                                <a href="?page={{ products.next_page_number() }}">&rarr;</a>
                            {% endif %}</div>
                        <div class="col-xs-4 text-right">Показать
                            <select name="show-count" id="">
                                <option value="30">30</option>
                                <option value="60">60</option>
                                <option value="90">90</option>
                                <option value="150">150</option>
                                <option value="all">Все</option>
                            </select>
                            на странице
                        </div>
                    </div>
                </div>
                <div class="category-paginator-bottom">
                    <div class="row">
                        <div class="col-xs-6"></div>
                        <div class="col-xs-6 text-right">Сортировать по
                            <select name="products-sort" id="">
                                <option value="-date">Дате добавления &darr;</option>
                                <option value="date">Дате добавления &uarr;</option>
                                <option value="-price">Цене &darr;</option>
                                <option value="price">Цене &uarr;</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}
            <div class="row">
                {% if products %}


                    {% for product in products %}



                        <div class="col-md-4 col-xs-4 col-sm-4 col-lg-4">
                            <div class="thumbnail">
                                {% set im = product.main_image()|thumbnail("420x420") %}
                                <a href="{{ product.get_absolute_url() }}"><img src="/static/{{ im.url }}"
                                                                                class="img-responsive"></a>

                                <div class="caption">
                                    <div class="title">
                                        <a href="{{ product.get_absolute_url() }}">
                                            {{ product.title }}
                                        </a>
                                    </div>
                                    <div class="price">
                                        {{ product.min_price() }} ₸
                                    </div>
                                    {% if product.in_stock() %}


                                        <div class="state-yes">
                                            <span class="glyphicon glyphicon-ok-sign" aria-hidden="true"></span> Товар
                                            есть в наличии
                                        </div>
                                    {% else %}
                                        <div class="state-no">
                                            {#                              TODO: Товар на заказ#}
                                            <span class="glyphicon glyphicon-ok-sign" aria-hidden="true"></span> Товара
                                            нет в наличии
                                        </div>
                                    {% endif %}
                                    <div class="in-cart">
                                        {#                TODO: Сделать кнопку заказать#}
                                        {% if product.in_stock() %}
                                            <a class="btn btn-warning btn-block"
                                               href="/store/cart/add/?pk={{ product.variations.filter(in_stock__gt=0).order_by('price').first().pk }}&count=1&next={{ request.get_full_path()|urlencode }}"><span><span
                                                    class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> Добавить в корзину</span></a>
                                        {% else %}
                                            <a class=" btn btn-danger btn-block order-order-link" href="#order-form" data-itemid="{{ product.pk }}"><span><span
                                                    class="glyphicon glyphicon-import" aria-hidden="true"></span> Заказать</span></a>
                                        {% endif %}
                                    </div>
                                </div>


                            </div>
                        </div>
                    {% endfor %}

                {% else %}
                    <div class="alert alert-warning alert-dismissable">
                        <h4>Список товаров пуст</h4>

                        <p>Товары в данной категории или с выбранными параметрами отсутствуют. Выберите другую
                            категорию, либо сбросьте фильтр параметров.</p>

                        <p><a class="btn btn-warning" href="/">Перейти на главную страницу</a>
                            {% if category %}
                            <a class="btn btn-link"
                                                                                                  href="{{ category.get_absolute_url() }}">или
                            отменить фильтрацию</a>
                            {% endif %} </p>
                    </div>
                {% endif %}

            </div>

        {% if products %}


        <div class="category-paginator">
                <div class="category-paginator-top">
                    <div class="row">
                        <div class="col-xs-4">С {{ products.start_index() }} до {{ products.end_index() }}
                            из {{ products.paginator.count }}</div>
                        <div class="col-xs-4 text-center paginate">Страница: {% if products.has_previous() %}
                            <a href="?page={{ products.previous_page_number() }}">&larr;</a>{% endif %}
                            {% for page in products.paginator.page_range %}
                                {% if page == products.number %}
                                    {{ page }}
                                {% else %}
                                    <a href="?page={{ page }}">{{ page }}</a>
                                {% endif %}

                            {% endfor %}

                            {% if products.has_next() %}
                                <a href="?page={{ products.next_page_number() }}">&rarr;</a>
                            {% endif %}</div>
                        <div class="col-xs-4 text-right">Показать
                            <select name="show-count" id="">
                                <option value="30">30</option>
                                <option value="60">60</option>
                                <option value="90">90</option>
                                <option value="150">150</option>
                                <option value="all">Все</option>
                            </select>
                            на странице
                        </div>
                    </div>
                </div>
                <div class="category-paginator-bottom">
                    <div class="row">
                        <div class="col-xs-6"></div>
                        <div class="col-xs-6 text-right">Сортировать по
                            <select name="products-sort" id="">
                                <option value="-date">Дате добавления &darr;</option>
                                <option value="date">Дате добавления &uarr;</option>
                                <option value="-price">Цене &darr;</option>
                                <option value="price">Цене &uarr;</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
                {% endif %}

        </div>
    </div>


{% endblock %}