{% extends "templates/web.html" %}

{% block header_actions %}
{% include 'templates/includes/product_search_box.html' %}
{% endblock %}

{% block breadcrumbs %}
    {% include "templates/includes/breadcrumbs.html" %}
{% endblock %}

{% block page_content %}
<div class="item-group-content">
	<div>
		{% if slideshow %}<!-- slideshow -->
		{% include "templates/includes/slideshow.html" %}
		{% endif %}
		{% if description %}<!-- description -->
		<div itemprop="description">{{ description or ""}}</div>
		{% endif %}
	</div>
	<div>
		{% if items %}
		<div id="search-list" class="row">
			{% for item in items %}
				{{ item }}
			{% endfor %}
		</div>
			<div class="text-center">
				{% if frappe.form_dict.start|int > 0 %}
				<a class="btn btn-default" href="{{ pathname }}?start={{ frappe.form_dict.start|int - 24 }}">Prev</a>
				{% endif %}
				{% if items|length == 24 %}
				<a class="btn btn-default" href="{{ pathname }}?start={{ frappe.form_dict.start|int + 24 }}">Next</a>
				{% endif %}
			</div>
		{% else %}
			<div class="text-muted">No items listed.</div>
		{% endif %}
	</div>
</div>
{% endblock %}

{% block style %}
<style>
	.product-image.missing-image {
		border: 1px dashed {{ theme.border_color or "#d1d8dd" }};
	}

	.product-image.missing-image .octicon {
		color: {{ theme.border_color or "#d1d8dd" }};
	}
</style>
{% endblock %}