{% extends "base.html" %}
{% block title %}
	Watch {{show.name}} Now - on Episodes.Community!
{% endblock %}

{% block meta %}
	{{ block.super }}
	<meta property="og:title" content="{{show.name}}">
	<meta property="og:type" content="video.tv_show">
	<meta property="og:image" content="/media/uploaded_resources/{{show.artwork}}">
	<meta property="og:url" content="https://{{show.abbr}}.episodes.community/">
{% endblock %}

{% block content %}
<section class="show-details">
	<div class="banner" style="background-image: url(/media/uploaded_resources/{{show.banner}});"></div>
	<div class="banner-cover">
		<div class="artwork">
			<img src="/media/uploaded_resources/{{show.artwork}}">
		</div>
		<div class="details">
			<h1>{{show.name}}</h1>
			<p class="description">
				{{show.description}}
			</p>
			<!--<div class="data">
				<a class="imdb" href="{{show.imdb}}" target="_blank">IMDb Page</a>
				<div class="stats">
					<div class="param">Seasons</div>
					<div class="value">{{seasons|length}}</div>
					<div class="param">Episodes</div>
					<div class="value">{{episodes|length}}</div>
				</div>
			</div>-->
		</div>
	</div>
</section>
<section class="seasons">
	<h1>Watch Now</h1>
	{% for season in seasons %}
		<div class="season" data-season="{{season.number}}">
			<div class="season-name">{% if season.name %}{{season.number}} - {{season.name}}{% else %}Season {{season.number}}{%endif%}</div>
			<div class="episodes">
				{% for episode in season.episodes.all %}
					<a class="episode" data-season="{{season.number}}" data-number="{{episode.episode}}" data-title="{{episode.name}}" href="episode/{{season.number}}/{{episode.episode}}-{{episode.name|slugify}}">{{episode.episode}} - {{episode.name}}
					<span class="submission_cnt">{{episode.submissions.all|length}} Available Links</span>
					</a>
				{% endfor %}
			</div>
		</div>
	{% endfor %}
</section>
{% endblock %}