{% extends 'base.html.twig' %}

{% block javascripts %}
	{{ parent() }}
	{{ encore_entry_script_tags('viewer-js') }}
{% endblock %}

{% block stylesheets %}
	{{ parent() }}
	{{ encore_entry_link_tags('viewer-css') }}
{% endblock %}

{% block title %}
	{{booklet.name}}
{% endblock %}

{% block head %}
	{{ parent() }}
	<style>
		body {
			background-color: {{booklet.backgroundcolor}};
		}
	</style>
{% endblock %}

{% block body %}
	{{ parent() }}
	<div id="loading" class="loadingWrapper">
		<div class="loading">
			<img src="{{asset('build/images/intermate-logo.png')}}" alt="">
			<p>Loading viewer</p>
		</div>
	</div>

	<div id="canvas">
		<div id="book-zoom">
			<div class="book" pdf-url={{url}} book-hardcover={{booklet.hardcover ? 'true' : 'false'}}></div>
		</div>
		<div id="slider-bar" class="turnjs-slider">
			<div id="slider"></div>
		</div>
	</div>
{% endblock %}