{{define "head"}}
<title>Artists - 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>
    <h1>Artists</h1>

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

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