{{define "title"}}Edit: {{.note.Title}}{{end}}
{{define "navExtra"}}<!-- -->{{end}}

{{define "main"}}
<form action="{{.urlSave}}" method="POST">
    <div class="mb-3">
        <input type="text" class="form-control" id="noteTitleInput" name="title" aria-described-by="titleHelp" value="{{.note.Title}}"/>
        <div id="titleHelp" class="form-text">Enter your note title</div>
    </div>
    <div class="mb-3">
        <div class="border rounded rounded-1">
            <div id="toolbar"></div>
            <textarea class="form-control" id="noteBodyInput" name="body" aria-described-by="bodyHelp">{{.text}}</textarea>
        </div>
        <div id="bodyHelp" class="form-text">Enter your note content in markdown</div>
    </div>
    <button class="btn btn-primary" type="submit">Save</button>
</form>

<script src="/static/js/easy-mde.min.js"></script>
<link
  rel="stylesheet"
  type="text/css"
  href="/static/css/easy-mde.min.css"
/>
<script type="text/javascript">


var easyMDE = new EasyMDE({
    textarea: "noteBodyInput",
    toolbar: [
        'bold',
        'italic',
        'strikethrough',
        'heading',
        '|',
        'unordered-list',
        'ordered-list',
        {
            name: 'checklist',
            action: (e) => {
                e.codemirror.replaceSelection('* [ ]  ');
                e.codemirror.focus();
            },
            className: 'fa fa-check-square-o',
            title: 'Add task list',
        },
        '|',
        'link',
        '|',
        'preview',
        'side-by-side'
    ],
    autosave: {enabled: true, uniqueId: "{{.note.Uid}}"},
    forceSync: true
});

let editTimeout;
let autoSaveDelay = 2000;

easyMDE.codemirror.on("change" , function() {
    clearTimeout(editTimeout);
    editTimeout = setTimeout(() => {
        let form = document.querySelector("form");
        let formData = new FormData(form);

        fetch("{{.urlSave}}", {
            method: "POST",
            body: formData,
        }).then((data) => {
            console.log("Saved Note")
        });
    }, autoSaveDelay);
});

</script>
{{end}}