{{define "head"}}
<title>Editing Track - ari melody 💫</title>
<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/admin/static/edit-track.css">
<link rel="stylesheet" href="/admin/static/tracks.css">
<link rel="stylesheet" href="/admin/static/releases.css">
{{end}}

{{define "content"}}
<main>
    <h1>Editing Track</h1>
        
    <div id="track" data-id="{{.Track.ID}}">
        <div class="track-info">
            <p class="attribute-header">Title</p>
            <h2 class="track-title">
                <input type="text" id="title" name="Title" value="{{.Track.Title}}">
            </h2>

            <p class="attribute-header">Description</p>
            <textarea
                    name="Description"
                    value="{{.Track.Description}}"
                    placeholder="No description provided."
                    rows="5"
                    id="description"
                    >{{.Track.Description}}</textarea>

            <p class="attribute-header">Lyrics</p>
            <textarea
                    name="Lyrics"
                    value="{{.Track.Lyrics}}"
                    placeholder="There are no lyrics."
                    rows="5"
                    id="lyrics"
                    >{{.Track.Lyrics}}</textarea>

            <div class="track-actions">
                <button type="submit" class="save" id="save" disabled>Save</button>
            </div>
        </div>
    </div>

    <div class="card releases">
        <div class="card-header">
            <h2>Featured in</h2>
        </div>
        {{if .Releases}}
        {{range .Releases}}
        {{block "release" .}}{{end}}
        {{end}}
        {{else}}
        <p>This track isn't bound to a release.</p>
        {{end}}
    </div>

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

</main>

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