{% extends CMS_TEMPLATE %}
{% load i18n l10n sekizai_tags cms_tags pcart_core pcart_catalog thumbnail staticfiles %}

{% block extra_css %}
{% addtoblock "css" %}
<link href="{% static 'vendor/jrange/jquery.range.css' %}" media="screen" rel="stylesheet" type="text/css" />
{% endaddtoblock %}
{% endblock %}

{% block extra_js %}
{% addtoblock "js" %}
<script src="{% static 'vendor/jrange/jquery.range-min.js' %}"></script>
{% endaddtoblock %}
<script>
$(document).ready(function(){
    $('#price-input').jRange({
    from: {{min_available_price}},
    to: {{max_available_price}},
    step: 1,
    scale: [0,25,50,75,100],
    format: '%s',
    //width: 300,
    showLabels: true,
    isRange : true
});
});
</script>
{% endblock %}


{% block base_content %}
<h1>{{collection.page_title|default:collection.title}}</h1>
<div class="row">
<div class="col-md-3 col-sm-4">
    <h4>{% trans "Filters" %}</h4>
    <form method="post" action="{% url 'pcart_collection:filter-form-dispatcher' collection.slug %}">
    <p>{% trans "Vendor" %}</p>
    <ul class="list-unstyled">
    {% for tag in vendor_tags %}
    <li>{% if tag.selected %}
        <input type="checkbox" name="vendor" value="{{tag.tag}}" checked>
        <strong><a href="{{tag.url}}">{{tag.label}}</a> ({{tag.filtered}})</strong>
        {% else %}
        <input type="checkbox" name="vendor" value="{{tag.tag}}" {% if tag.filtered == 0 %}disabled{% endif %}>
            {% if tag.filtered == 0 %}<span class="text-muted">{% endif %}
            {% if tag.url %}<a href="{{tag.url}}">{% endif %}{{tag.label}}{% if tag.url %}</a>{% endif %} {% if tag.active_filter %}+{{tag.filtered}}{% else %}({{tag.filtered}}){% endif %}
            {% if tag.filtered == 0 %}</span>{% endif %}
        {% endif %}</li>
    {% endfor %}
    </ul>
    {% for tag_group in all_tags %}
    <p>{{tag_group.group_label}}</p>
    <ul class="list-unstyled">
        {% for tag in tag_group.tags %}
        <li>{% if tag.selected %}
            <input type="checkbox" name="tag" value="{{tag.tag}}" checked>
            <strong><a href="{{tag.url}}">{{tag.label|capfirst}}</a> ({{tag.filtered}})</strong>
            {% else %}
            <input type="checkbox" name="tag" value="{{tag.tag}}" {% if tag.filtered == 0 %}disabled{% endif %}>
                {% if tag.filtered == 0 %}<span class="text-muted">{% endif %}
                {% if tag.url %}<a href="{{tag.url}}">{% endif %}{{tag.label|capfirst}}{% if tag.url %}</a>{% endif %} {#tag.count#} {% if tag.active_filter %}+{{tag.filtered}}{% else %}({{tag.filtered}}){% endif %}
                {% if tag.filtered == 0 %}</span>{% endif %}
            {% endif %}</li>
        {% endfor %}
    </ul>
    {% endfor %}
        <div>
            <p>Price</p>
            <input name="price" type="hidden" id="price-input" value="{{min_selected_price|unlocalize}},{{max_selected_price|unlocalize}}" />
            <input name="price-delimiter" type="hidden" id="price-delimiter-input" value="," />

            <hr>
            Price from: ({{min_available_price|money}}) <input name="price-from" value="{{min_selected_price|unlocalize}}">
            Price to: <input name="price-to" value="{{max_selected_price|unlocalize}}"> ({{max_available_price|money}})
        </div>
        <input class="btn btn-info" type="submit" name="filter" value="Filter">
        </form>
</div>
<div class="col-md-9 col-sm-8">
{% if filtered %}
    <p>
        {% for tag in vendor_tags %}{% if tag.selected %}<a class="label label-info" href="{{tag.url}}">{{tag.label}}</a> {% endif %}{% endfor %}
        {% for tag_group in all_tags %}{% for tag in tag_group.tags %}{% if tag.selected %}<a class="label label-success" href="{{tag.url}}">{{tag_group.group_label}}: {{tag.label}}</a> {% endif %}{% endfor %}{% endfor %}</p>
{% endif %}
    <p>
    {% if variants_count > 0%}
    Found {{products.paginator.count}} products and {{variants_count}} variants.
    {% else %}
    Found {{products.paginator.count}} products.
    {% endif %}
        Price between {{min_price|money}} and {{max_price|money}}.
    </p>

<p><a href="{{page_url}}">Cheapest first</a> <a href="{{page_url}}?sort=expensive">Expensive first</a></p>
{% for product in products %}
    <h2><a href="{{product.get_absolute_url}}">{{product.title}}</a></h2>
    {% for image in product.images.all %}
    <img src="{{image.image|thumbnail_url:'collection_small'}}" title="{{image}}">
    {% endfor %}
    <p>{{product.status}}</p>
    {% with product.variants.all as variants %}
    <p>Count: {{product.filtered_variants_count|default:product.variants_count}}</p>
    {% if variants %}
        <ul>
            {% for variant in variants|sort_by_attr:'price' %}
            <li><a href="{{variant.get_absolute_url}}">{{variant.title}}</a> <span>{{variant.price|money}}</span></li>
            {% endfor %}
        </ul>
        {% with minvp=product.filtered_min_variant_price|default:product.min_variant_price maxvp=product.filtered_max_variant_price|default:product.max_variant_price %}
        <span>
            {% if minvp == maxvp %}
                {{minvp|money}}
            {% else %}
                {{minvp|money}} - {{maxvp|money}}
            {% endif %}
        </span>
        {% endwith %}
    {% else %}
        <span>{{product.price|money}}</span>
    {% endif %}
    {% endwith %}
{% endfor %}
{% include "catalog/includes/pagination.html" %}
</div>
</div>
{% endblock %}