<div class="flex items-center space-x-2">
	<div class="dropdown">
		<button class="block px-4 py-2 bg-gradient-to-t from-gray-200 to-gray-100 focus:from-gray-100 focus:to-gray-200 border border-gray-300 rounded-md text-shadow shadow-inset-t-white-10 text-sm font-bold text-gray-700 focus:text-gray-900 focus:shadow-inner focus:outline-none dropdown-toggle" type="button" id="dropdownSearchSortsButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			{% if t=="hour" %}<i class="fas fa-clock text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
			{% if t=="day" %}<i class="fas fa-calendar-day text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
			{% if t=="week" %}<i class="fas fa-calendar-week text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
			{% if t=="month" %}<i class="fas fa-calendar-alt text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
			{% if t=="year" %}<i class="fas fa-calendar text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
			{% if t=="all" %}<i class="fas fa-infinity text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
			{{t | capitalize}}
		</button>
		<ul class="dropdown-menu w-56 bg-gray-900 rounded-md shadow-lg" aria-labelledby="dropdownSearchSortsButton" x-placement="bottom-start">
			<li class="{% if t=='hour' %}hidden{% endif %}">
				<a class="dropdown-item dropdown-item-primary" href="?sort={{sort}}&t=hour">
					<i class="fas fa-clock fa-sm fa-fw mr-4"></i>Hour
				</a>
			</li>
			<li class="{% if t=='day' %}hidden{% endif %}">
				<a class="dropdown-item dropdown-item-primary" href="?sort={{sort}}&t=day">
					<i class="fas fa-calendar-day fa-sm fa-fw mr-4"></i>Day
				</a>
			</li>
			<li class="{% if t=='week' %}hidden{% endif %}">
				<a class="dropdown-item dropdown-item-primary" href="?sort={{sort}}&t=week">
					<i class="fas fa-calendar-week fa-sm fa-fw mr-4"></i>Week
				</a>
			</li>
			<li class="{% if t=='month' %}hidden{% endif %}">
				<a class="dropdown-item dropdown-item-primary" href="?sort={{sort}}&t=month">
					<i class="fas fa-calendar-alt fa-sm fa-fw mr-4"></i>Month
				</a>
			</li>
			<li class="{% if t=='year' %}hidden{% endif %}">
				<a class="dropdown-item dropdown-item-primary" href="?sort={{sort}}&t=year">
					<i class="fas fa-calendar fa-sm fa-fw mr-4"></i>Year
				</a>
			</li>
			<li class="{% if t=='all' %}hidden{% endif %}">
				<a class="dropdown-item dropdown-item-primary" href="?sort={{sort}}&t=all">
					<i class="fas fa-infinity fa-sm fa-fw mr-4"></i>All
				</a>
			</li>
		</ul>
	</div>
	<div class="dropdown">
		<button class="block px-4 py-2 bg-gradient-to-t from-gray-200 to-gray-100 focus:from-gray-100 focus:to-gray-200 border border-gray-300 rounded-md text-shadow shadow-inset-t-white-10 text-sm font-bold text-gray-700 focus:text-gray-900 focus:shadow-inner focus:outline-none dropdown-toggle" type="button" id="dropdownSearchSortsTypeButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			{% if sort=="hot" %}<i class="fas fa-fire text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
			{% if sort=="top" %}<i class="fas fa-arrow-alt-circle-up text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
			{% if sort=="bottom" %}<i class="fas fa-arrow-alt-circle-down text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
			{% if sort=="new" %}<i class="fas fa-sparkles text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
			{% if sort=="old" %}<i class="fas fa-book text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
			{% if sort=="controversial" %}<i class="fas fa-bullhorn text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
			{% if sort=="comments" %}<i class="fas fa-comments text-gray-500 fa-sm fa-fw mr-1"></i>{% endif %}
			{{sort | capitalize}}
		</button>
		<ul class="dropdown-menu w-56 bg-gray-900 rounded-md shadow-lg" aria-labelledby="dropdownSearchSortsTypeButton" x-placement="bottom-start">
			<li class="{% if sort == 'top' %}hidden{% endif %}">
				<a class="dropdown-item dropdown-item-primary" href="?sort=top&q={{query | urlencode}}&t={{t}}">
					<i class="fas fa-arrow-alt-circle-up fa-sm fa-fw mr-4"></i>Top
				</a>
			</li>
			<li class="{% if sort == 'bottom' %}hidden{% endif %}">
				<a class="dropdown-item dropdown-item-primary" href="?sort=bottom&q={{query | urlencode}}&t={{t}}}">
					<i class="fas fa-arrow-alt-circle-down fa-sm fa-fw mr-4"></i>Bottom
				</a>
			</li>
			<li class="{% if sort == 'new' %}hidden{% endif %}">
				<a class="dropdown-item dropdown-item-primary" href="?sort=new&q={{query | urlencode}}&t={{t}}">
					<i class="fas fa-sparkles fa-sm fa-fw mr-4"></i>New
				</a>
			</li>
			<li class="{% if sort == 'old' %}hidden{% endif %}">
				<a class="dropdown-item dropdown-item-primary" href="?sort=old&q={{query | urlencode}}&t={{t}}">
					<i class="fas fa-book fa-sm fa-fw mr-4"></i>Old
				</a>
			</li>
			<li class="{% if sort == 'controversial' %}hidden{% endif %}">
				<a class="dropdown-item dropdown-item-primary" href="?sort=fiery&q={{query | urlencode}}&t={{t}}">
					<i class="fas fa-bullhorn fa-sm fa-fw mr-4"></i>Controversial
				</a>
			</li>
			<li class="{% if sort == 'comments' %}hidden{% endif %}">
				<a class="dropdown-item dropdown-item-primary" href="?sort=comments&q={{query | urlencode}}&t={{t}}">
					<i class="fas fa-comments fa-sm fa-fw mr-4"></i>Comments
				</a>
			</li>
			<li class="{% if sort == 'random' %}hidden{% endif %}">
				<a class="dropdown-item dropdown-item-primary" href="?sort=random&q={{query | urlencode}}&t={{t}}">
					<i class="fas fa-question fa-sm fa-fw mr-4"></i>Random
				</a>
			</li>
		</ul>
	</div>
</div>