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

{% block favicon %}
{{ super() }}
<link rel="stylesheet" href="{{ url_for('browse.static', filename="style.css") }}">
{% endblock %}

{% 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">
	<div class="subpages">
		{% set subpage_name = {'videos': 'videos', 'streams': 'livestreams', 'shorts': 'shorts', 'playlists': 'playlists'} %}
		{% for _subpage in ('videos', 'streams', 'shorts', 'playlists') %}
			<a class="{{'bold' if subpage == _subpage in request.path}}" href="{{ url_for('browse.channel', channel_id=channel_id, subpage=_subpage) }}">{{subpage_name[_subpage]}}</a> |
		{% endfor %}
		<form method=get action="{{ url_for('browse.channel', channel_id=channel_id, subpage='search')}}">
			<input class="search-channel" type=text name=q value="{{ request.args.get('q', '')}}" placeholder="search channel">
			<!-- <input type="submit" value=">"> -->
		</form>
	</div>
	{% if subpage != "search" %}
	<div class="sort-order">
		{% if subpage in ("videos", "streams", "shorts") %}
		<a href="?sort=newest" class="{{ 'bold' if sort == 'newest' }}">newest first</a> |
		<a href="?sort=popular" class="{{ 'bold' if sort == 'popular' }}">most popular</a>
		{% elif subpage == "playlists" %}
		<a href="?sort=newest" class="{{ 'bold' if sort == 'newest' }}">last created</a> |
		<a href="?sort=modified" class="{{ 'bold' if sort == 'modified' }}">last modified</a>
		{% endif %}
	</div>
	{% 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.more({'continuation': continuation}) if continuation }}
</div>
{% endblock %}