{% 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 %}

            {% if content is not none %}
                {% autoescape false %}
                {{ markdown(content, extensions=['extra']) }}
                {% endautoescape %}
            {% else %}
                <p class="grayed">This document doesn't exist</p>
            {% endif %}
        {% else %}
            <form method="POST" action="/{{ path }}">
                {% set edit_content = content %}
                {% if content is none %}
                {% set edit_content = '# Title\n\nContent' %}
                {% endif %}
                <textarea id="markdown-textarea" name="text">{{ edit_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 %}