{% extends 'base.html' %}

{% block extrastyles %}
<link rel="stylesheet" href="/media/quill.snow.css" />
{% endblock %}
{% block content %}
<main>
    <h1>Create a new note</h1>
    <form id="new-note-form" action="{% url 'notes:note-create' %}" method="post">
{% csrf_token %}
{{ form.non_field_errors }}
{% for field in form %}
<fieldset class="{% if field.errors %}error {%endif%}{% if field.name == 'body_qjson' or field.name == 'body_html' %}hide {%endif%}" id="fs-{{field.name}}" >
{{field.label_tag}}
{{field}}
{% if field.errors %}{{field.errors}}{% endif %}
</fieldset>
{% if field.name == 'body_qjson' %}
<div id="q-container">
    <div id="note-body"></div>
</div>
{% endif %}
{% endfor %}
<p><input class="btn btn-inline" value="submit" type="submit" /></p>
</form>
</main>
{% endblock %}

{% block jsinclude %}
<script src="/media/js/highlight.pack.js"></script>
<script src="/media/js/quill.min.js"></script>
{% endblock %}

<script>
{% block jsdomready %}
    var note_text = document.getElementById('id_body_text');
    note_text.innerHTML = "q";
    var plaintext = document.getElementById("fs-body_text");
    plaintext.classList.add('hide')
    initQuill("#note-body");
    var form = document.getElementById('new-note-form');
    console.log(form);
    form.onsubmit = function() {
        var note_qjson = document.getElementById('id_body_qjson');
        note_qjson.innerHTML= JSON.stringify(window.quill.getContents());
        var note_html = document.getElementById('id_body_html');
        note_html.innerHTML = window.quill.root.innerHTML;
        var note_text = document.getElementById('id_body_text');
        note_text.innerHTML = window.quill.getText();
    };
{% endblock %}
</script>