{% extends "base.html" %}
{% 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">
	{% 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 episodes %}
					{% if episode.season == season %}
						<a class="episode" data-season="{{season.number}}" data-number="{{episode.episode}}" data-title="{{episode.name}}" href="episode/{{season.number}}/{{episode.episode}}">{{episode.episode}} - {{episode.name}}</a>
					{% endif %}
				{% endfor %}
			</div>
		</div>
	{% endfor %}
</section>
{% endblock %}