{% extends "base.html.j2" %}
{% import 'macros.imp.j2' as macros %}
{% block title %}{{ title | e }}{% endblock %}

{% block content %}
<!--
<img height=200 align=left src="{{ channel_img[channel_img.largest] }}" style="margin:.5em">
-->
<h1>{{ title | e }} <small>{{ macros.emoji_button("subscribe", channel_id, is_subscribed) if channel_id }}</small></h1>
<details><summary>About</summary><p style="white-space: pre-wrap">{{ channel_desc }}</details>
<div style=clear:both></div>
<div id="subpages" style="display:flex;margin:1em">
	<div style="flex:1">
		<a href="{{ url_for('browse.channel', channel_id=channel_id, subpage='videos') }}">videos</a> |
		<a href="{{ url_for('browse.channel', channel_id=channel_id, subpage='playlists') }}">playlists</a> |
		<form method=get style="display:inline" action="{{ url_for('browse.channel', channel_id=channel_id, subpage='search')}}">
			<input style="background:0;color:#eee;border:0" type=text name=q value="{{ request.args.get('q', '')}}" placeholder="search channel">
			<!-- <input type="submit" value=">"> -->
		</form>
	</div>
	{% if subpage != "search" %}
	<form method=get style="flex:1;text-align:right" class="more-actions">
		{% if subpage == "videos" %}
		<label><input type=submit hidden name="sort" value="newest" {{ 'selected' if sort == 'newest' }}>newest first</label> |
		<label><input type=submit hidden name="sort" value="oldest" {{ 'selected' if sort == 'oldest' }}>oldest first</label> |
		<label><input type=submit hidden name="sort" value="popular" {{ 'selected' if sort == 'popular' }}>most popular</label>
		{% elif subpage == "playlists" %}
		<label><input type=submit hidden name="sort" value="newest" {{ 'selected' if sort == 'newest' }}>last created</label> |
		<label><input type=submit hidden name="sort" value="modified" {{ 'selected' if sort == 'modified' }}>last modified</label>
		{% endif %}
	</form>
	{% endif %}
</div>
<div class="cards">
        {% for card in rows %}
	{{ macros.typed_card(card) }}
        {% endfor %}
	{{ macros.dummycard() }}
</div>

{% if not rows|length %}no more results{% endif %}

<div class="pagination-container">
	{{ macros.pagination("more", {'continuation': continuation}, +1) if continuation }}
</div>
{% endblock %}