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

{{define "content"}}
<main>
    <h1>Editing Blog Post</h1>

    <div id="blogpost" data-id="{{.Post.ID}}">
        <label for="title">Title</label>
        <h2 id="blog-title">
            <div
                id="title"
                name="title"
                role="textbox"
                aria-multiline="true"
                spellcheck="true"
                aria-haspopup="listbox"
                aria-invalid="false"
                aria-autocomplete="list"
                autocorrect="off"
                contenteditable="true"
                zindex="-1"
                >{{.Post.Title}}</div>
        </h2>

        <label for="description">Description</label>
        <textarea
                id="description"
                name="description"
                value="{{.Post.Description}}"
                placeholder="No description provided."
                rows="3"
                >{{.Post.Description}}</textarea>

        <label for="markdown">Markdown</label>
        <textarea
                id="markdown"
                name="markdown"
                value="{{.Post.Markdown}}"
                rows="30"
                >{{.Post.Markdown}}</textarea>

        <label for="bluesky-actor">Bluesky Author DID</label>
        <input
                type="text"
                name="bluesky-actor"
                id="bluesky-actor"
                placeholder="did:plc:1234abcd..."
                value="{{if .Post.BlueskyActorID}}{{.Post.BlueskyActorID}}{{end}}">
        <label for="bluesky-post">Bluesky Post ID</label>
        <input
                type="text"
                name="bluesky-post"
                id="bluesky-post"
                placeholder="3m109a03..."
                value="{{if .Post.BlueskyPostID}}{{.Post.BlueskyPostID}}{{end}}">

        <label for="visibility">Visibility</label>
        <select name="visibility" id="visibility">
            <option value="true"{{if .Post.Visible}} selected{{end}}>Visible</option>
            <option value="false"{{if not .Post.Visible}} selected{{end}}>Hidden</option>
        </select>

        <div class="blog-actions">
            <a href="/blog/{{.Post.ID}}" class="button">View</a>
            <button type="submit" class="save" id="save" disabled>Save</button>
        </div>
    </div>

    <div class="card" id="danger">
        <div class="card-header">
            <h2>Danger Zone</h2>
        </div>
        <p>
        Clicking the button below will delete this blog post.
        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-blog.js"></script>
{{end}}