{% extends "workflow/viewport-element.html" %}
{% block extrahead %}
<title>Pod Definition Prototype</title>

<!-- Loads and initializes the library -->
<script>
    var mxLoadStylesheets = false;
</script>
{% endblock extrahead %}

<!-- Calls the main function after the page has loaded. Container is dynamically created. -->
{% block content %}
<div class="h-100 w-100 position-relative">
    <div class="h-100 w-100 position-absolute overflow-hidden">
        <div class="row h-100">
            <div id="graphParent" class="col h-100">
                <div class="d-flex bg-light border align-items-center">
                    <div id="toolbarContainer"></div>
                    <div class="ml-4 text-info">Hold right click to drag</div>
                </div>
                <!-- Creates a container for the sidebar -->
                <div id="graphContainer" class="border h-100"></div>
            </div>

            <div id="network_select" class="col-2">
                <!-- Creates a container for the outline -->
                <div id="outlineContainer" class="border mb-2"></div>
                <button id="btn_add_network" type="button" class="btn btn-primary w-100 mb-2" onclick="network_step.newNetworkWindow();">Add Network</button>
                <ul id="network_list" class="list-group">
                </ul>
                <button type="button" class="d-none" onclick="network_step.submitForm();">Submit</button>
            </div>
        </div>
    </div>
</div>
<form id="step_form" method="post">
    {% csrf_token %}
    <input type="hidden" id="hidden_xml_input" name="xml">
</form>
<script>
    //gather context data
    try {
        let debug = false;
        {% if debug %}
        debug = true;
        {% endif %}

        const False = false;
        const True = true;

        let resources = {{resources|safe}};
        let networks = {{networks|safe}};

        network_step = new NetworkStep(
            debug,
            resources,
            networks,
            document.getElementById('graphContainer'),
            document.getElementById('outlineContainer'),
            document.getElementById('toolbarContainer'),
            document.getElementById('sidebarContainer')
        );
        form_submission_callbacks.push(() => network_step.prepareForm());
    } catch (e) {
        console.log(e)
    }

</script>
{% endblock content %}
{% block onleave %}
network_step.submitForm();
{% endblock %}