{{define "head"}}
<title>Editing {{.Title}} - ari melody 💫</title>
<link rel="shortcut icon" href="{{.GetArtwork}}" type="image/x-icon">

<link rel="stylesheet" href="/admin/static/edit-release.css">
{{end}}

{{define "content"}}
<main>

    <div id="release" data-id="{{.ID}}">
        <div class="release-artwork">
            <img src="{{.Artwork}}" alt="" width="256" loading="lazy" id="artwork">
            <input type="file" id="artwork-file" name="Artwork" accept=".png,.jpg,.jpeg" hidden>
        </div>
        <div class="release-info">
            <h1 class="release-title">
                <input type="text" id="title" name="Title" value="{{.Title}}">
            </h1>
            <table>
                <tr>
                    <td>Type</td>
                    <td>
                        {{$t := .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="{{.Description}}"
                                placeholder="No description provided."
                                rows="1"
                                id="description"
                                >{{.Description}}</textarea>
                    </td>
                </tr>
                <tr>
                    <td>Release Date</td>
                    <td>
                        <input type="datetime-local" name="Release Date" id="release-date" value="{{.TextReleaseDate}}">
                    </td>
                </tr>
                <tr>
                    <td>Buy Name</td>
                    <td>
                        <input type="text" name="Buy Name" id="buyname" value="{{.Buyname}}">
                    </td>
                </tr>
                <tr>
                    <td>Buy Link</td>
                    <td>
                        <input type="text" name="Buy Link" id="buylink" value="{{.Buylink}}">
                    </td>
                </tr>
                <tr>
                    <td>Visible</td>
                    <td>
                        <select name="Visibility" id="visibility">
                            <option value="true" {{if .Visible}}selected{{end}}>True</option>
                            <option value="false" {{if not .Visible}}selected{{end}}>False</option>
                        </select>
                    </td>
                </tr>
            </table>
            <div class="release-actions">
                <a href="/music/{{.ID}}" class="button" target="_blank">Gateway <img src="/img/external-link.svg"/></a>
                <button type="submit" class="save" id="save" disabled>Save</button>
            </div>
        </div>
    </div>

    <div class="card-title">
        <h2>Credits ({{len .Credits}})</h2>
        <a class="button edit"
           href="/admin/release/{{.ID}}/editcredits"
           hx-get="/admin/release/{{.ID}}/editcredits"
           hx-target="body"
           hx-swap="beforeend"
           >Edit</a>
    </div>
    <div class="card credits">
        {{range .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/artists/{{.Artist.ID}}">{{.Artist.Name}}</a></p>
                <p class="artist-role">
                {{.Role}}
                {{if .Primary}}
                <small>(Primary)</small>
                {{end}}
                </p>
            </div>
        </div>       
        {{end}}
        {{if not .Credits}}
        <p>There are no credits.</p>
        {{end}}
    </div>

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

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

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

            <h3>Lyrics</h3>
            {{if .Lyrics}}
            <p class="track-lyrics">{{.Lyrics}}</p>
            {{else}}
            <p class="track-lyrics empty">There are no lyrics.</p>
            {{end}}
        </div>       
        {{end}}
    </div>

    <div class="card-title">
        <h2>Danger Zone</h2>
    </div>
    <div class="card danger">
        <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}}