<!DOCTYPE html>
<html lang="en">
        <head>
                <meta http-equiv="content-type" content="text/html; charset=UTF-8">
                <meta charset="UTF-8">
                <meta http-equiv="X-UA-Compatible" content="IE=edge">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">

                <title>{{.PrintArtists}} - {{.Title}}</title>
                <link rel="icon" href="{{.ResolveArtwork}}">

                <meta name="description" content="Stream &quot;{{.Title}}&quot; by {{.PrintArtists}} on all platforms!">
                <meta name="author" content="{{.PrintArtists}}">
                <meta name="keywords" content="{{.PrintCommaArtists}}, music, {{.Title}}, {{.Id}}, {{.GetReleaseYear}}">

                <meta property="og:url" content="https://arimelody.me/music/{{.Id}}">
                <meta property="og:type" content="website">
                <meta property="og:locale" content="en_IE">
                <meta property="og:site_name" content="ari melody music">
                <meta property="og.Title" content="{{.PrintArtists}} - {{.Title}}">
                <meta property="og:description" content="Stream &quot;{{.Title}}&quot; by {{.PrintArtists}} on all platforms!">
                <meta property="og:image" content="https://arimelody.me{{.ResolveArtwork}}">

                <meta name="twitter:card" content="summary_large_image">
                <meta name="twitter:site" content="@funniduck">
                <meta name="twitter:creator" content="@funniduck">
                <meta property="twitter:domain" content="arimelody.me">
                <meta property="twitter:url" content="https://arimelody.me/music/{{.Id}}">
                <meta name="twitter.Title" content="{{.PrintArtists}} - {{.Title}}">
                <meta name="twitter:description" content="Stream &quot;{{.Title}}&quot; by mellodoot on all platforms!">
                <meta name="twitter:image" content="https://arimelody.me{{.ResolveArtwork}}">
                <meta name="twitter:image:alt" content="Cover art for &quot;{{.Title}}&quot;">

                <script type="module" src="/script/music-gateway.js" defer></script>
                <script type="text/javascript" src="/script/prideflag.js" defer></script>
                <link rel="stylesheet" href="/style/music-gateway.css">
        </head>
        <body>
                <div id="background" data-url="{{.ResolveArtwork}}"></div>
                <div id="overlay"></div>

                <a id="go-back" title="back to arimelody.me" href="/music">&lt;</a>

                {{block "header" .}}{{end}}

                <main>
                        <div id="music-container">
                                <div id="art-container">
                                        <div class="tilt-topleft"></div>
                                        <div class="tilt-top"></div>
                                        <div class="tilt-topright"></div>
                                        <div class="tilt-right"></div>
                                        <div class="tilt-bottomright"></div>
                                        <div class="tilt-bottom"></div>
                                        <div class="tilt-bottomleft"></div>
                                        <div class="tilt-left"></div>
                                        <img id="artwork" src="{{.ResolveArtwork}}" alt="{{.Title}} artwork" width=240 height=240>
                                </div>
                                <div id="vertical-line"></div>
                                <div id="info">
                                        <div id="main">
                                                <div id="title-container">
                                                        <h1 id="title">{{.Title}}</h1>
                                                        <span id="year">{{.GetReleaseYear}}</span>
                                                </div>
                                                <p id="artist">{{.PrintArtists}}</p>
                                                <p id="type" class="{{.Type}}">{{.Type}}</p>

                                                {{if .Description}}
                                                <p id="description">
                                                        {{.Description}}
                                                </p>
                                                {{end}}

                                                <div id="links">
                                                        {{if .Buylink}}
                                                        <a href="{{.Buylink}}" target="_blank" class="buy">
                                                                {{if .Buyname}}
                                                                        {{.Buyname}}
                                                                {{else}}
                                                                        buy
                                                                {{end}}
                                                        </a>
                                                        {{end}}

                                                        {{range .Links}}
                                                        <a class="{{.NormaliseName}}" target="_blank" href="{{.Url}}">
                                                                {{.Name}}
                                                        </a>
                                                        {{end}}
                                                </div>

                                                {{if or .Credits .Lyrics}}
                                                <ul id="extras">
                                                        {{if .Credits}}
                                                        <li><a href="#credits">credits</a></li>
                                                        {{end}}

                                                        {{if .Lyrics}}
                                                        <li><a href="#lyrics">lyrics</a></li>
                                                        {{end}}
                                                </ul>
                                                {{end}}

                                                <p id="share">share</p>
                                        </div>

                                        {{if .Credits}}
                                        <div id="credits">
                                                <a href="#" class="scrollback">go back</a>
                                                <h2>credits:</h2>
                                                <ul>
                                                        {{range .Credits}}
                                                        {{$Artist := .ResolveArtist}}
                                                        <li><strong><a href="{{$Artist.Website}}">{{$Artist.Name}}</a></strong>: {{.Role}}</li>
                                                        {{end}}
                                                </ul>
                                        </div>
                                        {{end}}

                                        {{if .Lyrics}}
                                        <div id="lyrics">
                                                <a href="#" class="scrollback">go back</a>
                                                <h2>lyrics:</h2>
                                                <p>{{.Lyrics}}</p>
                                        </div>
                                        {{end}}
                                </div>
                                <!-- <div id="tracks"> -->
                                <!--         <% var file = `/audio/preview/${data.id}.webm` %> -->
                                <!--         <% if (data.tracks && typeof(data.tracks) == typeof([])) { %> -->
                                <!--         <% for( let i = 0; i < data.tracks.length; i++ ) { %> -->
                                <!--                 <%  -->
                                <!--                 songid = data.tracks[i].title.toLowerCase().replace(/[^a-z0-9]/g, ""); -->
                                <!--                 file = `/audio/preview/${data.id}-${songid}.webm`; -->
                                <!--                 %> -->
                                <!---->
                                <!--                 <div class="track-preview" id="preview-<%= songid %>"> -->
                                <!--                         <i class="fa-solid fa-play play"></i> -->
                                <!--                         <p><%= data.tracks[i].title %></p> -->
                                <!--                         <audio src="<%= file %>"></audio> -->
                                <!--                 </div> -->
                                <!---->
                                <!--                 <% } %> -->
                                <!--                 <% } else { %> -->
                                <!--                 <div class="track-preview" id="preview-<%= data.id %>"> -->
                                <!--                         <i class="fa-solid fa-play play"></i> -->
                                <!--                         <p>{{.Title}}</p> -->
                                <!--                         <audio src="<%= file %>"></audio> -->
                                <!--                 </div> -->
                                <!--                 <% } %> -->
                                <!-- </div> -->
                        </div>
                </main>

                {{block "footer" .}}{{end}}
        </body>
</html>
