{% extends "orgapy/layout/skeleton.html" %}
{% load static %}

{% block title %}Edit {% if document.title %}'{{ document.title }}'{% else %}note{% endif %}{% endblock title %}

{% block head %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'orgapy/dependencies/simplemde.min.css' %}" />
<script src="{% static 'orgapy/dependencies/simplemde.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'orgapy/css/notes.css' %}" />
<script src="{% static 'orgapy/js/notes.js' %}"></script>
{% endblock %}

{% block column_main %}
<form id="noteForm" action="{% url 'orgapy:document' document.nonce %}" method="post">
    {% csrf_token %}
    <input id="inputEtag" type="hidden" name="etag" value="{{ etag }}">
    <header class="card card--nobottom">
        <h1 class="card-header">
            <input class="input-inline" type="text" name="title" placeholder="Title" maxlength="255" value="{% if document.title %}{{ document.title }}{% endif %}" />
        </h1>
        <div class="card-body">{% include 'orgapy/partials/categories_input.html' with obj=document %}</div>
    </header>
    <div class="card-actions card-actions--sticky">
        <button id="buttonSave" type="submit" name="action" value="save"><i class="ri-save-line"></i> Save</button>
        <button id="buttonContinue" disabled type="submit" name="action" value="continue"><i class="ri-save-line"></i> Save and continue</button>
        <a class="button" href="{{ document.get_absolute_url }}"><i class="ri-arrow-right-circle-line"></i> View note</a>
    </div>
    <textarea class="document-form-content" id="noteContentInput" name="content" placeholder="Write content using Markdown">{% if document.content %}{{ document.content }}{% endif %}</textarea>
</form>
<script>
if (window.innerWidth > 800) {
    const simplemde = new SimpleMDE({
        element: noteContentInput,
        autoDownloadFontAwesome: false,
        autofocus: true,
        autosave: false,
        forceSync: true, // ?
        indentWithTabs: false,
        initialValue: noteContentInput.value,
        lineWrapping: true,
        status: false,
        toolbar: false,
        toolbarTips: false,
        spellChecker: false,
        renderingConfig: {
            singleLineBreaks: true,
            codeSyntaxHighlighting: true,
        }
    });
    simplemde.codemirror.on("cursorActivity", (cmInstance) => {
        onCmCursorActivity(cmInstance, "{% url 'orgapy:suggestions' %}", "{% url 'orgapy:documents' %}")
    });
    simplemde.codemirror.on("change", () => {
        if (buttonContinue != null) buttonContinue.removeAttribute("disabled");
    });
    window.addEventListener("load", () => {
        simplemde.codemirror.refresh();
    });
} else {
    noteContentInput.style.height = (window.innerHeight - 290) + "px";
}
buttonContinue.onclick = (e) => {
    e.preventDefault();
    buttonContinue.setAttribute("disabled", "");
    const formData = new FormData(noteForm);
    formData.append("action", "continue");
    post(noteForm.getAttribute("action"), formData, inputEtag.value, (newEtag) => {inputEtag.value = newEtag})
        .then(res => {showToast("Saved note")})
        .catch(msg => {showToast(msg, true)});
};
document.querySelectorAll("input,textarea").forEach(input => {
    input.addEventListener("input", () => {
        buttonContinue.removeAttribute("disabled");
    });
});
</script>
{% endblock %}