{% extends 'base.html' %}

{% block title %}{{ path }}{% endblock %}

{% macro render_tree(tree, root='/') %}
<ul>
    {% for entry in tree %}
    <li>
        {% set url = path_join(root, entry.name) %}
        <a href="{{ url }}">{{ entry.name }}</a>
        {{ render_tree(entry.children, url) }}
    </li>
    {% endfor %}
</ul>
{% endmacro %}

{% block body %}
<main>
    <nav>
        {{ render_tree(document_tree.root.children) }}
    </nav>

    <article>
        {% if not edit %}
            {% if path != '' %}
            <a href="{{ path }}?edit">Edit</a>
            {% endif %}

            {% autoescape false %}
            {{ markdown(content, extensions=['extra']) }}
            {% endautoescape %}
        {% else %}
            <form method="POST" action="{{ path }}">
                <textarea id="markdown-textarea" name="text">{{ content }}</textarea>
                <input type="submit" value="Save"/>
            <form>
            <script>
            const easyMDE = new EasyMDE({
                element: document.getElementById('markdown-textarea'),
                autosave: {
                  enabled: false,
                  uniqueId: "whatever-i-guess",
                  delay: 1000,
                  submit_delay: 5000,
                  timeFormat: {
                      locale: 'en-US',
                      format: {
                          //year: 'numeric',
                          //month: 'long',
                          //day: '2-digit',
                          hour: '2-digit',
                          minute: '2-digit',
                      },
                  },
                  text: "Autosaved: "
              },
            });
            </script>
        {% endif %}

        <hr/>

        {% for child in document_tree.get_node(path).children %}

        {% if loop.first %}
        <h1>Children</h1>
        {% endif %}

        <a href="{{ path_join(path, child.name) }}">{{child.name}}</a>{% if not loop.last %},{% endif %}
        {% endfor %}

    </article>
</main>

{% set footer = config.get('foote') %}
{% if footer not in [None, False, ""] %}
<footer>{{ config.get('footer') }}</footer>
{% endif %}

{% endblock %}