<!DOCTYPE html>
<html lang="{{lang}}">

<head>
    <meta name="robots" content="noindex nofollow">
    <link rel="stylesheet" href="../styles.css">
    <title>{{page-title}}</title>
</head>

<body>
    <div id="language">
        {{language-switcher}}
    </div>

    <div id="navbar">
        <a href="index.html">home</a>
        <a href="music.html">music</a>
    </div>
    <div class="nowplaying">
        <iframe class="nowplaying" title="last.fm now playing widget"
            src="https://lastfm-embed.vercel.app/api/currently-playing?user=havulinnaan&lang={{lang-short}}&theme=catppuccinMocha&borderSize=0&borderRadius=16&showTitle=false&bgColor=%2351324A&textColor=%23DDDDEE&urlColor=%23DD7FB6&scrobbleColor=%23DD7FB6"></iframe>
    </div>

    <header id="about">
        <h1>{{music-heading}}</h1>
        <p>{{music-paragraph}}</p>
    </header>

    <h2 id="djent">djent</h2>

    <div style="display: flex;">
        <div class="audiocard audiocard-floating-left">
            <img class="albumcoversmall"
                src="https://archive.org/download/mbid-b0aba2a0-c210-4201-992e-0c5cc4069321/mbid-b0aba2a0-c210-4201-992e-0c5cc4069321-28191981668_thumb250.jpg"
                alt="Album cover of Periphery's Juggernaut: Alpha">
            <div class="audioinner">
                <p>Periphery - Rainbow Gravity</p>
                <a href="https://sumerianrecords.bandcamp.com/album/juggernaut-alpha">Juggernaut: Alpha</a>
                <audio controls>
                    <source src="../music/Periphery - Juggernnaut Alpha.mp3" type="audio/mpeg">
                    Your browser does not support the audio element.
                </audio>
            </div>
        </div>

        <p>{{djent-paragraph}}</p>

    </div>

    <h2 id="metalcore">metalcore</h2>

    <div style="display: flex;">
        <p>{{metalcore-paragraph}}</p>

        <div class="audiocard audiocard-floating-right">
            <img class="albumcoversmall"
                src="https://archive.org/download/mbid-886f742e-0bb9-4aad-992b-f43b39f6e054/mbid-886f742e-0bb9-4aad-992b-f43b39f6e054-26050116040_thumb250.jpg"
                alt="Album cover of Invent Animate's Greyview">
            <div class="audioinner">
                <p>Invent Animate - Cloud Cascade</p>
                <a href="https://inventanimate.bandcamp.com/album/greyview">Greyview</a>
                <audio controls>
                    <source src="../music/Invent Animate - Cloud Cascade.mp3" type="audio/mpeg">
                    Your browser does not support the audio element.
                </audio>
            </div>
        </div>
    </div>

    <h3>invent animate</h3>

    <p>{{invent-animate-paragraph}}</p>

    <h2 id="progressive">progressive metal</h2>

    <div class="audiocard">
        <img class="albumcoversmall"
            src="https://archive.org/download/mbid-dcb6d817-0f33-4faa-8720-fb720396a0a8/mbid-dcb6d817-0f33-4faa-8720-fb720396a0a8-14429420393_thumb250.jpg"
            alt="Album cover of Fallujah's Dreamless">
        <div class="audioinner">
            <p>Fallujah - Dreamless</p>
            <a href="https://fallujah.bandcamp.com/album/dreamless">Dreamless</a>
            <audio controls>
                <source src="../music/Fallujah - Dreamless.mp3" type="audio/mpeg">
                Your browser does not support the audio element.
            </audio>
        </div>
    </div>

    <h2 id="stats">some music stats</h2>

    <iframe width="550" height="650" title="last.fm top songs 7 days"
        src="https://lastfm-embed.vercel.app/api/top-tracks?user=havulinnaan&lang={{lang-short}}&theme=catppuccinMocha&borderSize=0&borderRadius=16&showTitle=true&bgColor=%2351324A&textColor=%23DDDDEE&urlColor=%23DD7FB6&scrobbleColor=%23DD7FB6&limit=12&period=7day&layout=vertical&rows=0&columns=2"></iframe>
    <iframe width="550" height="650" title="last.fm top artists last month"
        src="https://lastfm-embed.vercel.app/api/top-artists?user=havulinnaan&lang={{lang-short}}&theme=catppuccinMocha&borderSize=0&borderRadius=16&showTitle=true&bgColor=%2351324A&textColor=%23DDDDEE&urlColor=%23DD7FB6&scrobbleColor=%23DD7FB6&limit=12&period=1month&layout=vertical&rows=6&columns=2&usePlaceholderImage=false"></iframe>
    <iframe width="500" title="last.fm top artists last month"
        src="https://lastfm-embed.vercel.app/api/stats?user=havulinnaan&lang={{lang-short}}&theme=catppuccinMocha&borderSize=0&borderRadius=16&showTitle=false&bgColor=%2351324A&textColor=%23DDDDEE&urlColor=%23DD7FB6&scrobbleColor=%23DD7FB6&numberFormat=periods"></iframe>
</body>

</html>