{% extends "default_template.html" %}

{% block body %}
<h1>Customizing Edit</h1>

<div class="col-sm-12" id="content">
    <form action="{{ url_for('_customizing_save') }}" method="post" onSubmit="return isCustomizingFormValid();">
        <fieldset>
            <input type="hidden" id="client" name="client" value="{{ client }}">
            <input type="hidden" id="node" name="node" value="{{ node }}">
            <div class="form-group">
                <label for="customizing">{{ entry.name }}</label>
                <textarea class="form-control" id="customizing" name="customizing" rows="30" style="font-family:monospace;">{{ entry.content }}</textarea>
            </div>
            <br><br>
            <button type="button" class="btn btn-success" onClick="formatCustomizingJson();">Format JSON</button>
            <button type="submit" class="btn btn-primary">Save</button>
        </fieldset>
    </form>
</div>

<script>
    function isCustomizingFormValid () {
        jsonString = document.getElementById("customizing").value;
        try {
            JSON.parse(jsonString);
            return true;
        }
        catch (e) {
            alert("Invalid JSON structure");
            return false;
        }
    }

    function formatCustomizingJson () {
        if (!isCustomizingFormValid()) {return;}
        jsonObject = JSON.parse(document.getElementById("customizing").value);
        formattedJson = JSON.stringify(jsonObject, null, "\t");
        document.getElementById("customizing").value = formattedJson;
    }
</script>
{% endblock %}