{% load i18n static sass_tags sekizai_tags %}{% spaceless %}

{% if infinite_scroll %}
	{% addtoblock "css" %}<link href="{% sass_src 'shop/css/paginator.scss' %}" rel="stylesheet" type="text/css" />{% endaddtoblock %}
	{% addtoblock "js" %}<script src="{% static 'node_modules/angular-inview/angular-inview.js' %}"></script>{% endaddtoblock %}
	{% add_data "ng-requires" "angular-inview" %}

	{% if paginator.display_page_controls %}
<div class="row" ng-if="catalog.count===undefined">
	<div class="col-xs-12 text-center" in-view="$inview && loadMore()">{{ paginator.to_html }}</div>
</div>
	{% endif %}

<div class="row" ng-cloak ng-if="catalog.count>=0">
	<div class="col-xs-12 text-center" ng-if="catalog.count>0">
		<ul class="pager">
			<li ng-if="isLoading"><span>{% trans "Loading more products" %}&emsp;<i class="glyphicon glyphicon-refresh glyphicon-spin"></i></span></li>
			<li ng-if="!isLoading"><i in-view="$inview && loadMore()">&nbsp;</i></li>
		</ul>
	</div>
	<div class="col-xs-12 text-center" ng-if="catalog.count===0"><h2>{% trans "No products found" %}</h2></div>
</div>

{% else %}

	{% if paginator.display_page_controls %}
<div class="row">
	<div class="col-xs-12 text-center">{{ paginator.to_html }}</div>
</div>
	{% endif %}

{% endif %}

{% endspaceless %}
