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

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

{% block content %}
	<style>
	[name=q]::placeholder{
	  color:#eee;
	  opacity: .7;
	}
	[name=q] {
	  margin:1.5em auto;
	  display:block;
	  width:60em;
	  max-width:100%;
	  min-width:30em;
	  box-sizing:border-box;
	  border:0;
	  background:#666;
	  color:#eee;
	  padding:.2em
	}
	</style>
	<form method=get action=/search>
		<input name=q placeholder="Search" value="{{ query | e if query }}">
		<!--input type=submit value="?"-->
	</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 %}
	{% set c = card.content %}
	{% if card.type == 'VIDEO' %}
		{% call macros.card(c.video_id, c.title, c.length) %}
			{{ macros.infobar_subscriptions(c.video_id, c.channel_id, c.author) }}
			<small>{{ c.published if c.published }}&nbsp;</small>
		{% endcall %}
	{% elif card.type == 'CHANNEL' and c.channel_id != channel_id %}
		{% call macros.card_generic("/channel/"~c.channel_id, c.icons[c.icons.largest] if 'icons' in c else '', c.title) %}
			<span class=channel>Channel</span>
			<span class=advanced>{{ c.subscribers }}</span>
		{% endcall %}
	{% elif card.type == 'PLAYLIST' %}
		{% call macros.card_generic("/playlist?list="~c.playlist_id, "https://i.ytimg.com/vi/"~c.video_id~"/mqdefault.jpg", c.title) %}
			<span class=channel>{{ c.author }}</span>
			<span class=advanced>{{ c.n_videos }} videos</span>
		{% endcall %}
	{% elif card.type == 'WEBSITE' %}
		{% call macros.card_generic(c.url, c.icons[250] if 'icons' in c else '', c.title) %}
			<span class=channel>{{ c.domain }}</span>
		{% endcall %}
	{% endif %}
	{% endfor %}
	{{ macros.dummycard() }}
	</div>

	<div class="pagination-container">
	{% if page > 1 %}
	{{ macros.pagination("previous", {'page':(-1,1)}, -1) }}
	{% endif %}
	{{ macros.pagination("next", {'page':(+1,1)}, +1) }}
	</div>
{% else %}
	please type a search query.
{% endif %}
{% endblock %}

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