{% extends "base.html" %}
{% block head %}
	<meta name="title" content="Phantasmapolis"/>
	<meta name="description" content="Looking back to the future"/>
	<meta property="og:title" content="Phantasmapolis"/>
	<meta content="https://phantas.ma/static/jpg/phantasmopolis.jpg" name="thumbnail"/>
	<meta content="https://phantas.ma/static/jpg/phantasmopolis.jpg" name="image_src"/>

	<meta property="og:url" content="https://phantas.ma/polis"/>
	<meta property="og:type" content="website"/>
	<meta property="og:title" content="Phantasmapolis" />
	<meta property="og:description" content="Looking back to the future"/>
	<meta property="og:image" content="https://phantas.ma/static/jpg/phantasmopolis.jpg"/>

	<meta property="twitter:card" content="summary_large_image"/>
	<meta property="twitter:title" content="Phantasmapolis" />
	<meta property="twitter:description" content="Looking back to the future"/>
	<meta property="twitter:image" content="https://phantas.ma/static/jpg/phantasmopolis.jpg"/>
{% endblock head %}
{% block body_class%}animated animated-text body--home{% endblock %}
{% block main %}
<div class="index">
	{% if featured %}
	<div class="video-block">
		<img src="https://archive.njp.ma/{{ featured }}/timelineslitscan64pframe.jpg" class="video-fallback-block">
		<video
			id="timeline-video"
			src="https://archive.njp.ma/{{ featured }}/timelineslitscan64p.mp4"
			poster="https://archive.njp.ma/{{ featured }}/timelineslitscan64pframe.jpg"
			controlsList="nodownload"
			autoplay
			loop
			muted
			playsinline>
		</video>
	</div>
	{% endif  %}
	<div class="home">
		<div class="box">
			<h1 class="h1-en-home">njp.ma</h1>
			<div class="font-size-sm">
				<div class="h3"><a href="{% url 'films'%}" class="font-bold">Videos</a></div>

				<div class="h3"><a href="{% url 'texts' %}" class="font-bold">Cuts</a></div>
			</div>
			<div class="font-size-sm">
				<div class="h3"><a href="{% url 'about' %}" class="font-bold">About</a></div>
			</div>
		</div>
	</div>
</div>
{% endblock %}