{% include 'includes/header.html' %}
<script src="/static/tinysort.js"></script>
<script>
// function to switch view
function viewSwitch(){
  //set cookie
  document.cookie="view=mobile;path=/";
  //reload the page
  window.location.reload();
}
</script>
<div class="container-flex">
       <div class="switch">
		<div class="container-flex">
			<div class="row mt-auto" >
					<input type="hidden" id="search-term" name="search-term" value="{{search_term}}">
				        <div class="view_switch">
						<button class="mobile view" onclick="viewSwitch()">
					        </button>
					        <button class="desktop_set_view view" disabled>
					        </button>
				        </div>
			        </form>
		        </div>
		</div>
	</div>
</div>

<!-- page-content -->

{% if item_list %}
<p class="page_title">Search results {% if (search_term != "") %} for: {{search_term}}</p>

{% if pagination.has_prev or pagination.has_next %}
	<div class="paginate">
		{% if pagination.has_prev %}
		<div class="paginate-item">
			{% set link = search_term+'?page=' + (page-1)| string %}
	                <a href="{{link}}" class="imps button_a">Previous</a>
        	</div>
		{% endif %}
	        <div class="paginate-item">{% if pagination.has_next %}
        		{% set link = search_term+'?page=' + (page+1) | string %}
	                <a href="{{link}}" class="imps button_a">Next</a>
        	{% endif %}
	        </div>
	</div>
{% endif %}

{% else %}
</p>
{% endif %}

{% with ITEM_IMAGE_DIR=ITEM_IMAGE_DIR %}
{% include "includes/includeitemlist.html" %}
{% endwith %}

{% else %}
<p class="page_title">Sorry!</p>
<p>No items matched <b> {{search_term}}</b>
</p>
<img src="/static/images/sad_imps.png">
{% endif %}
<br>
<div>
	<a href="/search">
		<button type="button" class="imps back button_small">
			BACK
		</button>
	</a>
	or 
	<a href="/">
		<button type="button" class="imps home button_smallm">
			Home 
		</button>
	</a>
</div>
{% include 'includes/sort.html' %}
{% include 'includes/footer.html' %}