<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <% if (title) { %>
    <title><%= title %> | Fire %></title>
    <meta property="og:title" content="<%= title %> on Fire">
    <meta property="og:description" content="<%= title %>, on Fire. Listen to your favorite music, upload your own, and share with the world, it's Fire">
    <meta property="og:image" content="<%= embed %>">
    <link as="image" rel="preload" href="<%= embed %>">
    <meta property="og:image:width" content="500">
    <meta property="og:image:height" content="500">
    <% } else { %>
    <title>Welcome to Fire | Create, Upload, Share, it's Fire</title>
    <meta property="og:title" content="Create, Upload, Share | it's Fire">
    <meta property="og:description" content="Listen to your favorite music, upload your own, and share with the world, it's Fire">
    <meta property="og:image" content="https://tallerthanshort.github.io/ut3.ggpht/icons/fire_logo.png">
    <link rel="canonical" href="https://fire-glsp.onrender.com/">
    <link rel="alternate" media="handheld" href="https://fire-glsp.onrender.com/">
    <link rel="alternate" media="only screen and (max-width: 640px)" href="https://fire-glsp.onrender.com/">
    <% } %>
    <link rel="icon" type="image/png" href="https://tallerthanshort.github.io/ut3.ggpht/icons/fire_logo.png">
    <meta name="description" content="Listen to your favorite music, upload your own, and share with the world, it's Fire">
    <meta property="og:site_name" content="Create, Upload, Share, it's Fire ðŸ”¥">
    <meta name="theme-color" content="rgba(33, 33, 33, 0.98)">
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <%- include('../partials/cookies') %>
    <%- include('../partials/header', { username: username, uid: uid }) %>
      
    <div class="app-container">
        <div class="gridz">
            <% for (const track of tracks) { %>
                <div onclick="location.href='<%= track.link %>'" title="Listen to <%= track.name %> by <%= track.uploader %>">
                    <div class="slot">
                        <div class="cover-art">
                            <img class="cover-img" src="<%= track.cover %>">
                        </div>
                        <div class="track-descriptors">
                            <div class="track-desc">
                                <div class="track-name"><%= track.name %></div>
                                <div class="track-owner"><%= track.uploader %></div>
                            </div>
                        </div>
                    </div>
                </div>
              <% } %>
              <a id="traplink" class="ad adslot" href="/" style="text-decoration: none;">
                <div class="slot">
                    <div class="cover-art2">
                            <img id="sad-le" class="cover-img" src="https://place-hold.it/200x200">
                    </div>
                    <div class="track-descriptors">
                        <div class="track-desc">
                            <div class="track-owner" style="color: white;">Advertisement</div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </div>
    <br><br><br><br>
    <script>
        fetch('https://ad-ggpht.onrender.com/api/banner')
            .then(result => result.json())
            .then(response => {
                const { name, forward } = response;
                document.getElementById("sad-left").src = name;
                document.getElementById("traplink").href = forward;
            });
    </script>

    <%- include('../partials/player', { title: title, source: source }) %>
</body>
</html>