{{define "title"}}{{.note.Title}}{{end}}
{{define "main"}}
<style>
li:has(> input[type="checkbox"]) {
    padding-top: 0.1em;
    padding-bottom: 0.1em;
    cursor: default;
}
</style>
<div id="noteContent">
    {{.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="accordion mt-3" id="supplementaryAccordion">
    <div class="accordion-item">
        <h3 class="accordion-header">
            <button class="accordion-button collapsed"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#collapseOwnership"
                aria-expanded="false"
                aria-controls="collapseOwnership">
                Ownership
            </button>
        </h3>
        <div id="collapseOwnership" class="accordion-collapse collapse" data-bs-parent="#supplementaryAccordion">
            <div class="accordion-body">
                {{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>
                </form>
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h3 class="accordion-header">
            <button class="accordion-button collapsed"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#collapseTags"
                aria-expanded="false"
                aria-controls="collapseTags">
                Tags
            </button>
        </h3>
        <div id="collapseTags" class="accordion-collapse collapse" data-bs-parent="#supplementaryAccordion">
            <div class="accordion-body">
                <form action="{{.urlSetTags}}" method="POST">
                    <div class="mb-3">
                        <input type="text" class="form-control" id="tagInput" name="tags" aria-described-by="tagHelp" value="{{.tags}}"/>
                        <div id="tagHelp" class="form-text">Tags</div>
                    </div>
                    <button class="btn btn-primary" type="submit">Set Tags</button>
                </form>
            </div>
        </div>
    </div>
</div>
{{end}}

<script>
let checkBoxes = document.querySelectorAll('input[type=checkbox]');
let noteContentWrapper = document.querySelector('#noteContent');
console.log(checkBoxes.keys())

for (const i of checkBoxes.keys()) {
    let box = checkBoxes[i]
    let parent = box.parentNode
    box.disabled = false

    box.onclick = function(event) {
        return false;
    }

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

        fetch("togglebox/", {method: "POST", body: form}).then((response) => {
            return response.json();
        }).then((json) => {
            box.checked = json.checked;
        })
    }
}

</script>
{{end}}