{{define "note"}}
{{if ne .Err nil}}
{{block "error" .}}{{end}}
{{else}}
<div class="container mb-4">
    <div class="d-flex flex-wrap py-2">
        <span class="fs-4 d-flex mb-3 mb-md-0 me-md-auto text-decoration-none">Note {{.Note.ID}}</span>
        <ul class="nav nav-pills align-items-center">
            <li class="nav-item">
                <button type="button" class="btn btn-link" id="copier">copier</button>
            </li>
            <li class="nav-item">
                <button type="button" class="btn btn-link" id="curl">curl</button>
            </li>
            <li class="nav-item px-2">
                <a href="" id="rawURL">raw</a>
                <script>document.getElementById("rawURL").href = window.location.href.replace(".html", "");</script>
            </li>
            <li class="nav-item px-2">
                {{.Note.Language}}
            </li>
            {{if eq .Note.DeleteAfterRead false}}
            <li class="nav-item px-2">
                expires in {{HumanDuration (TimeDiff .Note.ExpiresAt)}}
            </li>
            {{end}}
        </ul>
    </div>
    <script>
        var password = "{{ .Password }}";
        var encryptionKey = window.location.hash.substr(1);
    </script>
    <div id="copierContainer" style="display: none;" class="alert alert-info alert-dismissible" role="alert">
        <p>Access the note with <strong>copier</strong>:</p>
        <pre id="copierCommand" style="border: 1px solid;" class="p-2"></pre>
        <button type="button" class="btn-close" data-dismiss="alert" aria-label="Close" id="copierClose">
            <span aria-hidden="true"></span>
        </button>
    </div>
    <script>
        var copierCommand = "copier";
        var copierOpts = "";
        if (password != "") {
            copierOpts += " -password '" + password + "'";
        }
        copierCommand += copierOpts + " " + window.location.origin + "/{{ .Note.ID }}";

        if (encryptionKey != "") {
            copierCommand += "#" + encryptionKey;
        }
        document.getElementById("copierCommand").innerText = copierCommand;
        document.getElementById("copier").addEventListener("click", () => {
            document.getElementById("copierContainer").style.display = "";
        });
        document.getElementById("copierClose").addEventListener("click", () => {
            document.getElementById("copierContainer").style.display = "none";
        });
    </script>
    <div id="curlContainer" style="display: none;" class="alert alert-info alert-dismissible" role="alert">
        <p>Access the note with <strong>curl</strong>:</p>
        <pre id="curlCommand" style="border: 1px solid;" class="p-2"></pre>
        <button type="button" class="btn-close" data-dismiss="alert" aria-label="Close" id="curlClose">
            <span aria-hidden="true"></span>
        </button>
    </div>
    <script>
        var curlCommand = "curl";
        var curlData = {};
        if (encryptionKey != "") {
            curlData.encryption_key = encryptionKey;
        };
        if (password != "") {
            curlData.password = window.btoa(password);
        }
        var payload = JSON.stringify(curlData);
        if (payload != "{}") {
            curlCommand += " -XPOST -d '" + payload + "'";
        }
        curlCommand += " " + window.location.origin + "/api/note/{{ .Note.ID }}";
        document.getElementById("curlCommand").innerText = curlCommand;
        document.getElementById("curl").addEventListener("click", () => {
            document.getElementById("curlContainer").style.display = "";
        });
        document.getElementById("curlClose").addEventListener("click", () => {
            document.getElementById("curlContainer").style.display = "none";
        });
    </script>
    {{if .DisableEditor}}
    <div class="row">
        <pre class="border px-3 pt-3" style="min-height: 300px; resize: vertical; overflow: auto;">
{{string .Note.Content}}
            </pre>
    </div>
    {{else}}
    <div class="row">
        <div id="editor" name="editor" class="form-control"
            style="min-height: 300px; resize: vertical; overflow: auto;">
        </div>
    </div>
    <script
        src="{{if .AceDirectory}}/static/ace-builds{{else}}https://cdn.jsdelivr.net/npm/ace-builds@1.43.3{{end}}/src-noconflict/ace.js"
        type="text/javascript" charset="utf-8"></script>
    <script>
        var editor = ace.edit("editor");
        editor.setValue("{{string .Note.Content}}");
        editor.setReadOnly(true);
        editor.getSession().setMode("ace/mode/{{.Note.Language}}");
        editor.getSession().selection.clearSelection();
        editor.setOptions({ maxLines: Infinity });

        if (document.documentElement.getAttribute('data-bs-theme') == 'light') {
            editor.setTheme("ace/theme/github_light_default");
        } else {
            editor.setTheme("ace/theme/github_dark");
        }

        // Dark mode
        document.getElementById("lightSwitch").addEventListener("click", () => {
            if (document.documentElement.getAttribute('data-bs-theme') == 'light') {
                editor.setTheme("ace/theme/github_light_default")
            } else if (document.documentElement.getAttribute('data-bs-theme') == 'dark') {
                editor.setTheme("ace/theme/github_dark")
            }
        });
    </script>
    {{end}}
</div>
{{end}}
{{end}}