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

{% block title %}{{ manga.title }} - Chapitre {{ chapter.number }}{% endblock %}

{% block body %}
    <div class="w-full mx-auto p-4" {{ stimulus_controller('reader', {
        mangaSlug: manga.slug,
        chapterNumber: chapter.number,
        totalPages: totalPages
    }) }}>
        <h1 class="text-center text-3xl my-4">{{ manga.title }} - Chapitre {{ chapter.number }}</h1>

        <div class="flex justify-center my-4">
            <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 mr-4" data-action="reader#previousChapter">&laquo; Chapitre précédent</button>
            <select class="px-4 py-2 rounded" data-action="reader#changeChapter" data-reader-target="chapterSelect"></select>
            <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 ml-4" data-action="reader#nextChapter">Chapitre suivant &raquo;</button>
        </div>

        <div class="flex justify-center my-4">
            <button class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 mr-4" data-action="reader#toggleReadingMode" data-reader-target="readingModeButton">Passer en mode vertical</button>
        </div>

        <div class="page-container flex flex-col items-center min-h-[80vh]" data-reader-target="pageContainer">
            <!-- Les pages seront injectées ici par le JavaScript -->
        </div>

        <div class="text-center mt-4" data-reader-target="pageInfo">
            Page <span data-reader-target="currentPage">1</span> sur {{ totalPages }}
        </div>
    </div>
{% endblock %}