{% extends "base.html" %}
{% block head %}
	<meta name="title" content="{{ film.data.title }}"/>
	<meta name="description" content="{% for director in film.data.director %}{{ director|safe }}{% endfor %}"/>

	<meta property="og:title" content="{{ film.data.title }} {{ film.data.tile.zh }}"/>
	<meta property="og:type" content="movie"/>
	<meta property="og:url" content="https://njp.ma{{ film.get_absolute_url }}"/>
	<meta property="og:site_name" content="njp.ma"/>
	<meta property="og:description" content="{% for director in film.data.director %}{{ director|safe }}{% endfor %}"/>

	<meta property="twitter:card" content="summary_large_image"/>
	<meta property="twitter:title" content="{{ film.data.title }} {{ film.data.tile.zh }}"/>
	<meta property="twitter:description" content="{% for director in film.data.director %}{{ director|safe }}{% endfor %}"/>

{% endblock head %}
{% block body_class%}animated{% endblock %}
{% block main %}
{% comment %}
<style>
:root {
	--bg-color-1: {{ film.color_1 }};
	--bg-color-2: {{ film.color_2 }};
	--bg-color-3: {{ film.color_2 }};
	--bg-color-4: {{ film.color_4 }};
}

body {
	background-attachment: fixed;
}

</style>

{% endcomment %}
<div class="film">
	<div class="info">
		<div class="info-meta">
			<h1>
				<span class="font-bold">{{ film.data.title | safe }}</span>
			</h1>
			{% if film.data.date %}
			<div class="date">
				{{ film.data.date | safe }}
			</div>
			{% endif %}
			<div class="country">
				{{ film.data.country|default:''|join:', ' }}
			</div>
			<div class="type">
				{{ film.data.type|default:''|join:', ' }}
			</div>
			<div class="details">
				{{ film.data.description|default:''|safe }}
            </div>
			<div class="featuring">
				Featuring:
				{{ film.data.featuring|default:''|join:', ' }}
			</div>
				
		</div>	
		<div class="video-block">
			<img src="{{ stream_prefix }}/{{ film.data.items.0.id }}/timelineslitscan64pframe.jpg" class="video-fallback-block">
			<video
				id="timeline-video"
				src="{{ stream_prefix }}/{{ film.data.items.0.id }}/timelineslitscan64p.mp4"
				poster="{{ stream_prefix }}/{{ film.data.items.0.id }}/timelineslitscan64pframe.jpg"
				controlsList="nodownload"
				autoplay
				loop
				muted
				playsinline>
			</video>
		</div>
		<div class="items">
			{% for item in film.data.items %}
			<div class="item">
				<a href="play/{{  item.id }}">
					<figure>
						<div class="overlay">
							<img src="{% static 'svg/play.svg' %}">
						</div>
						<img src="{{ stream_prefix }}/{{ item.id }}/480p.jpg">
						<figcaption>
							{{ item.title | safe }}
							{% if item.date %}({{item.date | safe }}){% endif %}
						</figcaption>
					</figure>
				</a>
			</div>
			{% endfor %}
		</div>
		<div class="play">
			<div class="film-play-pandora"><a href="{{ film.pandora_url }}" target="_blank">Open in Archive</a></div>
		</div>
		{% if film.related_texts.exists %}
		<div class="texts">
			<h2>Related Assemblies</h2>
			{% for text in film.related_texts %}
			<div class="text">
				<a href="{{ text.get_absolute_url }}">
					{{ text.title | safe }}<br>
				</a>
			</div>
			{% endfor %}
		</div>
		{% endif %}
	</div>
</div>
{% endblock %}

{% block end %}
		<script>
			var film = {{ film.json | safe }};
			film.prefix = "{{ stream_prefix }}";
			var pandoraURL =  "{{ pandora_url }}";
		</script>
		{% comment %}
		<script src="{% static 'js/film.js' %}"></script>
		{% endcomment %}
{% endblock %}