{{define "title"}}{{.note.Title}}{{end}}
{{define "main"}}
<div>
{{.note.BodyRendered}}
</div>
<div class="d-flex justify-content-between">
    <a class="btn btn-primary" href="{{.urlEdit}}">Edit</a>
    <a class="btn btn-danger" href="{{.urlDelete}}">Delete</a>
</div>
{{ if .isOwner }}
<div class="mt-2">
    <h3>Ownership</h3>
    {{if .note.Viewers}}
    <p>This note is owned by <em>{{.note.Owner}}</em> and is further visible to</p>
    <form action="{{.urlUnshare}}" method="POST">
    <table class="table vertical-align-middle">
        {{range .viewers}}
            <tr>
                <td>{{.}}</td>
                <td class="text-end">
                    <button class="btn btn-outline-warning btn-sm" type="submit" name="viewer" value="{{.}}">Un-Share</button>
                </td>
            </tr>
        {{end}}
    </table>
    </form>
    {{else}}
    <p>This note is owned by <em>{{.note.Owner}}</em>.</p>
    {{end}}

    <form action="{{.urlShare}}" method="POST">
    <div class="mb-3">
        <input type="text" class="form-control" id="viewerInput" name="viewer" aria-described-by="viewerHelp" />
        <div id="viewerHelp" class="form-text">Share with other user</div>
    </div>
    <button class="btn btn-primary" type="submit">Share</button>
</div>
{{end}}

<script>
    let checkBoxes = document.querySelectorAll('input[type=checkbox]')
    for (const i in checkBoxes) {
        let box = checkBoxes[i]
        box.disabled = false

        box.onchange = function(event) {
            let form = new FormData()
            form.append("box", i)

            fetch("togglebox/", {method: "POST", body: form}).then((response) => {
                location.reload();
            })
        }
    }

</script>
{{end}}