document.addEventListener('DOMContentLoaded', () => {
    const datas = {{ datas | tojson }};

    datas.items.forEach((book, index) => {
        const openModalBtn = document.getElementById(`openModalBtn-${index + 1}`);
        const closeModalSvg = document.getElementById(`closeModalSvg-${index + 1}`);
        const closeModalBtn = document.getElementById(`closeModalBtn-${index + 1}`);
        const modal = document.getElementById(`myModal-${index + 1}`);

        if (openModalBtn) {
            openModalBtn.addEventListener('click', () => {
                modal.classList.remove('hidden');
            });
        }

        if (closeModalSvg) {
            closeModalSvg.addEventListener('click', () => {
                modal.classList.add('hidden');
            });
        }

        if (closeModalBtn) {
            closeModalBtn.addEventListener('click', () => {
                modal.classList.add('hidden');
            });
        }
    });
});