<div {{ attributes }}>
    {% component BootstrapModal with {id: 'mangaModal' ~ index ~ '-' ~ manga.slug } %}
        {% block modal_header %}
            <div class="flex justify-between">
                <h5 class="modal-title text-lg font-bold">{{ manga.title }} <span
                        class="text-md font-normal text-gray-500">({{ manga.publicationYear }})</span></h5>
                <button type="button" class="btn-close text-black hover:text-gray-500"
                        data-bs-dismiss="modal" aria-label="Close">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        {% endblock %}
        {% block modal_body %}
            <form id="{{ 'form' ~ index }}" data-action="live#action:prevent" data-live-action-param="saveManga">
            <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 modal_footer %}
            <button
                type="submit"
                form="{{ 'form' ~ index }}"
                class="bg-green-500 hover:bg-green-600 text-sm text-white font-bold py-2 px-4 rounded">
                Add {{ manga.title }}
            </button>
        {% endblock %}
    {% endcomponent %}
</div>
