{# templates/components/Search.html.twig #}
<div{{ attributes }}>
    <div class="flex items-center py">
        <i class="fas fa-search text-white"></i>
        <input
            data-model="query"
            type="text"
            placeholder="Rechercher"
            class="appearance-none outline-none ml-2 pl-0 bg-transparent border-b border-white w-full placeholder:text-white text-white py-1 px-2 leading-tight transition-all duration-500 ease-in-out focus:placeholder:text-opacity-0 focus:border-opacity-0"
        />
    </div>

    {% if query %}
        <div id="searchResults" class="absolute left-0 right-0 min-w-60 ml-8 mt-2 rounded-sm shadow-lg max-h-60 overflow-y-auto z-50">
            <ul class="bg-gray-700 text-white">
                {% if this.mangas is not empty %}
                    <li class="px-4 py-2 text-gray-400">Mangas existants</li>
                    {% for manga in this.mangas %}
                        <li class="px-4 py-2 hover:bg-gray-600 cursor-pointer">
                            <a class="flex items-center" href="{{ path('app_manga_show', { 'mangaSlug': manga.slug }) }}">
                                <img src="{{ manga.imageUrl ?? 'https://placehold.co/40x60' }}" alt="{{ manga.title }}"
                                     class="w-10 h-15 object-cover mr-4">
                                <span>{{ manga.title }} ({{ manga.publicationYear }})</span>
                            </a>
                        </li>
                    {% endfor %}
                {% else %}
                    <li class="px-4 py-2 text-gray-400">Aucun manga trouvé.</li>
                    <li class="px-4 py-2 hover:bg-gray-600 cursor-pointer">
                        <a class="flex items-center" href="{{ path('app_manga_search', {query: query}) }}">
                            <span>Ajouter {{ query }}</span>
                        </a>
                    </li>
                {% endif %}
            </ul>
        </div>
    {% endif %}
</div>