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

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

{% block title %}
	{% if shelf %}
		{{shelf.name}}
	{% else %}
		Publications
	{% endif %}
{% endblock %}

{% block body %}
	{{parent()}}
	<div class="book-wrapper">
		<h1>
			{% if shelf %}
				{{shelf.name}}
			{% endif %}
		</h1>

		{% if booklets|length == 0 %}
			<div class="message-container">
				<h2>Oh no!</h2>
				<h3>There are no booklets yet on this shelf</h3>
			</div>
		{% else %}
			<div class="book-items">
				{% for booklet in booklets %}
					<div class="main-book-wrap">
						<a href="{{ path('app_viewer', {'slug': booklet.slug}) }}">
							<div class="book-cover">
								<div class="book-inside"></div>
								<div class="book-image">
									{% if booklet.previewImageName %}
										<div class="foreground" style="background-image:url('/preview/{{ booklet.id }}')"></div>
										<div class="background" style="background-image:url('/preview/{{ booklet.id }}')"></div>
									{% else %}
										<p>{{ booklet.name }}</p>
									{% endif %}
								</div>
							</div>
						</a>
					</div>
				{% endfor %}
			</div>
		{% endif %}
	</div>
{% endblock %}