{% load i18n %}
<style type="text/css">
svg#topology_canvas {
  font-family: sans-serif;
  width: 100%;
  height: 100%;
}
svg#topology_canvas .selected {
  filter: url(#select-highlight);
}
svg#topology_canvas .network_alarmed {
  fill: url(#diagonalHatch2);
}
svg#topology_canvas .network-rect {
  cursor: pointer;
}
svg#topology_canvas .network-rect.nourl {
  cursor: auto;
}
svg#topology_canvas .network-name {
  font-size: 14px;
  text-anchor: middle;
}
svg#topology_canvas .network-cidr {
  font-size: 11px;
  text-anchor: end;
}
svg#topology_canvas text.network-type {
  font-family: FontAwesome;
  text-anchor: end;
}
svg#topology_canvas .port_alarmed {
  stroke-dasharray: 13,5;
}
svg#topology_canvas .port_text {
  font-size: 9px;
  fill: #666;
}
svg#topology_canvas .port_text.left {
  text-anchor: end;
}
svg#topology_canvas .lldp_text {
  font-size: 9px;
  fill: #666;
}
svg#topology_canvas .lldp_text.right {
  text-anchor: end;
}
svg#topology_canvas .base_bg_normal {
  fill: #333;
}
svg#topology_canvas .loading_bg_normal {
  fill: #555;
}
svg#topology_canvas .active {
  fill: #45B035;
}
svg#topology_canvas .icon polygon {
  fill: #333;
}
svg#topology_canvas .router_normal .frame,
svg#topology_canvas .host .frame {
  fill: #f3f3f3;
  stroke: #333;
  stroke-width: 4;
  cursor: pointer;
}
svg#topology_canvas .router_normal .icon_bg,
svg#topology_canvas .host .icon_bg {
  fill: #fff;
  stroke: #333;
  stroke-width: 4;
}
svg#topology_canvas .host .unlocked {
  visibility: hidden;
  stroke-width: 0;
}
svg#topology_canvas .host .status {
  fill: #222;
  stroke-width: 0;
  cursor: pointer;
}
svg#topology_canvas .host .status circle {
  fill: #F3F3F3;
}
svg .alarm {
  visibility: hidden;
  stroke: #333;
  stroke-width: 2;
  cursor: pointer;
}
svg .level_4 {
  visibility: visible;
  fill: #CC0000;
  stroke-width: 2;
}
svg .level_3 {
  visibility: visible;
  fill: #CC0000;
  stroke-width: 2;
}
svg .level_2 {
  visibility: visible;
  fill: #FFCC33;
  stroke-width: 2;
}
svg .level_1 {
  visibility: visible;
  fill: #336699;
  stroke-width: 2;
}
svg#topology_canvas .host .texts_bg {
  fill: #222;
  cursor: pointer;
}
svg#topology_canvas .host .texts .name {
  text-anchor: middle;
  fill: #333;
  font-size: 12px;
}
svg#topology_canvas .host .texts .type {
  text-anchor: middle;
  fill: #fff;
  font-size: 12px;
}
svg#topology_canvas .host .instance_bg {
  fill: #333;
}
svg#topology_canvas g.loading .active {
  fill: #555;
}
svg#topology_canvas g.loading .icon polygon {
  fill: #555;
}
svg#topology_canvas g.loading .instance_bg {
  fill: #555;
}
svg#topology_canvas g.loading .host .frame {
  stroke: #555;
}
svg#topology_canvas g.loading .host .name {
  fill: #999;
}
svg#topology_canvas g.loading .host .texts_bg {
  fill: #222;
}
svg#topology_canvas g.loading .host .icon_bg {
  stroke: #555;
}

</style>

<div id="top_row">
<div id="lists_container">
  <h4>Compute Hosts</h4>
  <input id="host_list_search" class="form-control" type="text" placeholder="Search Compute Hosts" />
  <div id="host_list" class="list-group">
  </div>
  <h4>Provider Networks</h4>
  <input id="network_list_search"  class="form-control" type="text" placeholder="Search Provider Networks" />
  <div id="network_list" class="list-group">
  </div>
</div>

<div id="canvas_container">
<svg  id="topology_canvas">
  <g id="zoom_container" transform="translate(50,25)scale(1)" >
  <defs>

    <pattern id="diagonalHatch2" patternUnits="userSpaceOnUse" width="4" height="4">
      <path d="M-1,1 l2,-2
           M0,4 l4,-4
           M3,5 l2,-2" style="stroke:white; stroke-width:1" />
    </pattern>

    <pattern id="device_normal_bg" patternUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
      <g>
        <rect width="20" height="20" class="base_bg_normal"></rect>
      </g>
    </pattern>
    <pattern id="device_normal_bg_loading" patternUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
      <g>
        <rect width="20" height="20" class="loading_bg_normal"></rect>
        <path d='M0 20L20 0ZM22 18L18 22ZM-2 2L2 -2Z' stroke-linecap="square" stroke='rgba(0, 0, 0, 0.3)' stroke-width="7"></path>
      </g>
      <animate attributeName="x" attributeType="XML" begin="0s" dur="0.5s" from="0" to="-20" repeatCount="indefinite"></animate>
    </pattern>

    <filter x="0" y="0" width="1" height="1" id="text_bg">
      <feFlood flood-color="white"/>
      <feComposite in="SourceGraphic"/>
    </filter>

    <filter id="select-highlight" width="200%" height="200%" x="-50%" y="-50%" filterRes="1000">
      <feOffset in="SourceGraphic" dx="0" dy="0" result="offset"></feOffset>
      <feGaussianBlur stdDeviation="2" />
      <feComponentTransfer result="offsetmorph">
        <feFuncA type="table" tableValues="0 .05 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1"/>
      </feComponentTransfer>
      <feFlood flood-color="#51a1e7"></feFlood>
      <feComposite operator="in" in2="offsetmorph" result="stroke"></feComposite>
      <feGaussianBlur stdDeviation="4" result="offsetblur"></feGaussianBlur>
      <feFlood flood-color="#51a1e7"></feFlood>
      <feComposite operator="in" in2="offsetblur" result="blur"></feComposite>
      <feMerge>
        <feMergeNode in="blur"></feMergeNode>
        <feMergeNode in="stroke"></feMergeNode>
        <feMergeNode in="SourceGraphic"></feMergeNode>
      </feMerge>
    </filter>

  </defs>
  </g>
</svg>
<svg id="topology_template" display="none">
  <g class="host_body">
    <g class="connections"></g>
    <rect class="frame" x="0" y="0" rx="5" ry="5" width="70" height="50"></rect>
    <g class="texts">
      <rect class="texts_bg" x="1.5" y="32" width="67" height="17"></rect>
      <text x="35" y="22" class="name">instance</text>
    </g>
    <g class="alarm" transform="translate(20,0)">
      <circle cx="0" cy="0" r="12"></circle>
      <g transform="translate(-5,-6.5)">
        <rect x="4" y="-2" fill="#000000" width="2" height="10"></rect>
        <circle fill="#000000" cx="5" cy="14" r="1.3"></circle>
      </g>
    </g>
    <g transform="translate(14,-13)">
      <g class="status"  transform="translate(0,0)">
        <circle fill="#FFFFFF" stroke-width="5" cx="22" cy="4" r="10" stroke="#222" fill="#F3F3F3"></circle>
        <rect height="22" width="33" y="5" x="5" stroke-width="0" fill="#222"></rect>
      </g>
    </g>
  </g>
  <g class="network_container_normal">
    <rect rx="9" ry="9" width="17" height="500" style="fill: #8541B5;" class="network-rect"></rect>
    <rect rx="9" ry="9" width="17" height="500" pointer-events="none" style="fill: url(#diagonalHatch2);" class="network-rect-hash"></rect>
    <text x="4" y="-5" class="network-name" transform="rotate(0 0 0)" pointer-events="none">Network</text>
    <g class="alarm" transform="translate(8.5,13)">
      <circle cx="0" cy="0" r="12"></circle>
      <g transform="translate(-5,-6.5)">
        <rect x="4" y="-2" fill="#000000" width="2" height="10"></rect>
        <circle fill="#000000" cx="5" cy="14" r="1.3"></circle>
      </g>
    </g>
  </g>

  <svg class="list_alarm">
    <g class="alarm" transform="translate(13,13)">
      <circle cx="0" cy="0" r="12"></circle>
      <g transform="translate(-5,-6.5)">
        <rect x="4" y="-2" fill="#000000" width="2" height="10"></rect>
        <circle fill="#000000" cx="5" cy="14" r="1.3"></circle>
      </g>
    </g>
  </svg>
</svg>
</div>
</div>