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

{{define "content"}}
<main>

    <div class="card-title">
        <h1>Releases</h1>
        <a class="create-btn" id="create-release">Create New</a>
    </div>
    <div class="card releases">
        {{range .Releases}}
        {{block "release" .}}{{end}}
        {{end}}
        {{if not .Releases}}
        <p>There are no releases.</p>
        {{end}}
    </div>

    <div class="card-title">
        <h1>Artists</h1>
        <a class="create-btn" id="create-artist">Create New</a>
    </div>
    <div class="card artists">
        {{range $Artist := .Artists}}
        <div class="artist">
            <img src="{{$Artist.GetAvatar}}" alt="" width="64" loading="lazy" class="artist-avatar">
            <a href="/admin/artist/{{$Artist.ID}}" class="artist-name">{{$Artist.Name}}</a>
        </div>       
        {{end}}
        {{if not .Artists}}
        <p>There are no artists.</p>
        {{end}}
    </div>

    <div class="card-title">
        <h1>Tracks</h1>
        <a class="create-btn" id="create-track">Create New</a>
    </div>
    <div class="card tracks">
        <p><em>"Orphaned" tracks that have not yet been bound to a release.</em></p>
        <br>
        {{range $Track := .Tracks}}
        <div class="track">
            <h2 class="track-title">
                <a href="/admin/track/{{$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}}
        {{if not .Artists}}
        <p>There are no artists.</p>
        {{end}}
    </div>

</main>

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