import {
    getAllLines
} from "./lines-rest-api";


async function createCard(price, name_book, authors, genres, image) {
    const cardContainer = document.querySelector('.main_block2'); 

    if (image == "") {
        image = "img/imageDracula.jpg"
    }

    const cardItem = 
    `
    <div class="Conteiner_Films">
                        <img src="${image}" class="Img_Films">
                        <p class="word_Prince_book">${price} $</p>
                        <p class="word_Name_book">${name_book}</p>
                        <p class="word_Author_book">${authors}</p>
                        <p class="word_Genres_book">Genres: ${genres}</p>
                        <div class="Panel_Admin1">
                            <a href="Admin.html" class="Admin_Word1">Edit</a>
                            <a href="" class="Admin_Word1">Delete</a>
                        </div>
                        <div class="block2_button">
                            <button class="button_InBusket_book">
                                In a basket 
                            </button>
                        </div>
                    </div>
    `;

    cardContainer.insertAdjacentHTML('beforeend', cardItem);
}

async function createCards() {
    const data = await getAllLines();
    console.log(data)
    data.forEach(item => {
        createCard(item.price, item.name_book, item.authors.name, item.items.name, item.image);
    });
}

document.addEventListener('DOMContentLoaded', () => {
    createCards();
});