class Footer extends HTMLElement {
    constructor() {
        super();

        this.socialButtons = [
            {
                "link": "//www.thingiverse.com/jonasled/designs/",
                "icon": "3d_model",
            },
            {
                "link": "//paypal.me/jonasled",
                "icon": "paypal",
            },
            {
                "link": "//matrix.to/#/@jonasled:jonasled.de",
                "icon": "matrix"
            },
            {
                "link": "//twitter.com/jonasled1",
                "icon": "twitter"
            }
        ];
        this.innerHTML = `
            <footer>
                <div id="blueBar"></div>
                <div id="footerContent">
                    <div>
                        <a href="/datenschutzerklaerung.html">Datenschutzerkl&auml;rung</a><br>
                        <a href="/bildquellen.html">Bildquellen</a><br>
                        <a href="/impressum.html">Impressum</a><br>
                        <a href="//gitlab.jonasled.de/jonasled/website">Quellcode</a><br>
                    </div>
                    <div id="newestPost">
                        <h3>Neueste Beitr&auml;ge:</h3>
                        <jl-footer_blog></jl-footer_blog>
                    </div>
                    <div class="center">
                        <p class="center" id="socialButtonsContainer"> 
                        </p>
                    </div>
                </div>
            </footer>
        `;
        const socialButtonsContainer = this.querySelector("#socialButtonsContainer");
        this.socialButtons.forEach(button => {
            const link = document.createElement("a");
            link.href = button["link"];
            socialButtonsContainer.appendChild(link)

            const icon = document.createElement("jl-svg");
            icon.setAttribute("data-name", button["icon"]);
            link.appendChild(icon);
        });
    }
}

customElements.define("jl-footer", Footer);