{% extends 'base.html' %}

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

{% macro render_tree(tree, root='/') %}
    <ul>
        {% for key, value in tree.items() %}
        <li><a href="{{ root }}{{ key }}">{{ key }}</a>
                {% if value is mapping %}
                    {{ render_tree(value, root + key + '/') }}
                {% endif %}
            </li>
        {% endfor %}
    </ul>
{% endmacro %}

{% block body %}
    <main>
        <nav>
            {{ render_tree(item_list) }}
        </nav>

        <article>
            {% if not edit %}
                {% autoescape false %}
                {{ markdown(content, extensions=['extra']) }}
                {% endautoescape %}

                {% if path != '/' %}
                <a href="{{ path }}?edit">Edit</a>
                {% endif %}
            {% 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 %}
        </article>
    </main>

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

{% endblock %}