{% extends "layout/default.html" %}

{% block title%}{{ show.metadata.title }}{% endblock %}

{% block content -%}

<h1 class="article-title">
	{{ show.metadata.title }}
</h1>

<p>
	Last updated: {{ show.last_updated()|pretty_date }}
</p>

<button onclick="document.querySelectorAll('summary').forEach(e => e.click())">Epand All</button>

<div class="tv-show">
	{% for episode in show.episodes %}
		<details>
			<summary>
				<h2>{{ episode.title }}</h2>
				<span class="episode-watched">
					Watched:
					<time datetime="{{ episode.date|iso_date }}">
						{{ episode.date|pretty_date }}
					</time>
				</span>
			</summary>
			<div class="article-content">
				{{ episode.content|safe }}
			</div>
		</details>
	{% endfor %}
</div>

{%- endblock %}