77 lines
4.0 KiB
Twig
77 lines
4.0 KiB
Twig
{% block body %}
|
|
|
|
<div id="myModal-{{ loop.index }}" class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center hidden z-50">
|
|
<div class="relative bg-white p-6 rounded-lg w-1/3 max-h-screen overflow-y-auto">
|
|
<div class="flex mx-auto flex-row w-1/4">
|
|
{% if book.volumeInfo.imageLinks is defined and book.volumeInfo.imageLinks.smallThumbnail is defined %}
|
|
<img src="{{ book.volumeInfo.imageLinks.smallThumbnail }}" class="p-2">
|
|
{% endif %}
|
|
</div>
|
|
<svg id="closeModalSvg-{{ loop.index }}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
|
stroke-width="1.5" stroke="currentColor"
|
|
class="absolute top-2 right-2 w-6 h-6 cursor-pointer text-gray-500 hover:text-gray-700">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
|
</svg>
|
|
|
|
{% if book.volumeInfo.title is defined and book.volumeInfo.title is not empty %}
|
|
<p class="p-2 italic font-bold">Titre : <span class="font-normal">{{ book.volumeInfo.title }}</span></p>
|
|
{% endif %}
|
|
|
|
{% if book.volumeInfo.authors is defined %}
|
|
<p class="p-2 italic font-bold"> Auteur(s) : <span class="font-normal"> {{ book.volumeInfo.authors | join(", ") }}</span></p>
|
|
{% endif %}
|
|
|
|
{% if book.volumeInfo.publisher is defined and book.volumeInfo.publisher is not empty %}
|
|
<p class="p-2 italic font-bold">Aux éditions : <span class="font-normal">{{ book.volumeInfo.publisher }}</span></p>
|
|
{% endif %}
|
|
|
|
{% if book.volumeInfo.publishedDate is defined and book.volumeInfo.publishedDate is not empty %}
|
|
<p class="p-2 italic font-bold">Date de publication : <span class="font-normal">{{ book.volumeInfo.publishedDate }}</span></p>
|
|
{% endif %}
|
|
|
|
{% if book.volumeInfo.categories is defined and book.volumeInfo.categories is not empty %}
|
|
{% for categorie in book.volumeInfo.categories %}
|
|
<p class="p-2 italic font-bold">Catégorie : <span class="font-normal">{{ categorie }}</span></p>
|
|
{% endfor %}
|
|
{% endif %}
|
|
|
|
{% if book.volumeInfo.pageCount is defined and book.volumeInfo.pageCount is not empty %}
|
|
<p class="p-2 italic font-bold">Nombre de pages : <span class="font-normal">{{ book.volumeInfo.pageCount }}</span></p>
|
|
{% endif %}
|
|
|
|
{% if book.volumeInfo is defined and book.volumeInfo.description is defined and book.volumeInfo.description is not empty %}
|
|
<p class="p-2 italic font-bold">Description : <span class="font-normal">{{ book.volumeInfo.description | raw }}</span></p>
|
|
{% endif %}
|
|
|
|
<hr class="mt-6">
|
|
|
|
<div class="mt-4">
|
|
<h3 class="font-bold text-lg">Laisser un commentaire :</h3>
|
|
<form id="commentForm-{{ loop.index }}" action="" method="POST" class="space-y-4">
|
|
<textarea id="commentText-{{ loop.index }}" name="comment" rows="4" class="w-full p-2 border border-gray-300 rounded-lg" placeholder="Écrivez votre commentaire ici..." required></textarea>
|
|
<button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">Envoyer</button>
|
|
</form>
|
|
</div>
|
|
|
|
<hr class="mt-8">
|
|
<div id="commentsSection-{{ loop.index }}" class="mt-4 max-h-60 overflow-y-auto">
|
|
<h3 class="font-bold text-lg">Commentaires :</h3>
|
|
<div class="mt-2">
|
|
<div class="p-2 border-b border-gray-200">
|
|
<p class="font-semibold">Auteur : Fabien</p>
|
|
<p>Très bon livre pour les débutants.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button id="closeModalBtn-{{ loop.index }}" class="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 mt-4">
|
|
Fermer
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
{% block javascripts %}
|
|
<script src="{{ asset('js/modal.js') }}"></script>
|
|
{% endblock %}
|
|
|