class BlogIndex extends HTMLElement {
    constructor() {
        super();
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    let blog = JSON.parse(xhr.responseText);
                    blog.forEach((element) => {
                        const article = document.createElement("article");
                        article.classList.add("breakWord");
                        this.appendChild(article);

                        const h2 = document.createElement("h2");
                        h2.innerText = element["title"];
                        article.appendChild(h2);

                        const content = document.createElement("p");
                        content.classList.appendChild("breakWord");
                        content.innerHTML = element["content"];
                        article.appendChild(content);

                        const moreP = document.createElement("p");
                        moreP.classList.add("center");
                        article.appendChild(moreP);

                        const moreLink = document.createElement("a");
                        moreLink.href = "/post.html?id=" + element["id"];
                        moreP.appendChild(moreLink);

                        const moreButton = document.createElement("button");
                        moreButton.innerText = "Mehr lesen";
                        moreLink.appendChild(moreButton);
                    });

                } else {
                    let p = document.createElement("p");
                    p.innerText = "Leider konnte dieser Inhalt nicht geladen werden, bitte versuche die Seite neu zu laden oder komme später wieder zurück";
                    this.appendChild(p);

                }
            }
        }
        xhr.open("GET", "/API/getBlogElements.php?position=index");
        xhr.send();
    }
}

customElements.define("jl-blog_index", BlogIndex);