arimelody.me/admin/components/credits/editcredits.html

<dialog id="editcredits">
    <header>
        <h2>Editing: Credits</h2>
        <a id="add-credit"
           class="button new"
           href="/admin/release/{{.ID}}/addcredit"
           hx-get="/admin/release/{{.ID}}/addcredit"
           hx-target="body"
           hx-swap="beforeend"
        >Add</a>
    </header>

    <form action="/api/v1/music/{{.ID}}/credits">
        <ul>
            {{range .Credits}}
            <li class="credit" data-artist="{{.Artist.ID}}">
                <div>
                    <img src="{{.Artist.GetAvatar}}" alt="" width="64" loading="lazy" class="artist-avatar">
                    <div class="credit-info">
                        <p class="artist-name">{{.Artist.Name}}</p>
                        <div class="credit-attribute">
                            <label for="role">Role:</label>
                            <input type="text" name="role" value="{{.Role}}">
                        </div>
                        <div class="credit-attribute">
                            <label for="primary">Primary:</label>
                            <input type="checkbox" name="primary" {{if .Primary}}checked{{end}}>
                        </div>
                    </div>
                    <a class="delete">Delete</a>
                </div>
            </li>
            {{end}}
        </ul>

        <div class="dialog-actions">
            <button id="discard" type="button">Discard</button>
            <button id="save" type="submit" class="save">Save</button>
        </div>
    </form>

    <script type="module">
        import { makeMagicList } from "/admin/static/admin.js";

        (() => {
            const container = document.getElementById("editcredits");
            const form = document.querySelector("#editcredits form");
            const creditList = form.querySelector("ul");
            const addCreditBtn = document.getElementById("add-credit");
            const discardBtn = form.querySelector("button#discard");

            makeMagicList(creditList, ".credit");

            function rigCredit(el) {
                console.log(el);
                const artistID = el.dataset.artist;
                const deleteBtn = el.querySelector("a.delete");

                deleteBtn.addEventListener("click", e => {
                    if (!confirm("Are you sure you want to delete " + artistID + "'s credit?")) return;
                    el.remove();
                });

                el.draggable = true;
                el.addEventListener("dragstart", () => { el.classList.add("moving") });
                el.addEventListener("dragend", () => { el.classList.remove("moving") });
            }

            [...creditList.querySelectorAll(".credit")].map(rigCredit);

            creditList.addEventListener("htmx:afterSwap", () => {
                rigCredit(creditList.children[creditList.children.length - 1]);
            });

            container.showModal();

            container.addEventListener("close", () => {
                container.remove();
            });

            form.addEventListener("submit", e => {
                const credits = [...creditList.querySelectorAll(".credit")].map(el => {
                    return {
                        "artist": el.dataset.artist,
                        "role": el.querySelector(`input[name="role"]`).value,
                        "primary": el.querySelector(`input[name="primary"]`).checked,
                    };
                });

                e.preventDefault();
                fetch(form.action, {
                    method: "PUT",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify(credits)
                }).then(res => {
                    if (res.ok) location = location;
                    else {
                        res.text().then(err => {
                            alert(err);
                            console.error(err);
                        });
                    }
                }).catch(err => {
                    alert("Failed to update credits. Check the console for details.");
                    console.error(err);
                });
            });

            discardBtn.addEventListener("click", e => {
                e.preventDefault();
                container.close();
            });
        })();
    </script>
</dialog>