{% block body %}
    <div class="relative">
        <div class="shadow-lg text-white">
            <div class="relative h-96 bg-cover bg-center" style="background-image: url('{{ manga.imageUrl }}')">
                <div class="absolute inset-0 bg-black opacity-50"></div>
                <div class="absolute inset-0 flex flex-row  justify-center p-4">
                    <div class="hidden mr-12 xl:block 2xl:block">
                        <img src="{{ manga.thumbnailUrl }}" alt="{{ manga.title }}" class="max-w-72 max-h-72 ml-4">
                    </div>
                    <div class="flex flex-col">
                        <div class="flex items-center mb-4">
                            <i class="fas fa-bookmark text-white text-3xl"></i>
                            <h1 class="text-3xl font-bold ml-4">{{ manga.title }}</h1>
                        </div>
                        <div class="flex items-center mb-4">
                            <span class="mr-4">{{ manga.publicationYear }}</span>
                            <span>Chapters: {{ manga.chapters.count }}</span>
                        </div>
                        <div class="flex items-center mb-4">
                            <i class="fas fa-folder text-gray-400 mr-2"></i>
                            <span
                                class="truncate">/media/mangas/{{ manga.title }} ({{ manga.publicationYear }})</span>
                            <span
                                class="ml-auto bg-green-600 py-1 px-2 rounded">{{ manga.status ?? 'Terminé' }}</span>
                        </div>
                        <div class="flex items-center mb-4">
                            {% set genre_count = 0 %}
                            {% for genre in manga.genres %}
                                {% if genre_count < 5 %}
                                    <span class="bg-gray-700 py-1 px-2 rounded-sm mr-2">{{ genre }}</span>
                                    {% set genre_count = genre_count + 1 %}
                                {% endif %}
                            {% endfor %}
                            {% if genre_count == 5 and manga.genres|length > 5 %}
                                <span class="bg-gray-700 py-1 px-2 rounded-sm mr-2">...</span>
                            {% endif %}
                        </div>
                        <div class="mb-4">
                            <div class="flex items-center mb-2">
                                <i class="fas fa-heart text-red-500 mr-2"></i>
                                <span>{{ manga.rating|round(2) }}</span>
                            </div>
                            <p>{{ manga.description|truncate(500) }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <turbo-frame id="chapter_list"
                 src="{{ fragment_uri(controller('App\\Controller\\MangaController::_chaptersByManga', {'id': manga.id})) }}"
    >
    </turbo-frame>
    {# Modal d'édition #}
    <twig:Modal
        openTrigger="openEditModal"
        closeTrigger="closeEditModal"
        title="Edit Manga"
        modalClass="w-full max-w-4xl"
    >
        {% block content %}
            {{ form_start(form, {'action': path('app_manga_edit', {'id': manga.id}), 'attr': {'id': 'editForm', 'data-turbo-form': 'true'}}) }}
            {% do form.alternativeSlugs.setRendered() %}

            <div class="space-y-4 overflow-y-auto px-4">
                {{ form_row(form.title, {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}, 'row_attr': {'class': 'mt-1'}}) }}
                {{ form_row(form.slug, {
                    'label_attr': {'class': 'block text-sm font-medium text-gray-700'},
                    'row_attr': {'class': 'mt-1'},
                    'attr': {
                        'class': 'w-full px-3 py-2 bg-gray-100 border border-gray-300 rounded-md focus:outline-none text-gray-500',
                        'readonly': true
                    }
                }) }}
                {{ form_row(form.publicationYear, {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}, 'row_attr': {'class': 'mt-1'}}) }}
                {{ form_row(form.description, {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}, 'row_attr': {'class': 'mt-1'}}) }}
                {{ form_row(form.author, {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}, 'row_attr': {'class': 'mt-1'}}) }}
                {{ form_row(form.status, {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}, 'row_attr': {'class': 'mt-1'}}) }}
                {{ form_row(form.rating, {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}, 'row_attr': {'class': 'mt-1'}}) }}

                <div {{ stimulus_controller('collection') }}>
                    <label class="block text-sm font-medium text-gray-700">Slugs alternatifs</label>
                    <div data-collection-target="container" class="grid grid-cols-4 gap-2 mt-1">
                        {% for slug in form.alternativeSlugs %}
                            <div
                                class="inline-flex items-center bg-gray-100 rounded-full px-3 py-1 text-sm collection-item">
                                {{ form_widget(slug, {'attr': {'class': 'bg-transparent border-none focus:outline-none focus:border-b focus:border-green-500 p-0 w-full'}}) }}
                                <button type="button" data-action="collection#remove"
                                        class="ml-2 text-gray-500 hover:text-green-500 flex-shrink-0">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        {% endfor %}
                    </div>
                    <button type="button" data-action="collection#add"
                            class="mt-2 text-sm text-green-500 hover:text-green-700">
                        + Ajouter un slug alternatif
                    </button>
                    <template data-collection-target="template">
                        <div
                            class="inline-flex items-center bg-gray-100 rounded-full px-3 py-1 text-sm collection-item">
                            {{ form_widget(form.alternativeSlugs.vars.prototype, {'attr': {'class': 'bg-transparent border-none focus:outline-none focus:border-b focus:border-green-500 p-0 w-full'}}) }}
                            <button type="button" data-action="collection#remove"
                                    class="ml-2 text-gray-500 hover:text-green-500 flex-shrink-0">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </template>
                </div>

                <div {{ stimulus_controller('collection') }}>
                    <label class="block text-sm font-medium text-gray-700">{{ form_label(form.genres) }}</label>
                    <div data-collection-target="container" class="grid grid-cols-4 gap-2 mt-1">
                        {% for genre in form.genres %}
                            <div
                                class="inline-flex items-center bg-gray-100 rounded-full px-3 py-1 text-sm collection-item">
                                {{ form_widget(genre, {'attr': {'class': 'bg-transparent border-none focus:outline-none focus:border-b focus:border-green-500 p-0 w-full'}}) }}
                                <button type="button" data-action="collection#remove"
                                        class="ml-2 text-gray-500 hover:text-green-500 flex-shrink-0">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        {% endfor %}
                    </div>
                    <button type="button" data-action="collection#add"
                            class="mt-2 text-sm text-green-500 hover:text-green-700">
                        + Ajouter un genre
                    </button>
                    <template data-collection-target="template">
                        <div
                            class="inline-flex items-center bg-gray-100 rounded-full px-3 py-1 text-sm collection-item">
                            {{ form_widget(form.genres.vars.prototype, {'attr': {'class': 'bg-transparent border-none focus:outline-none focus:border-b focus:border-green-500 p-0 w-full'}}) }}
                            <button type="button" data-action="collection#remove"
                                    class="ml-2 text-gray-500 hover:text-green-500 flex-shrink-0">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </template>
                </div>
            </div>
            {{ form_end(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>
            <button type="submit" form="editForm"
                    class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-600 text-base font-medium text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 sm:ml-3 sm:w-auto sm:text-sm">
                Save
            </button>
        {% endblock %}
    </twig:Modal>

    {# Modal de confirmation de suppression #}
    <twig:Modal
        openTrigger="openDeleteModal"
        closeTrigger="closeDeleteModal"
        title="Delete Manga"
    >
        <twig:block name="content">
            <p class="text-sm text-gray-500">
                Are you sure you want to delete this manga? This action cannot be undone.
            </p>
        </twig:block>
        <twig:block name="footer">
            <button
                {{ stimulus_controller('toolbar', { mangaId: manga.id }) }}
                {{ stimulus_action('toolbar', 'confirmDelete') }}
                type="button"
                class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">
                Delete
            </button>
            <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>
        </twig:block>
    </twig:Modal>

    <twig:Modal
        openTrigger="openPreferredSourcesModal"
        closeTrigger="closePreferredSourcesModal"
        title="Manage Preferred Sources"
        modalClass="w-full max-w-4xl"
    >
        {% block content %}
            <div {{ stimulus_controller('preferred-sources', {
                mangaId: manga.id,
                preferredSources: manga.preferredSources|map(s => s.id)|json_encode,
                allSources: contentSources|map(s => {
                    id: s.id,
                    name: s.cleanBaseUrl
                })|json_encode
            }) }}>
                <div>
                    <h3 class="text-lg font-medium text-gray-900">Preferred Sources</h3>
                    <ul data-preferred-sources-target="preferredList" class="mt-2 space-y-2">
                        {% for source in manga.preferredSources %}
                            <li data-id="{{ source.id }}" draggable="true"
                                class="flex items-center justify-between p-2 bg-gray-100 rounded cursor-move">
                                <span>{{ source.cleanBaseUrl }}</span>
                                <button type="button" data-action="preferred-sources#removeSource"
                                        data-source-id="{{ source.id }}" class="text-red-500 hover:text-red-700">
                                    <i class="fas fa-times"></i>
                                </button>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-medium text-gray-900">Available Sources</h3>
                    <ul data-preferred-sources-target="availableList" class="mt-2 space-y-2">
                        {% for source in contentSources %}
                            {% if source not in manga.preferredSources %}
                                <li class="flex items-center justify-between p-2 bg-gray-100 rounded">
                                    <span>{{ source.cleanBaseUrl }}</span>
                                    <button type="button" data-action="preferred-sources#addSource"
                                            data-source-id="{{ source.id }}"
                                            class="text-green-500 hover:text-green-700">
                                        <i class="fas fa-plus"></i>
                                    </button>
                                </li>
                            {% endif %}
                        {% endfor %}
                    </ul>
                </div>
            </div>
        {% 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">
                Close
            </button>
        {% endblock %}
    </twig:Modal>
{% endblock %}