{% extends "base.html" %}

{% block styles %}
  <link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
{% endblock %}

{% block content %}
    {% include "breadcrumbs.html" %}
    <div id='viewer'></div>
    <div id='editor'></div>
{% endblock %}



{% block scripts %}
  <script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
  <script>
    const viewerEl = document.querySelector("#viewer");
    const editorEl = document.querySelector("#editor");;

    const initialValue = (
        "# " + document.getElementById("data_form__title").value + 
        "\n" +
        document.getElementById("data_form__body").value
    );

    const editor = new toastui.Editor({
        el: editorEl,
        initialEditType: 'wysiwyg',
        initialValue: initialValue,
        minHeight: '500px',
        previewStyle: 'tab',
        usageStatistics: false
    });

    const edit_btn = document.querySelector("#action__edit");
    const save_btn = document.querySelector("#action__save");

    toggleEditor = function() {
        if (edit_btn.dataset.state == 'view') {
            edit_btn.dataset.state = 'edit';
            edit_btn.innerText = "discard draft";
            viewerEl.style['display'] = "none";
            editorEl.style['display'] = "inline";
            save_btn.style['display'] = 'inline-block';
        } else {
            edit_btn.dataset.state = 'view';
            edit_btn.innerText = "edit";
            editorEl.style['display'] = "none";
            viewerEl.style['display'] = "inline";
            save_btn.style['display'] = 'none';
        }
    };

    edit_btn.addEventListener('click', toggleEditor)
    viewerEl.innerHTML = editor.getHTML();
    

  </script>
{% endblock %}