{% macro card_generic(link, thumbnail, title='') -%}
	<div class="card">
		<div class="card-main">
			<img class="thumb" src="{{ thumbnail or "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300' fill='%23fff'><circle r='30' cx='80' cy='150' fill='%23fff' stroke='%23000'/><circle r='30' cx='150' cy='150' fill='%23fff' stroke='%23000'/><circle r='30' cx='220' cy='150' fill='%23fff' stroke='%23000'/></svg>"}}">
			<div class="title">{{ title | e }}</div>
			<a class="link-main" href="{{ link }}" title="{{ title | e }}"></a>
		</div>
		<div class="infobar">
			{{ caller() }}
		</div>
	</div>
{%- endmacro %}

{% macro card(video_id, title='', advanced_text='', pinned="undefined", advanced_title='', post_url=None) -%}
	{% set caller_ = caller %}
	{% call card_generic("/watch?v="~video_id, "https://i.ytimg.com/vi/"~video_id~"/mqdefault.jpg", title) %}
		{{ caller_() }}
		<details class="advanced"><summary title="{{advanced_title}}">{{ advanced_text }}</summary>
		<div class="details">
			{% if post_url %}
			{{ emoji_link("comments", post_url, False) }}
			{%endif%}
			{% if pinned != "undefined" %}
			{{ emoji_button("pin", video_id, pinned, False) }}
			{{ emoji_button("hide", video_id, False, False) }}
			{%endif%}
			{{ emoji_link("audio", video_id, False) }}
			{{ emoji_link("raw", video_id, False) }}
			{{ emoji_link("json", video_id, False) }}
		</div></details>
	{% endcall %}
{%- endmacro %}

{% macro dummycard() -%}
	{% for _ in range(4) %}
	<div class="dummy card"></div>
	{% endfor %}
{%- endmacro %}

{% macro infobar_subscriptions(video_id, channel_id, author) -%}
	<a class="info-main" href="/channel/{{ channel_id }}">{{ author | e }}</a>
{%- endmacro %}

{% macro emoji_button(action, subject, reverse=False, text=False) -%}
	{% set icons = {
		'pin': ['&#x1f4cc;&#xFE0F;', '&#x1f4cc;&#xFE0F;&#8416;'],
		'hide': ['&#x1f4a8;&#xFE0F;', ''],
		'subscribe': ['&#128221;&#xFE0F;', '&#128465;&#xFE0F;'],
	} %}
	{% set texts = {
		'pin': ['pin to subscription feed', 'unpin'],
		'hide': ['hide video', ''],
		'subscribe': ['subscribe', 'unsubscribe'],
	} %}
	{% set actions = {
		'pin': 'youtube.feed_post',
		'hide': 'youtube.feed_post',
		'subscribe': 'youtube.manage_subscriptions',
	} %}
	<form method=post action="{{ url_for(actions[action]) }}" class="emoji-form">
		<input type="hidden" name="{{ 'un' if reverse }}{{ action }}" value="{{ subject }}">
		<label title="{{ texts[action][reverse] }}">
			<input type="submit" hidden>
			<span class="emoji">{{ icons[action][reverse] }}</span>{#
			#}<span class="notemoji">{{ texts[action][reverse] if text }}</span>
		</label>
	</form>
{%- endmacro %}
{% macro emoji_link(action, subject, text=False) -%}
	{% set icons = {
		'raw': '&#x1F39E;&#xFE0F;',
		'json': '&#x1f4a1;',
		'audio': '&#x1f3a7;',
		'comments': '&#x1f4ac;',
	} %}
	{% set texts = {
		'raw': 'show raw video',
		'json': 'view json metadata',
		'audio': 'listen to audio only',
		'comments': 'view comments',
	} %}
	{% set actions = {
		'raw': '/watch?v='~subject~'&show=raw',
		'json': '/watch?v='~subject~'&show=json',
		'audio': '/watch?v='~subject~'&show=audio',
		'comments': 'https://old.reddit.com'~subject,
	} %}
	<a href="{{ actions[action] }}" title="{{ texts[action] }}">{#
		#}<span class="emoji">{{ icons[action] }}</span>{#
		#}<span class="notemoji">{{ texts[action] if text }}</span>
	</a>
{%- endmacro %}

{% macro pagination(text, fields, direction) -%}
	<a href="?{{ querystring_page(fields) }}" class="pagination {{ 'next' if direction > 0 else 'prev' }}">{{ text }}</a>
{%- endmacro %}