const url = "https://thronesapi.com/api/v2/Characters";
const tableau = document.getElementById("tableau");

async function getPersonage(){
    return (await fetch(url)).json();
}

async function getData(){
    let data = await getPersonage();
		affichage(data);
}

function affichage(data){
    let ligne;
    data.forEach((element, index) => {
        console.log(element);
        if (index % 3 === 0){
            ligne = document.createElement("div");
            ligne.classList.add("columns");
            tableau.appendChild(ligne);
        }

        let carte = document.createElement("div");
        carte.classList.add("card-image");

        let figure = document.createElement("figure");
        figure.classList.add("image");
        figure.classList.add("is-4by3");
        carte.appendChild(figure);

        let image = document.createElement("img");
        image.src = element.imageUrl;
        figure.appendChild(image);

        let carteContent = document.createElement("div");
        carteContent.classList.add("card-content");
        carte.appendChild(carteContent);

        let media = document.createElement("div");
        media.classList.add("media");
        carteContent.appendChild(media);

        let mediaContent = document.createElement("div");
        mediaContent.classList.add("media-content");
        media.appendChild(mediaContent);

        let nom = document.createElement("p");
        nom.classList.add("title");
        nom.classList.add("is-4");
        nom.textContent = element.fullName;
        mediaContent.appendChild(nom);

        let titre = document.createElement("p");
        titre.classList.add("subtitle");
        titre.classList.add("is-6");
        titre.textContent = element.title;
        mediaContent.appendChild(titre);

        let famille = document.createElement("p");
        famille.classList.add("subtitle");
        titre.classList.add("is-6");
        famille.textContent = element.family;
        mediaContent.appendChild(famille);

        ligne.appendChild(carte);
    });
}

getData();

/*
<div class="card">
    <div class="card-image">
        <figure class="image is-4by3">
            <img src="chemin_vers_image.jpg" alt="Image de la carte">
        </figure>
    </div>
    <div class="card-content">
        <div class="media">
            <div class="media-content">
                <p class="title is-4">Titre</p>
                <p class="subtitle is-6"><i class="fas fa-home"></i> Autre texte</p>
            </div>
        </div>
        <div class="content">
            Texte
        </div>
    </div>
</div>
*/