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

{% block body %}
    <form method="post" action="{{ path('import_confirm') }}" data-controller="import-match">
        <div class="container mx-auto mt-8 p-2">
            <div class="bg-white overflow-hidden">
                <div class="overflow-x-auto">
                    <table class="min-w-full bg-white">
                        <thead>
                        <tr class="bg-gray-200 text-gray-800">
                            <th class="w-1/12 py-3 px-4 text-left">
                                <input type="checkbox" class="form-checkbox h-5 w-5 text-green-600"
                                       data-action="change->import-match#toggleAllCheckboxes">
                            </th>
                            <th class="w-4/12 py-3 px-4 text-left">Original File</th>
                            <th class="w-4/12 py-3 px-4 text-left">Manga</th>
                            <th class="w-3/12 py-3 px-4 text-left">Content</th>
                            <th class="w-2/12 py-3 px-4 text-left">Actions</th>
                        </tr>
                        </thead>
                        <tbody class="text-gray-700">
                        {% for file in files %}
                            <tr class="border-b border-gray-200 hover:bg-gray-50 transition duration-150 ease-in-out">
                                <td class="py-4 px-4 text-center">
                                    <input type="checkbox" class="form-checkbox h-5 w-5 text-green-600"
                                           name="selected[]"
                                           value="{{ file.id }}" data-import-match-target="checkbox">
                                </td>
                                <td>
                                    <div class="py-4 px-4">
                                        <div class="text-sm font-medium text-gray-900">{{ file.originalFileName }}</div>
                                        <div class="text-sm text-gray-500">{{ file.fileSize }}</div>
                                    </div>
                                </td>
                                <td class="py-4 px-4">
                                    <select name="manga_slug[{{ file.id }}]"
                                            class="w-full bg-white border border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
                                            data-action="change->import-match#updateMangaInfo"
                                            data-file-id="{{ file.id }}">
                                        {% for manga in file.mangaOptions %}
                                            <option value="{{ manga.slug }}" {% if loop.first %}selected{% endif %}
                                                    data-manga-info="{{ manga|json_encode }}">{{ manga.title }}</option>
                                        {% endfor %}
                                    </select>
                                </td>
                                <td class="py-4 px-4">
                                    {% if file.metadata.chapter %}
                                        Chapter {{ file.metadata.chapter }}
                                        <input type="hidden" name="chapter[{{ file.id }}]"
                                               value="{{ file.metadata.chapter }}">
                                    {% else %}
                                        Volume {{ file.metadata.volume }}
                                        <input type="hidden" name="volume[{{ file.id }}]"
                                               value="{{ file.metadata.volume }}">
                                    {% endif %}
                                </td>
                                <td class="py-4 px-4">
                                    <button type="button"
                                            class="text-blue-500 hover:text-blue-700 transition duration-150 ease-in-out"
                                            data-action="click->import-match#showDetails" data-file-id="{{ file.id }}">
                                        <i class="fas fa-info-circle"></i>
                                    </button>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="mt-6 flex justify-end">
                <button type="submit"
                        class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
                        data-action="import-match#confirmSelected">
                    Importer les fichiers sélectionnés
                </button>
            </div>
        </div>
        <div class="fixed z-10 inset-0 overflow-y-auto hidden" data-import-match-target="modal">
            <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
                <div class="fixed inset-0 transition-opacity" aria-hidden="true">
                    <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
                </div>
                <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
                <div
                    class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
                    <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                        <div data-import-match-target="modalContent">
                            <!-- Will be filled by JavaScript -->
                        </div>
                    </div>
                    <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                        <button type="button"
                                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"
                                data-action="click->import-match#closeModal">
                            Close
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>
{% endblock %}