{% 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 (through invidio.us)" value="{{ search_query | e }}">
		<input type=hidden name=provider value="invidio.us:443">
		<!--input type=submit value="?"-->
	</form>

{% if rows is not none %}
	{{ super() }}
	<div class="cards">
		{% for row in rows %}
			{% call macros.card(row.videoId, row.title, row.publishedText) %}
				{{ macros.infobar_subscriptions(row.videoId, row.authorId, row.author) }}
			{% endcall %}
		{% else %}
			no more results.
		{% endfor %}
		{{ macros.dummycard() }}
	</div>

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

{% block footer %}
<hr>
This page is proxied through invidio.us.
{% endblock %}