<!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 (userpage) { %>
    <title><%= userpage %> | Fire %></title>
    <meta property="og:title" content="<%= userpage%> on Fire">
    <meta property="og:description" content="<%= userpage %>, 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 }) %>

    <div style="margin: 0 0 62px;">
        <div class="profileBody">
            <div style="display: block;">
                <div style="padding-top: 0; padding-bottom: 0; padding-right: 0; padding-left: 0; margin-top: 0; margin-bottom: 24px; margin-right: 0; margin-left: 0;">
                    <div style="padding-top: 0; padding-bottom: 0; padding-right: 0; padding-left: 0; margin-top: 0; margin-bottom: 40px; margin-right: 16px; margin-left: 16px;">
                        <div class="profileImg">
                            <div class="outterProImg">
                                <% if (embed) { %>
                                    <img src="<%= embed %>" style="border-radius: 50%; width: 100%; height: auto; border: 2px solid black;">
                                <% } else { %>
                                    <img src="https://tallerthanshort.github.io/ut3.ggpht/icons/fire_logo.png" style="border-radius: 50%; width: 100%; height: auto; border: 2px solid black;">
                                <% } %>
                            </div>
                            <div class="info">
                                <h3 title="Profiles are currently in beta" style="margin-top: 4px; margin-left: calc(90% - 29px); text-align: right;">BETA</h3>
                            </div>
                        </div>
                        <div class="usernamePos">
                            <h1 style="margin-bottom: 2px;"><%= userpage %></h1>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="app-container">
        <% if (tracks.length) { %>
            <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>
                <% } %>
            </div>
            <% } else { %>
                <h4><%= userpage %> hasn't uploaded anything... yet!</h4>
            <% } %>
    </div>
    <br><br><br><br>

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