{% extends "layout.html" %} 

{% block title %}Golem : {{project|capitalize}} : Environments{% endblock %}

{% block head %}
<link rel="stylesheet" href="{{ url_for('static', filename='js/external/code_mirror/codemirror.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/json_code_editor.css') }}">
{% endblock %} 

{% block content %}
<div class="col-lg-8 col-lg-offset-2">
    <div class="col-sm-6 header-col">
        <h3 id="pageObjectName">{% if project %}{{project|capitalize|replace("_", " ")}} - {% endif %} environments</h3>
    </div>
    <div class="col-sm-6 text-right header-col" style="padding-top: 20px">
        {% if g.user.project_weight(project) >= 40 %}
        <button id="save" class="btn btn-default btn-sm" onclick="saveEnvironments();"><span class="glyphicon glyphicon-floppy-save" aria-hidden="true"></span> Save</button>
        {% endif %}
    </div>
    <div class="clearfix"></div>
    <div class="codeEditorContainer" id="environmentsContainer"></div>
    <br>
    <br>
    <div class="panel panel-default">
        <div class="panel-body">
            <div style="margin-bottom: 10px"><i class="fa fa-info-circle" aria-hidden="true"></i> Must be valid JSON</div>
            <strong>Example</strong>
            <pre style="white-space: pre;">
{
    "test": {
        "url": "http://test-url:5000/"
    },
    "staging": {
        "url": "http://staging-url:5000/"
    }
}</pre>
        </div>
    </div>
</div>

<script>
    let environmentData = {{environment_data|tojson}};
</script>
<script src="{{ url_for('static', filename='js/external/code_mirror/codemirror.js') }}"></script>
<script src="{{ url_for('static', filename='js/external/code_mirror/javascript.js') }}"></script>
<script src="{{ url_for('static', filename='js/environments.js') }}"></script>
{% endblock %}