{{define "head"}}
<title>{{.Title}} - {{.PrintArtists true true}}</title>
<link rel="shortcut icon" href="{{.GetArtwork}}" type="image/x-icon">

<meta name="description" content="Stream &quot;{{.Title}}&quot; by {{.PrintArtists true true}} on all platforms!">
<meta name="author" content="{{.PrintArtists true true}}">
<meta name="keywords" content="{{.PrintArtists true false}}, 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="{{.Title}} - {{.PrintArtists true true}}">
<meta property="og:description" content="Stream &quot;{{.Title}}&quot; by {{.PrintArtists true true}} on all platforms!">
<meta property="og:image" content="https://arimelody.me{{.GetArtwork}}">

<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 true true}} - {{.Title}}">
<meta name="twitter:description" content="Stream &quot;{{.Title}}&quot; by {{.PrintArtists true true}} on all platforms!">
<meta name="twitter:image" content="https://arimelody.me{{.GetArtwork}}">
<meta name="twitter:image:alt" content="Cover art for &quot;{{.Title}}&quot;">

<link rel="stylesheet" href="/style/main.css">
<link rel="stylesheet" href="/style/music-gateway.css">
{{end}}

{{define "content"}}
<main>
    <script type="module" src="/script/music-gateway.js"></script>

    <div id="background" style="background-image: url({{.GetArtwork}})"></div>

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

    <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="{{.GetArtwork}}" alt="{{.Title}} artwork" width=240 height=240>
        </div>
        <div id="vertical-line"></div>
        <div id="info">
            <div id="overview">
                <div id="title-container">
                    <h1 id="title">{{.Title}}</h1>
                    <span id="year" title="{{.PrintReleaseDate}}">{{.GetReleaseYear}}</span>
                </div>
                <p id="artist">{{.PrintArtists true true}}</p>
                {{if .IsReleased}}
                <p id="type" class="{{.ReleaseType}}">{{.ReleaseType}}</p>
                {{else}}
                <p id="type" class="upcoming">upcoming</p>
                {{end}}

                <ul id="links">
                    {{if .Buylink}}
                    <li>
                        <a href="{{.Buylink}}" class="buy">{{or .Buyname "buy"}}</a>
                    </li>
                    {{end}}

                    {{range .Links}}
                    <li>
                        <a class="{{.NormaliseName}}" href="{{.URL}}">{{.Name}}</a>
                    </li>
                    {{end}}
                </ul>

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

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

            {{if .IsReleased}}

            {{if .Credits}}
            <div id="credits">
                <h2>credits:</h2>
                <ul>
                    {{range .Credits}}
                    {{$Artist := .Artist}}
                    {{if $Artist.GetWebsite}}
                    <li><strong><a href="{{$Artist.GetWebsite}}">{{$Artist.Name}}</a></strong>: {{.Role}}</li>
                    {{else}}
                    <li><strong>{{$Artist.Name}}</strong>: {{.Role}}</li>
                    {{end}}
                    {{end}}
                </ul>
            </div>
            {{end}}

            {{if .IsSingle}}
            {{$Track := index .Tracks 0}}
            {{if $Track.Lyrics}}
            <div id="lyrics">
                <h2>lyrics:</h2>
                <p>{{$Track.Lyrics}}</p>
            </div>
            {{end}}
            {{else}}
            <div id="tracks">
                <h2>tracks:</h2>
                {{range $i, $track := .Tracks}}
                <details>
                    <summary class="album-track-title">{{$track.Number}}. {{$track.Title}}</summary>
                    {{if $track.Lyrics}}
                    {{$track.Lyrics}}
                    {{else}}
                    <span class="empty">No lyrics.</span>
                    {{end}}
                </details>
                {{end}}
            </div>
            {{end}}

            {{end}}
        </div>

        {{if .IsReleased}}
        <div id="extras">
            <ul>
                <li><a href="#overview">overview</a></li>
                {{if .Credits}}
                <li><a href="#credits">credits</a></li>
                {{end}}

                {{if .IsSingle}}
                {{$Track := index .Tracks 0}}
                {{if $Track.Lyrics}}
                <li><a href="#lyrics">lyrics</a></li>
                {{end}}
                {{else}}
                <li><a href="#tracks">tracks</a></li>
                {{end}}
            </ul>
        </div>
        {{end}}
    </div>
</main>
{{end}}