{% extends "base.html" %}
{% block main %}

<div class="film">
	<div class="info">
		<h1>
			<span>{{ film.data.title | safe }}</span>
			<span>{{ film.data.title_zh | safe }}</span>
		</h1>
		<h2>
			{% for director in film.data.director %}
			{{ director|safe }}<br>
			{% endfor %}
		</h2>
		<p>{{ film.data.summary|safe }}</p>
		<div class="details">
			Runtime: {{ film.duration }},
			Year: {{ film.data.date}},
			Artist Bio: {{ film.data.bio|safe }}
		</div>
	</div>
	<video src="{{ settings.TIMELINE_PREFIX }}{{ film.padma_id }}/loop.mp4" autoplay loop muted></video>
	<div class="play">
		<div>
			<a href="" id="play-fullscreen">Play</a>
		</div>
		<div class="texts">
			{% for text in film.related_texts %}
			<div class="text">
				<a href="{{ text.get_absolute_url }}">
					{{ text.title }}<br>
					{{ text.byline }}
				</a>
			</div>
			{% endfor %}
		</div>
		<div>
			<a href="https://pad.ma/{{ film.padma_id }}/info" target="_blank">Open on pad.ma</a>
		</div>
	</div>
</div>
{% endblock %}

{% block end %}
		<script>
			var film = {{ film.json | safe }};
		</script>
		<script src="{% static 'js/film.js' %}"></script>
{% endblock %}