{# templates/components/MangaSearch.html.twig #}

<div {{ attributes }}>
    <div class="w-full mx-auto">
        <div data-controller="search">
            <div class="flex items-center border border-gray-300 rounded bg-white">
            <span class="flex items-center justify-center w-10 h-10 text-gray-500">
                <i class="fas fa-search"></i>
            </span>
                <input data-search-target="input"
                       data-model="debounce(500)|query" type="text"
                       placeholder="eg. Naruto, Bleach, One Piece"
                       class="w-full py-2 px-3 bg-green-50 border-none focus:outline-none focus:bg-white focus:border focus:border-green-200">
                <button data-action="click->search#clearSearch"
                        class="flex items-center justify-center w-10 h-10 text-gray-500 hover:bg-gray-200">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>
    </div>

    {% if this.mangas %}
        <div data-loading="addClass(opacity-50)" class="mt-3">
            {% for manga in this.mangas %}
                <div {{ stimulus_controller('addmanga', { 'index': loop.index })}}>
                    <div class="flex w-full bg-white shadow-lg mb-8 hover:bg-green-50"
                         data-action="click->addmanga#openModal">
                        <a href="#" class="flex-none w-48 relative">
                            <img src="{{ manga.imageUrl ?? 'https://placehold.co/150x220' }}" alt="{{ manga.title }}"
                                 class="w-full h-full -z-10 object-cover" style="width: 150px; height: 220px;">
                        </a>
                        <div class="w-full p-4 flex flex-col justify-between leading-normal">
                            <div class="mb-2">
                                <div
                                    class="flex w-full text-xl font-bold text-gray-900 mb-4 items-center justify-between">
                                    <div class="flex items-center">
                                        <span>{{ manga.title }}</span>
                                        <span class="text-2xl text-gray-500 ml-2">({{ manga.publicationYear }})</span>
                                    </div>
                                    <a href="{{ path('app_manga_show', { 'mangaSlug': manga.slug }) }}"
                                       class="text-gray-400 hover:text-gray-500">
                                        <i class="fas fa-external-link-alt"></i>
                                    </a>
                                </div>
                                {% for genre in manga.genres %}
                                    <span
                                        class="bg-gray-200 text-gray-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded">
                                {{ genre }}
                            </span>
                                {% endfor %}
                            </div>
                            <div class="mb-2">
                                <p class="text-gray-700 text-sm">{{ manga.description|truncate(250) }}</p>
                            </div>
                            <div class="flex items-center">
                            <span class="text-gray-600 text-sm mr-2">
                                <i class="fas fa-star text-yellow-500"></i>
                                {{ manga.rating }}
                            </span>
                            </div>
                        </div>
                    </div>


                    <twig:Modal
                        openTrigger="openAddMangaModal{{ loop.index }}"
                        closeTrigger="closeAddMangaModal{{ loop.index }}"
                        title="Add Manga"
                        modalId="manga-modal-{{ loop.index }}"
                    >
                        {% block content %}
                            <form id="manga-{{ loop.index }}" action="{{ path('app_manga_add') }}" method="POST">
                                <input type="hidden" name="title" value="{{ manga.title }}">
                                <input type="hidden" name="slug" value="{{ manga.slug }}">
                                <input type="hidden" name="description" value="{{ manga.description }}">
                                <input type="hidden" name="imageUrl" value="{{ manga.imageUrl }}">
                                <input type="hidden" name="status" value="{{ manga.status }}">
                                <input type="hidden" name="genres" value="{{ manga.genres|join(',') }}">
                                <input type="hidden" name="author" value="{{ manga.author }}">
                                <input type="hidden" name="publicationYear" value="{{ manga.publicationYear }}">
                                <input type="hidden" name="rating" value="{{ manga.rating }}">
                                <input type="hidden" name="externalId" value="{{ manga.externalId }}">
                                <div class="flex justify-between">
                                    <img src="{{ manga.imageUrl ?? 'https://placehold.co/150x220' }}"
                                         alt="{{ manga.title }}"
                                         class="img-fluid mb-2"
                                         style="width: 150px; height: 220px;"
                                    >
                                    <div class="ml-4">
                                        <p>{{ manga.description|truncate(250) }}</p>
                                        <p><strong>Année de publication:</strong> {{ manga.publicationYear }}</p>
                                        <p><strong>Genres:</strong> {{ manga.genres|join(', ') }}</p>
                                        <p><strong>Note:</strong> {{ manga.rating }}</p>
                                    </div>
                                </div>
                            </form>
                        {% endblock %}
                        {% block footer %}
                            <button type="button" data-action="modal#close" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
                                Cancel
                            </button>
                            {{ component('LoadingButton', {
                                text: 'Add ' ~ manga.title,
                                type: 'submit',
                                form: 'manga-' ~ loop.index,
                                color: 'green'
                            }) }}
                        {% endblock %}
                    </twig:Modal>
                </div>
            {% endfor %}
        </div>
    {% endif %}
</div>