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

{% block title %}{% endblock %}

{% block body %}


<div>
    <h1>Recherche de livre pour {{ query }}</h1>
    {% for book in datas.items %}
        <div class="flex justify-center">
            <div class="border rounded-xl w-1/2 py-2 flex flex-col justify-center mt-5">
                <h1 class="font-bold p-2 text-2xl ">{{ book.volumeInfo.title }}</h1>

                                {% if book.volumeInfo.imageLinks is defined and book.volumeInfo.imageLinks.smallThumbnail is defined %}
                    <img src="{{ book.volumeInfo.imageLinks.smallThumbnail }}" class="p-2" style="width: 20%" height="20px">
                {% endif %}
                
            </div>
        </div>

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