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

{{define "content"}}
<header>
    <img src="/img/favicon.png" alt="" class="icon">
    <a href="/admin">home</a>
    <a href="/admin/releases">releases</a>
    <a href="/admin/artists">artists</a>
</header>

<main>

    <h1>Releases</h1>
    <div class="card releases">
        {{range $Release := .Releases}}
        <div class="release">
            <div class="release-artwork">
                <img src="{{$Release.Artwork}}" alt="" width="128" loading="lazy">
            </div>
            <div class="release-info">
                <h3 class="release-title">{{$Release.Title}} <small>{{$Release.GetReleaseYear}}</small></h3>
                <p class="release-artists">{{$Release.PrintArtists true true}}</p>
                <p class="release-type-single">{{$Release.ReleaseType}}</p>
                <div class="release-actions">
                    <a href="/admin/releases/{{$Release.ID}}">Edit</a>
                    <a href="/music/{{$Release.ID}}" target="_blank">Gateway</a>
                </div>
            </div>
        </div>
        {{end}}
        {{if not .Releases}}
        <p>There are no releases.</p>
        {{end}}
    </div>

    <h1>Artists</h1>
    <div class="card artists">
        {{range $Artist := .Artists}}
        <div class="artist">
            <img src="https://arimelody.me/img/favicon.png" alt="" width="64" loading="lazy" class="artist-avatar">
            <a href="/admin/artists/arimelody" class="artist-name">ari melody</a>
        </div>       
        {{end}}
        {{if not .Artists}}
        <p>There are no artists.</p>
        {{end}}
    </div>

</main>

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