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

{% block title %}{{ title | e }}{% endblock %}
{% block favicon %}
<link rel="shortcut icon" href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" fill="%23fff"><circle r="150" cx="150" cy="150" fill="%23f40"/><path d="m150 80l80 80h-40v40h-80v-40h-40l80-80"/></svg>'>
<style>
.bad { opacity: 50% }
.bad img { filter: grayscale(100%) }
</style>
{% endblock %}

{% block content %}
{{ super() }}
<div class="cards">
{% for row in rows %}
	{% set karma = '&#x2191;' ~ row.n_karma|trim3 %}
	{% set alt = row.n_karma~' karma, '~row.n_comments~' comments' %}
	{{ '<span class=bad>' if 1 >= row.n_karma|int(10) }}
	{% call macros.card(row.video_id, row.title, karma, row.pinned, alt, row.url) %}
	<a href="{{ url_for('reddit.reddit', subreddit=row.subreddit) }}">
		/r/{{ row.subreddit | lower | e }}
	</a>
	{% endcall %}{{ '</span>' if 1>=row.n_karma|int(10) }}
{% endfor %}
{{ macros.dummycard() }}
</div>

<div class="pagination-container">
{% if before %}
{{ macros.pagination("previous", {'count':(-25,0), 'before':before, 'after': None}, -1) }}
{% endif %}
{% if after %}
{{ macros.pagination("next", {'count':(+25,0), 'after':after, 'before': None}, +1) }}
{% endif %}
</div>
{% endblock %}

{% block footer %}
<hr>
<a href="/manage/subreddits">Manage Subreddits</a>
{% for subreddit in subreddits %}
{{ "||" if loop.first else "|"}}
<a href="/r/{{ subreddit }}">/r/{{ subreddit }}</a>
{% endfor %}
{% endblock %}