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

{% block title %}{% endblock %}

{% block body %}
	<div>
		<div class="w-1/2 py-2 flex flex-col justify-center mt-5  mx-auto">
			<h1 class="text-2xl font-bold">Résultats pour :
				{{ query }}</h1>
		</div>
		{% for book in datas.items %}
			<div class="relative flex rounded-xl border bg-white shadow-lg hover:shadow-xl transition-shadow duration-300 w-1/2 mx-auto py-2 mt-5">
				<div class="flex flex-col justify-start">
					<div class="flex flex-col p-2 text-2xl">
						<h1 class="font-bold">{{ book.volumeInfo.title }}</h1>
						{% if book.volumeInfo.authors is defined %}
							<span class="text-lg">{{ book.volumeInfo.authors | join(", ") }}</span>
						{% endif %}
					</div>
					<div class="flex">
						<div class="flex 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>
						<div class="w-9/12">
							{% if book.volumeInfo.publisher is defined %}
								<p class="p-2 italic font-bold">Aux éditions :
									<span class="font-normal">{{ book.volumeInfo.publisher }}</span>
								</p>
								<p class="p-2 italic font-bold">Date de publication :
									<span class="font-normal">{{ book.volumeInfo.publishedDate }}</span>
								</p>
								{% if book.volumeInfo.categories is defined %}
									{% for categorie in book.volumeInfo.categories %}
										<p class="p-2 italic font-bold">Catégorie :
											<span class="font-normal">{{ categorie }}</span>
										</p>
									{% endfor %}
								{% endif %}
								<p class="p-2 italic font-bold">Nombres de pages :
									<span class="font-normal">{{ book.volumeInfo.pageCount }}</span>
								</p>
								<p class="p-2 italic font-bold">Description :
									{% if book.searchInfo is defined %}
										<span class="font-normal">{{ book.searchInfo.textSnippet | raw }}</span>
									{% endif %}
								</p>
							{% endif %}
						</div>
					</div>
					<div class="w-full p-2">
						<button id="openModalBtn-{{ loop.index }}" class="dark:bg-[#263B46] text-white px-4 py-2 rounded-lg mt-4 w-full">
							Voir plus
						</button>
					</div>
				</div>


				{% if app.user %}
					{% for favori in favoris %}
						{% if favori.getIdGoogle() == book.id %}
							<svg 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 transition-colors duration-300" x-data="{ liked: true }" :fill="liked ? 'red' : 'none'" :stroke="liked ? 'red' : 'currentColor'" @click="toggleLike('{{ book.id }} ', liked); liked = !liked">
								<path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"/>
							</svg>
						{% endif %}
						{% if favori.getIdGoogle() != book.id %}
							<svg 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 transition-colors duration-300" x-data="{ liked: false }" :fill="liked ? 'red' : 'none'" :stroke="liked ? 'red' : 'currentColor'" @click="toggleLike('{{ book.id }} ', liked); liked = !liked">
								<path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"/>
							</svg>
						{% endif %}


					{% endfor %}

				{% endif %}


			</div>
		{% endfor %}
	</div>

	<script>
		function toggleLike(idGoogle, liked) { // Si l'élément est déjà aimé (liked = true), on le retire des favoris
if (liked) {
fetch("{{ path('unlike', {'idGoogle': 'PLACEHOLDER'}) }}".replace('PLACEHOLDER', idGoogle), {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest'
},
body: JSON.stringify({ // D'autres données peuvent être envoyées si nécessaire
})
}).then(response => response.json()).then(data => {
if (data.status === 'removed') { // Mettre à jour le SVG ou l'état du bouton pour retirer le like
console.log('Livre retiré des favoris');
}
}).catch(error => {
console.error('Erreur AJAX', error);
});
} else { // Si l'élément n'est pas encore aimé (liked = false), on l'ajoute aux favoris
fetch("{{ path('like', {'idGoogle': 'PLACEHOLDER'}) }}".replace('PLACEHOLDER', idGoogle), {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest'
},
body: JSON.stringify({ // D'autres données peuvent être envoyées si nécessaire
})
}).then(response => response.json()).then(data => {
if (data.status === 'added') { // Mettre à jour le SVG ou l'état du bouton pour ajouter le like
console.log('Livre ajouté aux favoris');
}
}).catch(error => {
console.error('Erreur AJAX', error);
});
}
}
	</script>

{% endblock %}