{% extends "default.html" %}

{% block pagetype %}search{% endblock %}

{% block title %}
<title>Search for "{{query}}" - {{'SITE_NAME' | app_config}}"</title> <meta name="description" content="{{total}} result{{'s' if total != 1 else ''}}">
{% endblock %}

{% block subHeader %}
<div class="relative max-w-screen-2xl mx-auto px-4 py-4 grid grid-cols-12 rounded-t">
	<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-t from-gray-300 to-gray-200 rounded-t sub-header-shadow"></div>
	<div class="relative col-span-full flex items-center">
		<div>
			<h1 class="font-bold text-xl font-heading leading-normal">
				Search Results: "{{query}}"
			</h1>
			<div class="flex space-x-3 divide-x divide-gray-400">
				<ul class="text-gray-700 text-xs flex items-center space-x-3 leading-normal">
					<li>
						<a class="{% if '/posts/' in request.path %}font-bold text-red-600{% endif %}" href="/search/posts/?sort={{sort}}&q={{query | urlencode}}&t={{t}}">
							Posts
						</a>
					</li>
					<li>
						<a class="{% if '/comments/' in request.path %}font-bold text-red-600{% endif %}" href="/search/comments/?sort={{sort}}&q={{query | urlencode}}&t={{t}}">
							Comments
						</a>
					</li>
					<li>
						<a class="{% if '/users/' in request.path %}font-bold text-red-600{% endif %}" href="/search/users/?sort={{sort}}&q={{query | urlencode}}&t={{t}}">
							Users
						</a>
					</li>
				</ul>
				<small class="pl-3 block text-gray-500">
					<strong>{{ total }}</strong>
					{{ sort }} result {{ '' if total == 1 else 's' }} matching
					<strong>"{{query}}"</strong> {{ 'from all time' if t=='all' else 'in the last' }}
					{% if t != 'all' %}<span class="font-bold">{{ t }}</span>{% endif %}
				</small>
			</div>
		</div>
		{% if not '/users/' in request.path %}
		<div class="ml-auto">
			{% include "/dropdowns/SearchSorts.html" %}
		</div>
		{% endif %}
	</div>
</div>
{% endblock %}

{% block content %}

<div class="col-span-full mt-8">
	<p class="text-gray-500 text-sm mb-1">
		Advanced search parameters (with examples): "author:quadnarca", "domain:reddit.com", "over18:true"
	</p>
	<!-- <div class="text-muted text-small mb-1">Showing {% block listinglength %}{{listing | length}}{% endblock %} of {{total}} result{{'s' if total != 1 else ''}} for</div> -->
</div>

{% if not '/users/' in request.path %}

<div class="flex-row tab-bar sticky d-none">

	<ul class="nav post-nav mr-auto">
		<li class="nav-item">
			<a class="nav-link{% if sort=='top' %} active{% endif %}" href="?sort=top&q={{query | urlencode}}&t={{t}}"><i class="fas fa-arrow-alt-circle-up"></i>Top</a>
		</li>
		<li class="nav-item">
			<a class="nav-link{% if sort=='bottom' %} active{% endif %}" href="?sort=bottom&q={{query | urlencode}}&t={{t}}"><i class="fas fa-arrow-alt-circle-down"></i>Bottom</a>
		</li>
		<li class="nav-item">
			<a class="nav-link{% if sort=='new' %} active{% endif %}" href="?sort=new&q={{query | urlencode}}&t={{t}}"><i class="fas fa-sparkles"></i>New</a> 
		</li>
		<li class="nav-item">
			<a class="nav-link{% if sort=='old' %} active{% endif %}" href="?sort=old&q={{query | urlencode}}&t={{t}}"><i class="fas fa-book"></i>Old</a> 
		</li>
		<li class="nav-item">
			<a class="nav-link{% if sort=='fiery' %} active{% endif %}" href="?sort=fiery&q={{query | urlencode}}&t={{t}}"><i class="fas fa-bullhorn"></i>Controversial</a>
		</li>
		<li class="nav-item ">
			<a class="nav-link {% if sort=='comments' %} active{% endif %}" href="/?sort=comments&q={{query | urlencode}}&t={{t}}"><i class="fas fa-comments"></i>Comments</a>
		</li>
		<li class="nav-item">
			<a class="nav-link{% if sort=='random' %} active{% endif %}" href="?sort=random&q={{query | urlencode}}&t={{t}}"><i class="fas fa-arrow-alt-circle-down"></i>Random</a>
		</li>
	</ul>

</div>
{% endif %}

<div class="row no-gutters">
	<div class="col">
		<div class="flex-row box-shadow-bottom d-flex justify-content-center justify-content-md-between align-items-center">
			<ul class="nav settings-nav">
				<li class="nav-item">
					<a class="nav-link{% if '/posts/' in request.path %} active{% endif %}" href="/search/posts/?sort={{sort}}&q={{query | urlencode}}&t={{t}}">Posts</a>
				</li>
				<li class="nav-item">
					<a class="nav-link{% if  '/comments/' in request.path %} active{% endif %}" href="/search/comments/?sort={{sort}}&q={{query | urlencode}}&t={{t}}">Comments</a>
				</li>
				<li class="nav-item">
					<a class="nav-link{% if  '/users/' in request.path %} active{% endif %}" href="/search/users/?sort={{sort}}&q={{query | urlencode}}&t={{t}}">Users</a>
				</li>
			</ul>
		</div>
	</div>
</div>

<div class="row no-gutters">

	<div class="col-12">

		<div class="posts" id="posts">

			{% block listing_template %}
			{% include "submission_listing.html" %}
			{% endblock %}

		</div>
	</div>
</div>
{% endblock %}

{% block pagenav %}
<nav aria-label="Page navigation">
	<ul class="pagination pagination-sm mb-0">
		<li class="page-item{% if page==1 %} disabled{% endif %}">

			<small><a class="page-link" href="?sort={{sort}}&q={{query | urlencode}}&t={{t}}&page={{page-1}}" tabindex="-1"{% if page==1 %} aria-disabled="true"{% endif %}>Back</a></small>
		</li>
		<li class="page-item{% if not next_exists %} disabled{% endif %}">
			<small><a class="page-link" href="?sort={{sort}}&q={{query | urlencode}}&t={{t}}&page={{page+1}}">Next</a></small>

		</li>
	</ul>
</nav>

{% endblock %}