{% extends "base.html" %}

{% block styles %}
{% if user.can_write(page) %}
  <link rel="stylesheet" href="/static/toastui-editor.css" />
{% else %}
  <link rel="stylesheet" href="/static/toastui-editor-viewer.min.css" />
{% endif %}
{% endblock %}

{% block content %}
    <div id='{% if user.can_write(page) %}editor{% else %}viewer{% endif %}' class='read-only'></div>
{% endblock %}



{% block scripts %}
    {% if user.can_write(page) %}
        <script src="/static/toastui-editor-all.min.js"></script>
        <script src="/static/site.js"></script>
        <script>initialize();</script>
    {% else %}
        <script src="/static/toastui-editor-viewer.min.js"></script>
        <script>
            const viewer = new toastui.Editor({
                viewer: true,
                el: document.querySelector("#viewer"),
                usageStatistics: false,
            });
            viewer.setMarkdown(document.getElementById("data_form__body").value);
        </script>
    {% endif %}
{% endblock %}