{% 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>

        {% set isCbz = chapter.cbzPath is not null %}
        {% set totalPages = isCbz ? totalPages : pages|length %}
        {% set currentPageNumber = isCbz ? currentPage : currentPage.number %}

        <div class="flex justify-center my-4">
            {% if currentPageNumber > 1 %}
                <a href="{{ path('app_manga_read', { 'mangaSlug': manga.slug, 'chapterNumber': chapter.number, 'pageNumber': currentPageNumber - 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 currentPageNumber < totalPages %}
                <a href="{{ path('app_manga_read', { 'mangaSlug': manga.slug, 'chapterNumber': chapter.number, 'pageNumber': currentPageNumber + 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 isCbz %}
                {% if currentPageNumber < totalPages %}
                    <a href="{{ path('app_manga_read', {'mangaSlug': manga.slug, 'chapterNumber': chapter.number, 'pageNumber': currentPageNumber + 1}) }}">
                        <img src="data:image/jpeg;base64,{{ pageContent }}" alt="Page {{ currentPageNumber }}"
                             class="shadow-lg">
                    </a>
                {% else %}
                    <img src="data:image/jpeg;base64,{{ pageContent }}" alt="Page {{ currentPageNumber }}" class="shadow-lg">
                {% endif %}
            {% else %}
                {% if currentPageNumber < totalPages %}
                    <a href="{{ path('app_manga_read', {'mangaSlug': manga.slug, 'chapterNumber': chapter.number, 'pageNumber': currentPageNumber + 1}) }}">
                        <img src="{{ asset(currentPage.imageLocalUrl) }}" alt="Page {{ currentPageNumber }}"
                             class="shadow-lg">
                    </a>
                {% else %}
                    <img src="{{ asset(currentPage.imageLocalUrl) }}" alt="Page {{ currentPageNumber }}" class="shadow-lg">
                {% endif %}
            {% endif %}
        </div>

        <div class="flex justify-center my-4">
            {% if currentPageNumber > 1 %}
                <a href="{{ path('app_manga_read', { 'mangaSlug': manga.slug, 'chapterNumber': chapter.number, 'pageNumber': currentPageNumber - 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 currentPageNumber < totalPages %}
                <a href="{{ path('app_manga_read', { 'mangaSlug': manga.slug, 'chapterNumber': chapter.number, 'pageNumber': currentPageNumber + 1 }) }}"
                   class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Suivant &raquo;</a>
            {% endif %}
        </div>

        <div class="text-center mt-4">
            Page {{ currentPageNumber }} sur {{ totalPages }}
        </div>
    </div>
{% endblock %}