{% extends "pagetemplate.j2.html" %}
{% block body %}
<style>
    .ace_editor{
        flex-basis: 24rem;
    }
</style>
<script src="/static/js/thirdparty/jsoneditor.min.js"></script>

<main>
    <section class="window paper w-sm-double margin">
        <header><h2>{{title}}</h2></header>

        {% for i in datalists %}
        <datalist id="{{i}}">
            {%for j in datalists[i] %}
                <option value="{{j[0]}}">{{j[1]}}</option>
            {% endfor %}
        </datalist>

        {% endfor %}
        <form id="dialog-form" class="stacked-form" action="{{target}}" method="{{method}}" enctype="multipart/form-data">
        {% for i in items %}
            {% if i[0] %}
                <label>{{i[0]}} {{i[1]}}
                </label>
            {% else %}
                {{i[1]}}
            {% endif %}
        {% endfor %}

        {% for i in hidden_inputs %}
        <input type="hidden" name="{{i}}" value="{{hidden_inputs[i]}}">
        {% endfor %}
        </form>
    </section>

    {{extracode}}
</main>

<script>
    // Fix going back after a change and seeing old data
    const perfEntries = performance.getEntriesByType('navigation');
if (perfEntries.length > 0 && perfEntries[0].type === 'back_forward') {
  globalThis.location.reload()
}
</script>


{% endblock %}

