{% extends "CHRISTMAS/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 dark:bg-none dark:bg-gray-800 rounded-t sub-header-shadow dark:border-b dark:border-gray-700"></div>
	<div class="relative col-span-full flex items-center">
		<div class="truncate">
			<h1 class="font-bold text-xl font-heading leading-normal mb-0 truncate ellipsis">
				<span class="hidden md:inline-block">Search Results:</span> "{{query}}"
			</h1>
			<div class="flex space-x-3 divide-x divide-gray-400 text-xs">
				<ul class="flex items-center space-x-3 leading-normal mb-0">
					<li>
						<a class="{{ 'font-bold text-primary' if '/posts/' in request.path else 'text-gray-500' }}" href="/search/posts/?sort={{sort}}&q={{query | urlencode}}&t={{t}}">
							Posts
						</a>
					</li>
					<li>
						<a class="{{ 'font-bold text-primary' if '/comments/' in request.path else 'text-gray-500' }}" href="/search/comments/?sort={{sort}}&q={{query | urlencode}}&t={{t}}">
							Comments
						</a>
					</li>
					<li>
						<a class="{{ 'font-bold text-primary' if '/users/' in request.path else 'text-gray-500' }}" href="/search/users/?sort={{sort}}&q={{query | urlencode}}&t={{t}}">
							Users
						</a>
					</li>
				</ul>
				<div class="hidden md:block pl-3 text-gray-500 leading-normal">
					<strong>{{ total }}</strong>
					{% if '/users/' in request.path %}
					user{{ '' if total == 1 else 's' }} found
					{% else %}
					{{ 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 %}
					{% endif %}
				</div>
			</div>
		</div>
		{% if not '/users/' in request.path %}
		<div class="ml-auto pl-3 md:pl-0">
			{% include "CHRISTMAS/dropdowns/SearchSorts.html" %}
		</div>
		{% endif %}
	</div>
</div>
{% endblock %}

{% block content %}

<div class="col-span-full px-4 md:px-0 py-4">
	<p class="text-gray-500 text-sm">
		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>

<div class="col-span-full px-4 md:px-0">
	<div class="posts" id="posts">
		{% block listing_template %}
		{% include "CHRISTMAS/submission_listing.html" %}
		{% endblock %}
	</div>
</div>
{% endblock %}

{% block pagenav %}
<div class="col-span-full">
	<ul class="flex flex-wrap items-center mb-4">
		<li>
			{% if page > 1 %}
			<small>
				<a class="block px-2 py-1 text-sm font-bold text-primary bg-gray-900" href="?sort={{sort}}&q={{query | urlencode}}&t={{t}}&page={{page-1}}" tabindex="-1" {% if page==1 %}aria-disabled="true"{% endif %}>
					Back
				</a>
			</small>
			{% else %}
			<button disabled class="block px-2 py-1 text-sm font-bold text-gray-700 bg-gray-800 cursor-not-allowed">Back</button>
			{% endif %}
		</li>
		<li>
			{% if next_exists %}
			<small>
				<a class="block px-2 py-1 text-sm font-bold text-primary bg-gray-900" href="?sort={{sort}}&q={{query | urlencode}}&t={{t}}&page={{page+1}}">
					Next
				</a>
			</small>
			{% else %}
			<button disabled class="block px-2 py-1 text-sm font-bold text-gray-700 bg-gray-800 cursor-not-allowed">Next</button>
			{% endif %}
		</li>
	</ul>
</div>
{% endblock %}