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

{% block title %}Chapitres de {{ manga.title }}{% endblock %}

{% block body %}
    <div class="container mx-auto px-4">
        <h1 class="text-4xl font-bold mb-8">Chapitres de {{ manga.title }}</h1>

        <ul class="list-disc pl-5">
            {% for chapter in manga.chapters|sort((a, b) => a.number <=> b.number) %}
                <li class="my-2">
                    <a class="text-blue-600 hover:text-blue-800" href="{{ path('read_chapter_page', { 'mangaSlug': manga.slug, 'chapterNumber': chapter.number, 'pageNumber': 1 }) }}">
                        Chapitre : {{ chapter.number }}
                    </a>
                    <a class="text-blue-600 hover:text-blue-800" href="{{ path('download_chapter', {'mangaSlug': manga.slug, 'chapterNumber': chapter.number}) }}"><i class="fas fa-save"></i></a>
                </li>
            {% else %}
                <li>Aucun chapitre trouvé.</li>
            {% endfor %}
        </ul>

        <h2 class="text-2xl font-semibold mb-4">Scrapper un chapitre</h2>
        <form id="scrape-form" action="{{ path('manga_scrape') }}" method="post" class="space-y-4">
            <input type="hidden" name="mangaSlug" value="{{ manga.slug }}">
            <div>
                <label for="chapterNumber" class="block mb-1">Numéro de chapitre :</label>
                <input type="number" name="chapterNumber" id="chapterNumber" class="border border-gray-300 p-2 rounded">
            </div>
            <div>
                <label for="availableChapters" class="block mb-1">Chapitres disponibles :</label>
                <select id="availableChapters" class="border border-gray-300 p-2 rounded">
                    <option value="" selected disabled>Choisissez un chapitre</option>
                    {% for chapter in availableChapters %}
                        <option value="{{ chapter.number }}">{{ chapter.number }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="flex items-center space-x-2">
                <input type="checkbox" name="scrapeFromChapter" id="scrapeFromChapter" class="rounded">
                <label for="scrapeFromChapter">Depuis ce chapitre :</label>
            </div>
            <input type="submit" value="Scrapper" class="button bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded">
        </form>
    </div>

    {% block javascripts %}
        {{ parent() }}
        <script>
            document.getElementById('scrape-form').addEventListener('submit', function(event) {
                const chapterNumberInput = document.getElementById('chapterNumber');
                const availableChaptersSelect = document.getElementById('availableChapters');
                if (availableChaptersSelect.value) {
                    chapterNumberInput.value = availableChaptersSelect.value;
                }
            });

            document.getElementById('scrapeFromChapter').addEventListener('change', function(event) {
                const form = document.getElementById('scrape-form');
                if (event.target.checked) {
                    form.action = "{{ path('manga_scrape_from_chapter') }}";
                } else {
                    form.action = "{{ path('manga_scrape') }}";
                }
            });
        </script>
    {% endblock %}
{% endblock %}