{% extends 'base.html' %}
{% load i18n %}
{% load url from future %}
{% block title %}{% trans "Network Topology" %}{% endblock %}

{% block main %}

<noscript>
{% trans "This pane needs javascript support." %}
</noscript>

{% include "project/network_topology/client_side/_balloon_container.html" %}
{% include "project/network_topology/client_side/_balloon_device.html" %}
{% include "project/network_topology/client_side/_balloon_port.html" %}

<div class="topologyNavi">
  <div class="toggleView btn-group" data-toggle="buttons">
    <label class="btn btn-default" data-value="small">
      <input type="radio" name="options" id="option1" checked>
      <span class="fa fa-th"></span>
      {% trans "Small" %}
    </label>
    <label class="btn btn-default" data-value="normal">
      <input type="radio" name="options" id="option2">
      <span class="fa fa-th-large"></span>
      {% trans "Normal" %}
    </label>
  </div>
  <div class="launchButtons">
  {% if launch_instance_allowed %}
  {% if show_ng_launch %}
  <a ng-controller="LaunchInstanceModalCtrl" ng-click="openLaunchInstanceWizard({successUrl: '/project/network_topology/', dismissUrl: '/project/network_topology/'})" id="instances__action_launch" class="btn btn-default btn-sm btn-launch ajax-modal {% if instance_quota_exceeded %}disabled{% endif %}"><span class="fa fa-cloud-upload"></span> {% if instance_quota_exceeded %}{% trans "Launch Instance (Quota exceeded)"%}{% else %}{% trans "Launch Instance"%}{% endif %}</a>
  {% endif %}
  <a href="{% url 'horizon:project:network_topology:launchinstance' %}" id="instances__action_launch" class="btn btn-default btn-sm btn-launch ajax-modal {% if instance_quota_exceeded %}disabled{% endif %}"><span class="fa fa-cloud-upload"></span> {% if instance_quota_exceeded %}{% trans "Launch Instance (Quota exceeded)"%}{% else %}{% trans "Launch Instance"%}{% endif %}</a>
  {% endif %}
  {% if create_network_allowed %}
      <a href="{% url 'horizon:project:network_topology:createnetwork' %}" id="networks__action_create" class="btn btn-default btn-sm ajax-modal {% if network_quota_exceeded %}disabled{% endif %}"><span class="fa fa-plus"></span> {% if network_quota_exceeded %}{% trans "Create Network (Quota exceeded)"%}{% else %}{% trans "Create Network"%}{% endif %}</a>
  {% endif %}
  {% if create_router_allowed %}
      <a href="{% url 'horizon:project:network_topology:createrouter' %}" id="Routers__action_create" class="btn btn-default btn-sm ajax-modal {% if router_quota_exceeded %}disabled{% endif %}"><span class="fa fa-plus"></span> {% if router_quota_exceeded %}{% trans "Create Router (Quota exceeded)"%}{% else %}{% trans "Create Router"%}{% endif %}</a>
  {% endif %}
  </div>
</div>

<div id="topologyCanvasContainer">
  <div class="nodata">{% blocktrans %}There are no networks, routers, or connected instances to display.{% endblocktrans %}</div>
  {% include "project/network_topology/_svg_element.html" %}
</div>
<span data-networktopology="{% url 'horizon:project:network_topology:json' %}" id="networktopology"></span>
<div id="topologyMessages"></div>

<script type="text/javascript">
  if (typeof horizon.network_topology !== 'undefined') {
    horizon.network_topology.init();
  } else {
    addHorizonLoadEvent(function () {
      horizon.network_topology.init();
    });
  }
</script>
{% endblock %}
