{{ define "header" }}
<header>
    <div class="rotating-pic-container">
        <img class="rotating-pic" src="/assets/pic/miffy.png?v={{ .version }}" 
            style="width: 100%; height: 100%;">
    </div>
    <div class="pulse-container">
        <p class="pulse-text">
            <code>🎵&nbsp;last played track: </code><code id="lastfm">waiting for a response from server... (JavaScript is required)</code><code>&nbsp;🎵</code>
        </p>
    </div>
    <div>
        <h1>
            contacts
        </h1>
        <p>
            you can message me on <a href="https://t.me/semaphoreslover" target="_blank">telegram</a> or <a href="https://mastodon.ml/@serr" target="_blank">mastodon</a>
        </p>
    </div>
    <div>
        <p>
            > <a href="/">main page</a><br/>
            > <a href="/posts/">posts section</a>
        </p>
    </div>
    <div>
        <p>
            and also you can subscribe to my <a href="https://t.me/lolistack" target="_blank">telegram channel</a> with pictures!
        </p>
    </div>

    <script>
        function updateLastfm() {
            fetch('/api/lastfm')
                .then(response => response.text())
                .then(text => {
                    document.getElementById('lastfm').textContent = text;
                })
                .catch(error => {
                    console.error('Error fetching lastfm:', error);
                });
        }

        updateLastfm();
        
        setInterval(updateLastfm, 30000);
    </script>
</header>
{{ end }}