{% extends "core.html" %}

{% block main %}
<link href="/css/books.css" rel="stylesheet">

<section id="book">
	<h2>{{ book.title|e }}</h2>
	<img id="page" class="unselectable" src="/storage/books/{{ book.id|e }}/{{ page|e }}" alt='Страница отсутствует'>
	<nav>
		<ul>
			{% if page != 0 %}
			<li class="previous unselectable" type="button"><a href="/books/{{ book.id|e }}/{{ page|e - 1 }}"
					title="Страница №{{ page|e - 1 }}">Назад</a></li>
			{% endif %}
			{% if account.permissions.books is defined and account.permissions.books == 1 %}
			<li class="middle icon unselectable"><i class="fa-solid fa-rotate-right unselectable" type="button"
				onclick="rotate({{ book.id|e }}, {{ page|e }}, true)"  title="Повернуть страницу"></i></li>
			<script type="text/javascript" src="/js/rotate.js"></script>
			{% else %}
			<li class="middle icon unselectable"><i class="fa-solid fa-rotate-right unselectable" type="button"
				onclick="const image = document.getElementById('page'); image.style.rotate = ((isNaN(buffer = parseInt(image.style.rotate)) ? 0 : buffer) + 90) + 'deg'; (((isNaN(buffer) ? 0 : buffer) / 90) % 2) === 0 ? image.style.margin = '15% 0px 20% 0px' : image.style.margin = null"  title="Повернуть страницу"></i></li>
			{% endif %}
			<li class="next unselectable" type="button"><a href="/books/{{ book.id|e }}/{{ page|e + 1 }}"
					title="Страница №{{ page|e + 1 }}">Вперёд</a></li>
		</ul>
	</nav>
</section>
{% endblock %}