обновление трека через htmx

mvc/views/blocks/header.gohtml

@@ -6,7 +6,11 @@
     </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>
+            <code>🎵&nbsp;last played track: </code><code id="lastfm"
+            hx-get="/api/lastfm"
+            hx-trigger="load, every 30s"
+            hx-target="#lastfm"
+            hx-swap="innerHTML">waiting for a response from server... (JavaScript is required)</code><code>&nbsp;🎵</code>
         </p>
     </div>
     <div>
@@ -39,22 +43,5 @@
             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 }}