{% extends "base.html.j2" %}
{% import 'macros.imp.j2' as macros %}

{% block favicon %}
{{ super() }}
<link rel="stylesheet" href="{{ url_for('browse.static', filename="style.css") }}">
{% endblock %}

{% block title %}
{% if rows is not none %}{{ query | e }} &mdash; Search results
{% else %}Search Youtube Videos{% endif %}
{% endblock %}

{% block content %}
	<form method=get action=/search id="search">
		<div id="main">
		<input id="box" name=q placeholder="Search" value="{{ query | e if query }}">
		<input id="go" type=submit value="&#x1F50D;&#xFE0E;" title="search!">
		</div>
		<details id="filters"><summary>Filters</summary><div id="container">
			<select name="sort">
				<option value="">sort by...</option>
				<option value="relevance">relevance</option>
				<option value="rating">rating</option>
				<option value="date">date</option>
				<option value="views">views</option>
			</select>
			<select name="date">
				<option value="">upload date...</option>
				<option value="hour">hour</option>
				<option value="day">day</option>
				<option value="week">week</option>
				<option value="month">month</option>
				<option value="year">year</option>
			</select>
			<select name="type">
				<option value="">type...</option>
				<option value="video">video</option>
				<option value="channel">channel</option>
				<option value="playlist">playlist</option>
				<option value="movie">movie</option>
				<option value="show">show</option>
			</select>
			<select name="len">
				<option value="">duration...</option>
				<option value="short">0-4 minutes</option>
				<option value="medium">4-20 minutes</option>
				<option value="long">20+ minutes</option>
			</select>
			<select name="feature">
				<option value="">feature...</option>
				<option value="ccommons">creative commons<!-- licensed--></option>
				<option value="is_hd">HD videos<!-- only--></option>
				<option value="subtitles">subtitled</option>
				<option value="live">livestreams</option>
				<option value="verbatim">no spellcheck</option>
			</select>
		</div></details>
	</form>

{% if rows is not none %}
	{{ super() }}

{# TODO: this is mostly copy-pasted (changed video infobar) from watch.j2's info/endcard section -- dedup! #}
<!-- not implemented warning:--><div style="background:red">{%for x in rows|selectattr('content.error')%}{{x.content.error}}{%endfor%}</div>
	<div class="cards">
	{% for card in rows %}
	{{ macros.typed_card(card) }}
	{% endfor %}
	{{ macros.dummycard() }}
	</div>

	<div class="pagination-container">
	{{ macros.more({'continuation': continuation}) if continuation }}
	</div>
{% else %}
	please type a search query.
{% endif %}
{% endblock %}

{% block footer %}
<hr>
{% endblock %}