{% load static %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>AutoWISP Configuration</title>
        <!-- <link rel="icon" href="img/logo.png"> -->
        <link rel="stylesheet" 
              href="{% static 'configuration/css/jquery.orgchart.css' %}">
        <link rel="stylesheet" 
              href="{% static 'configuration/css/config_tree.css' %}">
        <link rel="stylesheet" href="{% static 'css/style.css' %}">
        <link rel="stylesheet" href="{% static 'css/navbar.css' %}">
        <style type="text/css">
            #chart-container { text-align: left; }
        </style>
    </head>
    <body>
        {% csrf_token %}
        <div class="navbar" id="navbar">
            <div class="dropdown">
                <button class="dropbtn">Step: {{ selected_step }}
                    <i class="fa fa-caret-down"></i>
                </button>
                <div class="dropdown-content">
                    {% for step_name in pipeline_steps %}
                    <a href="{% url 'configuration:config_tree' step=step_name version=selected_version %}">
                        {{ step_name }}
                    </a>
                    {% endfor %}
                </div>
            </div> 
            "{% url 'configuration:save_config' version=selected_version as saveURL%}"
            <div class="dropdown">
                <button class="dropbtn">Version: {{ selected_version }} 
                    <i class="fa fa-caret-down"></i>
                </button>

                <div class="dropdown-content">
                    {% for version in config_versions %}
                    <a href="{% url 'configuration:config_tree' step=selected_step version=version %}">
                        <img height="20"
                             {% if version <= max_locked_version %}
                             src="{% static 'img/closed_lock_icon.jpg' %}"
                             alt="locked"
                             style="background-color:#ff0000"
                             {% else %}
                             src="{% static 'img/open_lock_icon.jpg' %}"
                             alt="can edit"
                             style="background-color:#00ff00"
                             {% endif %}
                             />
                        v{{ version }} 
                    </a>
                    {% endfor %}
                    {% with config_versions|last|add:"1" as new_version %}
                    <a href="{% url 'configuration:config_tree' step=selected_step version=new_version %}">
                        <img src="{% static 'img/open_lock_icon.jpg' %}"
                             alt="locked"
                             width="20"
                             style="background-color:#00ff00"/>

                        Create new v{{ new_version }}
                    </a>
                    {% endwith %}
                </div>
            </div> 
            <div class="dropdown">
                <button class="dropbtn" 
                        onclick="theTree.export()">
                    Export
                </button>
            </div>
            {% if not locked %}
            <div class="dropdown">
                <form enctype="multipart/form-data" 
                      action="{% url 'configuration:import_config' version=selected_version %}" 
                      method="post"> 
                    {% csrf_token %}

                    <label for="import-config" class="dropbtn">
                        Import
                    </label>

                    <input type="file" 
                           name="import-config"
                           id="import-config"
                           onchange="form.submit()"
                           style="display:none"
                           accept="application/json"/>
                </form>
            </div>
            {% endif %}

            <div class="dropdown">
                <button class="dropbtn" onclick="displayHelp()">
                    Help
                </button>
            </div>

            <div class="dropdown dropdown-right" >
                <a class="dropbtn" href="{% url 'configuration:survey' %}">
                    Survey Configuration
                </a>
            </div>

            <div class="dropdown dropdown-right" >
                <a class="dropbtn" href="{% url 'processing:progress' %}">
                    Processing Status
                </a>
            </div>

            <div class="dropdown dropdown-right" >
                {% if locked %}
                <a class="dropbtn" href="{% url 'configuration:config_tree' step=selected_step version=selected_version force_unlock=1%}">
                    <img height="20"
                         src="{% static 'img/closed_lock_icon.jpg' %}"
                         alt="locked"
                         style="background-color:#ff0000"/>

                </a>
                {% else %}
                <button class="dropbtn" 
                        onclick="theTree.save('{{saveURL}}')"
                        style="background-color:green">
                    Save Configuration
                </button>
                {% endif %}
            </div>

        </div>
        <div id="edit-panel">
            <table style="width: 100%">
                <tr>
                    <td style="width:1%;white-space:nowrap">
                        <label id="node-type" style="font-size:24px">
                            Node type:
                        </label>
                    </td>
                    <td>
                        <input type="text" 
                               id="edit-node" 
                               style="width: 100%;font-size:24px"
                               onchange="theTree.changeNodeText()">
                    </td>
                </tr>
            </table>
        </div>

        <div class="popup" style='width:100%; height=0px'>
            <span class="popuptext" id="param-help">Editing:</span>
        </div>


        <div id="chart-container" tabindex="0">
        </div>

        <script type="text/javascript" 
                src="{% static 'js/jquery.min.js' %}">
        </script>
        <script type="text/javascript" 
                src="{% static 'js/jquery.orgchart.js' %}">
        </script>
        <script type="text/javascript" 
                src="{% static 'js/autowisp.util.js' %}">
        </script>

        <script type="text/javascript" 
                src="{% static 'configuration/js/autowisp.config.tree.js' %}">
        </script>

        <script type="text/javascript">
            let remainingHeight = screen.availHeight
                - 
                document.getElementById('navbar').offsetHeight
                -
                document.getElementById('edit-panel').offsetHeight;
            remainingHeight *= (98.0 / screen.height);

            document.getElementById('chart-container').style.height = 
                remainingHeight + '%';

            let theTree = new configTree(
                {% autoescape off %}
                {{ config_json }},
                {% endautoescape %}
                {% if locked %}
                false
                {% else %}
                true
                {% endif %}
            );

            function displayHelp() {
                var popup = document.getElementById("param-help");
                popup.classList.toggle("show");
            }

        </script>
          
    </body>
</html>
