{% extends "main/base.html" %}
{% block title %}Staff | Home{% endblock %}
{% block og_title %}Staff | Home{% endblock %}
{% block og_description %}Landing page for the staff management area{% endblock %}
{% block extra_head %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ace.js" type="application/javascript"></script>
{% endblock %}
{% block content %}
    <div class="uk-container uk-section uk-container-small">
        {% if message %}
            <div class="uk-alert uk-alert-warning">
                {{ message }}
            </div>
        {% endif %}
        <form uk-grid class="uk-grid-small" action="{{ url_for("staff.tables.edit", table=table) }}" method="post">
            <div class="uk-width-expand">
                <p>Primary key: <strong>"<span style="font-family: monospace">{{ primary_key }}</span>"</strong></p>
            </div>
            <div class="uk-width-auto">
                <a class="uk-button uk-button-default" href="{{ url_for("staff.tables.table", table=table, page=1) }}"><i class="uk-icon fa-fw fas fa-arrow-left"></i>&nbsp; Back</a>
                <input class="uk-button uk-button-primary" type="submit" id="submit" value="Save" />
            </div>
            <div class="uk-width-1-1">
                <div id="editor" class="uk-textarea" style="resize: vertical; min-height: 15rem;">{{ document }}</div>
                <input type="hidden" name="json" id="json" />
            </div>

            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>

            {% if old_primary %}
                <input type="hidden" name="old_primary" value="{{ old_primary }}"/>
            {% endif %}
        </form>

        <script type="application/javascript">
            "use strict";

            let editor = ace.edit("editor");

            editor.session.setMode("ace/mode/json");
            editor.session.setUseWrapMode(true);

            editor.setTheme("ace/theme/iplastic");
            editor.setShowPrintMargin(false);

            editor.on("input", function() {
                document.getElementById("json").value = editor.getValue();
            });
        </script>
    </div>
{% endblock %}