{{define "head"}}
<title>Releases - ari melody 💫</title>
<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/admin/static/admin.css">
<link rel="stylesheet" href="/admin/static/tracks.css">
{{end}}

{{define "content"}}
<main>
    <header>
        <h1><a href="/admin/tracks/">Tracks</a></h1>
        <a class="button new" id="create-track">Create New</a>
    </header>
        
    <div id="tracks">
        {{range $Track := .Tracks}}
        <div class="track">
            <h2 class="track-title">
                <a href="/admin/tracks/{{$Track.ID}}">{{$Track.Title}}</a>
            </h2>
            {{if $Track.Description}}
            <p class="track-description">{{$Track.GetDescriptionHTML}}</p>
            {{else}}
            <p class="track-description empty">No description provided.</p>
            {{end}}
            {{if $Track.Lyrics}}
            <p class="track-lyrics">{{$Track.GetLyricsHTML}}</p>
            {{else}}
            <p class="track-lyrics empty">There are no lyrics.</p>
            {{end}}
        </div>       
        {{end}}
    </div>
</main>

<script type="module" src="/admin/static/admin.js"></script>
{{end}}