function getButtons() {
    const buttons = document.createElement('template');
    buttons.id = 'button-collection-template';
    buttons.innerHTML = `
<style>
    :host {
        width: 100%;
    }
</style>

<my-marquee speed="50" direction="left">
    <!-- Socials -->
    <button-8831 href="mailto:tibo@depeuter.dev"
               src="/assets/images/88x31/email.gif"
               hint="Mail Me"></button-8831>
    <button-8831 href="/key.asc"
               src="/assets/images/88x31/privacy-now.gif"
               hint="My GPG key"></button-8831>
    <!-- Operating Systems -->
    <button-8831 href="https://www.gnu.org/gnu/linux.html"
               src="/assets/images/88x31/gnu-linux.gif"
               hint="Made on GNU/Linux"></button-8831>
    <!-- Editors -->
    <!-- Services -->
    <button-8831 href="https://www.proxmox.com/"
               src="/assets/images/88x31/proxmox.gif"
               hint="Proxmox VE"></button-8831>
    <button-8831 href="https://cloud.depeuter.dev/"
               src="/assets/images/88x31/nextcloud.gif"
               hint="Nextcloud"></button-8831>
    <button-8831 href="https://ublockorigin.com/"
               src="/assets/images/88x31/ublock-now.png"
               hint="uBlock Origin Now!"></button-8831>
    <!-- Movements -->
    <button-8831 href="https://home.cern/news/opinion/computing/open-internet-and-free-web"
               src="/assets/images/88x31/firefox-take-back-the-web.gif"
               hint="Take back the web (Firefox)"></button-8831>
    <button-8831 href="https://www.ifixit.com/"
               src="/assets/images/88x31/right-to-repair.png"
               hint="I Support Right To Repair"></button-8831>
    <!-- Compatibility -->
    <button-8831 href="https://www.mozilla.org/firefox/"
               src="/assets/images/88x31/firefox.gif"
               hint="Tested on Firefox"></button-8831>
    <!-- Web -->
    <button-8831 href="https://www.depeuter.dev"
               src="/assets/images/88x31/graphic-design-is-my-passion.gif"
               hint="Graphic Design Is My Passion"></button-8831>
    <button-8831 href="https://developer.mozilla.org/en-US/docs/Web/CSS"
               src="/assets/images/88x31/made-with-css.gif"
               hint="CSS is awesome"></button-8831>
    <!-- Media -->
    <button-8831 href="https://last.fm/user/fortemfiducia"
               src="/assets/images/88x31/3dot5mm-jack.gif"
               hint="My Last.fm account"></button-8831>
    <button-8831 href="https://open.spotify.com/user/deyoloboy?si=3bca31169a434d4a"
               src="/assets/images/88x31/spotify.gif"
               hint="My Spotify account"></button-8831>
    <button-8831 href="https://www.blankbanshee.com/"
               src="/assets/images/88x31/blank-banshee.gif"
               hint="Blank Banshee"></button-8831>
    <button-8831 href="https://fmskyline.bandcamp.com/"
               src="/assets/images/88x31/fm-skyline.gif"
               hint="FMSkyline"></button-8831>
    <button-8831 href="https://luxuryelite.bandcamp.com/"
               src="/assets/images/88x31/luxury-elite.png"
               hint="Luxury Elite"></button-8831>
    <button-8831 href="https://nmesh.bandcamp.com/"
               src="/assets/images/88x31/nmesh.png"
               hint="nmesh"></button-8831>
    <!-- Fun -->
    <button-8831 href="https://www.depeuter.dev"
               src="/assets/images/88x31/the-digital-me.gif"
               hint="The Digital Me"></button-8831>
    <!-- Other -->
    <button-8831 href="https://88x31.nl/history.html"
               src="/assets/images/88x31/88x31.gif"
               hint="88x31?"></button-8831>
    <button-8831 href="https://www.youtube.com/watch?v=vTBQm9zmw8Y"
                src="/assets/images/88x31/thanks-for-looking.gif"
                hint="Thanks for looking!"></button-8831>
</my-marquee>
    `;

    return buttons;
}

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

        const templateContent = getButtons().content;
        const wrapper = templateContent.cloneNode(true);

        const shadowRoot = this.attachShadow({ mode: 'open' });
        shadowRoot.appendChild(wrapper);
    }
}

customElements.define('button-collection', ButtonCollection);
