{{define "head"}}
<title>Editing {{.Release.Title}} - ari melody 💫</title>
<link rel="shortcut icon" href="{{.Release.GetArtwork}}" type="image/x-icon">
<link rel="stylesheet" href="/admin/static/edit-release.css">
{{end}}

{{define "content"}}
<main>

    <div id="release" data-id="{{.Release.ID}}">
        <div class="release-artwork">
            <img src="{{.Release.Artwork}}" alt="" width="256" loading="lazy" id="artwork">
            <input type="file" id="artwork-file" name="Artwork" accept=".png,.jpg,.jpeg" hidden>
            <button id="remove-artwork">Remove</button>
        </div>
        <div class="release-info">
            <h1 class="release-title">
                <input type="text" id="title" name="Title" value="{{.Release.Title}}" autocomplete="on">
            </h1>
            <table>
                <tr>
                    <td>Type</td>
                    <td>
                        {{$t := .Release.ReleaseType}}
                        <select name="Type" id="type">
                            <option value="single" {{if eq $t "single"}}selected{{end}}>
                            Single
                            </option>
                            <option value="album" {{if eq $t "album"}}selected{{end}}>
                            Album
                            </option>
                            <option value="ep" {{if eq $t "ep"}}selected{{end}}>
                            EP
                            </option>
                            <option value="compilation" {{if eq $t "compilation"}}selected{{end}}>
                            Compilation
                            </option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Description</td>
                    <td>
                        <textarea
                                name="Description"
                                value="{{.Release.Description}}"
                                placeholder="No description provided."
                                rows="3"
                                id="description"
                                >{{.Release.Description}}</textarea>
                    </td>
                </tr>
                <tr>
                    <td>Release Date</td>
                    <td>
                        <input type="datetime-local" name="release-date" id="release-date" value="{{.Release.TextReleaseDate}}">
                    </td>
                </tr>
                <tr>
                    <td>Buy Name</td>
                    <td>
                        <input type="text" name="buyname" id="buyname" value="{{.Release.Buyname}}" autocomplete="on">
                    </td>
                </tr>
                <tr>
                    <td>Buy Link</td>
                    <td>
                        <input type="text" name="buylink" id="buylink" value="{{.Release.Buylink}}" autocomplete="on">
                    </td>
                </tr>
                <tr>
                    <td>Copyright</td>
                    <td>
                        <input type="text" name="copyright" id="copyright" value="{{.Release.Copyright}}" autocomplete="on">
                    </td>
                </tr>
                <tr>
                    <td>Copyright URL</td>
                    <td>
                        <input type="text" name="copyright-url" id="copyright-url" value="{{.Release.CopyrightURL}}" autocomplete="on">
                    </td>
                </tr>
                <tr>
                    <td>Visible</td>
                    <td>
                        <select name="Visibility" id="visibility">
                            <option value="true" {{if .Release.Visible}}selected{{end}}>True</option>
                            <option value="false" {{if not .Release.Visible}}selected{{end}}>False</option>
                        </select>
                    </td>
                </tr>
            </table>
            <div class="release-actions">
                <a href="/music/{{.Release.ID}}" class="button" target="_blank">Gateway <img class="icon" src="/img/external-link.svg"/></a>
                <button type="submit" class="save" id="save" disabled>Save</button>
            </div>
        </div>
    </div>

    <div class="card" id="credits">
        <div class="card-header">
            <h2>Credits <small>({{len .Release.Credits}} total)</small></h2>
            <a class="button edit"
               href="/admin/release/{{.Release.ID}}/editcredits"
               hx-get="/admin/release/{{.Release.ID}}/editcredits"
               hx-target="body"
               hx-swap="beforeend"
               >Edit</a>
        </div>
        {{range .Release.Credits}}
        <div class="credit">
            <img src="{{.Artist.GetAvatar}}" alt="" width="64" loading="lazy" class="artist-avatar">
            <div class="credit-info">
                <p class="artist-name"><a href="/admin/artist/{{.Artist.ID}}">{{.Artist.Name}}</a></p>
                <p class="artist-role">
                {{.Role}}
                {{if .Primary}}
                <small>(Primary)</small>
                {{end}}
                </p>
            </div>
        </div>       
        {{end}}
        {{if not .Release.Credits}}
        <p>There are no credits.</p>
        {{end}}
    </div>

    <div class="card" id="links">
        <div class="card-header">
            <h2>Links ({{len .Release.Links}})</h2>
            <a class="button edit"
               href="/admin/release/{{.Release.ID}}/editlinks"
               hx-get="/admin/release/{{.Release.ID}}/editlinks"
               hx-target="body"
               hx-swap="beforeend"
               >Edit</a>
        </div>
        <ul>
            {{range .Release.Links}}
            <a href="{{.URL}}" target="_blank" class="button" data-name="{{.Name}}">{{.Name}} <img class="icon" src="/img/external-link.svg"/></a>
            {{end}}
        </ul>
    </div>

    <div class="card" id="tracks">
        <div class="card-header" id="tracks">
            <h2>Tracklist ({{len .Release.Tracks}})</h2>
            <a class="button edit"
               href="/admin/release/{{.Release.ID}}/edittracks"
               hx-get="/admin/release/{{.Release.ID}}/edittracks"
               hx-target="body"
               hx-swap="beforeend"
               >Edit</a>
        </div>
        {{range $i, $track := .Release.Tracks}}
        <div class="track" data-id="{{$track.ID}}">
            <h2 class="track-title">
                <span class="track-number">{{.Add $i 1}}</span>
                <a href="/admin/track/{{$track.ID}}">{{$track.Title}}</a>
            </h2>

            <h3>Description</h3>
            {{if $track.Description}}
            <p class="track-description">{{$track.GetDescriptionHTML}}</p>
            {{else}}
            <p class="track-description empty">No description provided.</p>
            {{end}}

            <h3>Lyrics</h3>
            {{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>

    <div class="card" id="danger">
        <div class="card-header">
            <h2>Danger Zone</h2>
        </div>
        <p>
        Clicking the button below will delete this release.
        This action is <strong>irreversible</strong>.
        You will be prompted to confirm this decision.
        </p>
        <button class="delete" id="delete">Delete Release</button>
    </div>

</main>

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