{% extends "dashboard/base.html" %}
{% load staticfiles %}
{% load i18n %}
{% load pipeline %}

{% block title-page %}{% trans 'Network Editor' %}{% endblock %}

{% block extra_css %}
  {% stylesheet "network-editor" %}
{% endblock %}

{% block content %}

  <div id="workspace">
    <div class="row">
      <div class="col-sm-12">
        <div class="topology-navi">
          <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-default" id="toggle_labels_label">
              <input type="checkbox" autocomplete="off" id="toggle_labels">
              <span class="fa fa-th-large"></span> {% trans "Toggle Labels" %}
            </label>
            <label class="btn btn-default" id="toggle_networks_label">
              <input type="checkbox" autocomplete="off" id="toggle_networks">
              <span class="fa fa-th"></span>  {% trans "Toggle Network Collapse" %}
            </label>
          </div>
        </div>
        <div id="topologyCanvasContainer" class="d3-container">
          <div class="nodata">
            {% blocktrans trimmed %}
            There are no networks, routers, or connected instances to display.
            {% endblocktrans %}
          </div>
        </div>
      </div>
    </div>

    <span data-networktopology="/network/editor/data" id="networktopology"></span>
    <div id="topologyMessages"></div>
  </div>

  {% include "network/horizon/client_side/templates.html" %}

{% endblock %}

{% block extra_js %}
  {% javascript "editor" %}

  <script type="text/javascript">
    {#TODO: real cookie storage#}
    var cookies = {}
      horizon.cookies = {
        getObject: function (x) {
            return cookies[x]
        }, put: function (x, y) {
            cookies[x] = y
        }, putObject: function (x, y) {
            cookies[x] = y
        }, getRaw: function (x) {
            return cookies[x]
        }, get: function (x) {
            return cookies[x]
        }
    };

    if (typeof horizon.network_topology !== 'undefined') {
      {#TODO: this check should be false first#}
      horizon.networktopologycommon.init();
      horizon.flat_network_topology.init();
      horizon.network_topology.init();
    } else {
      addHorizonLoadEvent(function () {
        horizon.networktopologycommon.init();
        horizon.flat_network_topology.init();
        horizon.network_topology.init();
      });
    }
  </script>
{% endblock %}
