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

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

{% block body %}
    <div class="w-full mx-auto p-4">
        <h1 class="text-center text-3xl my-4">{{ manga.title }} - Chapitre {{ chapter.number }}</h1>

        <div class="flex justify-center my-4">
            {% if currentPage.number > 1 %}
                <a href="{{ path('read_chapter_page', { 'mangaSlug': manga.slug, 'chapterNumber': chapter.number, 'pageNumber': currentPage.number - 1 }) }}"
                   class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 mr-4">&laquo; Précédent</a>
            {% endif %}
            {% if currentPage.number < pages|length %}
                <a href="{{ path('read_chapter_page', { 'mangaSlug': manga.slug, 'chapterNumber': chapter.number, 'pageNumber': currentPage.number + 1 }) }}"
                   class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Suivant &raquo;</a>
            {% endif %}
        </div>

        <div class="page-container flex justify-center">
            {% if currentPage.number < pages|length %}
                <a href="{{ path('read_chapter_page', {'mangaSlug': manga.slug, 'chapterNumber': chapter.number, 'pageNumber': currentPage.number + 1}) }}">
                    <img src="{{ asset(currentPage.imageLocalUrl) }}" alt="Page {{ currentPage.number }}"
                         class="shadow-lg">
                </a>
            {% else %}
                <img src="{{ asset(currentPage.imageLocalUrl) }}" alt="Page {{ currentPage.number }}" class="shadow-lg">
            {% endif %}
        </div>

        <div class="flex justify-center my-4">
            {% if currentPage.number > 1 %}
                <a href="{{ path('read_chapter_page', { 'mangaSlug': manga.slug, 'chapterNumber': chapter.number, 'pageNumber': currentPage.number - 1 }) }}"
                   class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 mr-4">&laquo; Précédent</a>
            {% endif %}
            {% if currentPage.number < pages|length %}
                <a href="{{ path('read_chapter_page', { 'mangaSlug': manga.slug, 'chapterNumber': chapter.number, 'pageNumber': currentPage.number + 1 }) }}"
                   class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Suivant &raquo;</a>
            {% endif %}
        </div>
    </div>
{% endblock %}