{% load i18n %}
<style type="text/css">
svg#topology_canvas {
  font-family: sans-serif;
}
svg#topology_canvas .network-rect {
  cursor: pointer;
}
svg#topology_canvas .network-rect.nourl {
  cursor: auto;
}
svg#topology_canvas .network-name {
  font-weight: bold;
  font-size: 12px;
  fill: #fff;
  text-anchor: middle;
}
svg#topology_canvas .network-cidr {
  font-size: 11px;
  text-anchor: end;
}
svg#topology_canvas .port_text {
  font-size: 9px;
  fill: #666;
}
svg#topology_canvas .port_text.left {
  text-anchor: end;
}
svg#topology_canvas .base_bg_normal {
  fill: #333;
}
svg#topology_canvas .loading_bg_normal {
  fill: #555;
}
svg#topology_canvas .base_bg_small,
svg#topology_canvas .loading_bg_small {
  fill: #fff;
}
svg#topology_canvas .active {
  fill: #45B035;
}
svg#topology_canvas .icon polygon {
  fill: #333;
}
svg#topology_canvas .instance_small .frame,
svg#topology_canvas .router_small .frame {
  fill: url(#device_small_bg);
  stroke: #333;
  stroke-width: 3;
}
svg#topology_canvas .instance_small .port_text,
svg#topology_canvas .router_small .port_text {
  display: none;
}
svg#topology_canvas .router_normal .frame,
svg#topology_canvas .instance_normal .frame {
  fill: #fff;
  stroke: #333;
  stroke-width: 4;
}
svg#topology_canvas .router_normal .icon_bg,
svg#topology_canvas .instance_normal .icon_bg {
  fill: #fff;
  stroke: #333;
  stroke-width: 4;
}
svg#topology_canvas .router_normal .texts_bg,
svg#topology_canvas .instance_normal .texts_bg {
  fill: url('#device_normal_bg');
}
svg#topology_canvas .router_normal .texts .name,
svg#topology_canvas .instance_normal .texts .name {
  text-anchor: middle;
  fill: #333;
  font-size: 12px;
}
svg#topology_canvas .router_normal .texts .type,
svg#topology_canvas .instance_normal .texts .type {
  text-anchor: middle;
  fill: #fff;
  font-size: 12px;
}
svg#topology_canvas .router_normal .instance_bg,
svg#topology_canvas .instance_normal .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 .instance_small .frame,
svg#topology_canvas g.loading .router_small .frame {
  stroke: #555;
  fill: url(#device_small_bg_loading);
}
svg#topology_canvas g.loading .router_normal .frame,
svg#topology_canvas g.loading .instance_normal .frame {
  stroke: #555;
}
svg#topology_canvas g.loading .router_normal .name,
svg#topology_canvas g.loading .instance_normal .name {
  fill: #999;
}
svg#topology_canvas g.loading .router_normal .texts_bg,
svg#topology_canvas g.loading .instance_normal .texts_bg {
  fill: url(#device_normal_bg_loading);
}
svg#topology_canvas g.loading .router_normal .icon_bg,
svg#topology_canvas g.loading .instance_normal .icon_bg {
  stroke: #555;
}
</style>

<svg width="400" height="400" id="topology_canvas">
  <defs>
    <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>
    <pattern id="device_small_bg" patternUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
      <g>
        <rect width="20" height="20" class="base_bg_small"></rect>
      </g>
    </pattern>
    <pattern id="device_small_bg_loading" patternUnits="userSpaceOnUse" x="0" y="0" width="5" height="5">
      <g>
        <rect width="5" height="5" class="loading_bg_small"></rect>
        <path d='M0 5L5 0ZM6 4L4 6ZM-1 1L1 -1Z' stroke-linecap="square" stroke='rgba(0, 0, 0, 0.4)' stroke-width="1.5"></path>
      </g>
      <animate attributeName="x" attributeType="XML" begin="0s" dur="0.5s" from="0" to="-5" repeatCount="indefinite"></animate>
    </pattern>
  </defs>
</svg>
<svg id="topology_template" display="none">
  <g class="router_small device_body">
    <g class="ports" pointer-events="none"></g>
    <rect rx="3" ry="3" width="20" height="20" class="frame"></rect>
    <g transform="translate(3.5,3)" class="icon">
      <polygon points="12.51,4.23 12.51,0.49 8.77,0.49 9.68,1.4 6.92,4.16 8.84,6.08 11.6,3.32  "></polygon>
      <polygon points="0.49,8.77 0.49,12.51 4.23,12.51 3.32,11.6 6.08,8.83 4.17,6.92 1.4,9.68  "></polygon>
      <polygon points="1.85,5.59 5.59,5.59 5.59,1.85 4.68,2.76 1.92,0 0,1.92 2.76,4.68   "></polygon>
      <polygon points="11.15,7.41 7.41,7.41 7.41,11.15 8.32,10.24 11.08,13 13,11.08 10.24,8.32   "></polygon>
    </g>
  </g>
  <g class="instance_small device_body">
    <g class="ports" pointer-events="none"></g>
    <rect rx="3" ry="3" width="20" height="20" class="frame"></rect>
    <g transform="translate(5,3)" class="icon">
      <rect class="instance_bg" width="10" height="13"></rect>
      <rect x="2" y="1" fill="#FFFFFF" width="6" height="2"></rect>
      <rect x="2" y="4" fill="#FFFFFF" width="6" height="2"></rect>
      <circle class="active" cx="3" cy="10" r="1.3"></circle>
    </g>
  </g>
  <g class="network_container_small">
    <rect rx="7" ry="7" width="15" height="200" style="fill: #8541B5;" class="network-rect"></rect>
    <text x="250" y="-3" class="network-name" transform="rotate(90 0 0)" pointer-events="none">Network</text>
    <text x="0" y="-20" class="network-cidr" transform="rotate(90 0 0)">0.0.0.0</text>
  </g>
  <g class="router_normal device_body">
    <g class="ports" pointer-events="none"></g>
    <rect class="frame" x="0" y="0" rx="6" ry="6" width="90" height="50"></rect>
    <g class="texts" pointer-events="none">
      <rect class="texts_bg" x="1.5" y="32" width="87" height="17"></rect>
      <text x="45" y="46" class="type">{% trans "Router" %}</text>
      <text x="45" y="22" class="name">router</text>
    </g>
    <g class="icon" transform="translate(6,6)" pointer-events="none">
      <circle class="icon_bg" cx="0" cy="0" r="12"></circle>
      <g transform="translate(-6.5,-6.5)">
        <polygon points="12.51,4.23 12.51,0.49 8.77,0.49 9.68,1.4 6.92,4.16 8.84,6.08 11.6,3.32  "></polygon>
        <polygon points="0.49,8.77 0.49,12.51 4.23,12.51 3.32,11.6 6.08,8.83 4.17,6.92 1.4,9.68  "></polygon>
        <polygon points="1.85,5.59 5.59,5.59 5.59,1.85 4.68,2.76 1.92,0 0,1.92 2.76,4.68   "></polygon>
        <polygon points="11.15,7.41 7.41,7.41 7.41,11.15 8.32,10.24 11.08,13 13,11.08 10.24,8.32  "></polygon>
      </g>
    </g>
  </g>
  <g class="instance_normal device_body">
    <g class="ports" pointer-events="none"></g>
    <rect class="frame" x="0" y="0" rx="6" ry="6" width="90" height="50"></rect>
    <g class="texts">
      <rect class="texts_bg" x="1.5" y="32" width="87" height="17"></rect>
      <text x="45" y="46" class="type">{% trans "Instance" %}</text>
      <text x="45" y="22" class="name">instance</text>
    </g>
    <g class="icon" transform="translate(6,6)">
      <circle class="icon_bg" cx="0" cy="0" r="12"></circle>
      <g transform="translate(-5,-6.5)">
        <rect class="instance_bg" width="10" height="13"></rect>
        <rect x="2" y="1" fill="#FFFFFF" width="6" height="2"></rect>
        <rect x="2" y="4" fill="#FFFFFF" width="6" height="2"></rect>
        <circle class="active" cx="3" cy="10" r="1.3"></circle>
      </g>
    </g>
  </g>
  <g class="network_container_normal">
    <rect rx="9" ry="9" width="17" height="500" style="fill: #8541B5;" class="network-rect"></rect>
    <text x="250" y="-4" class="network-name" transform="rotate(90 0 0)" pointer-events="none">Network</text>
    <text x="490" y="-20" class="network-cidr" transform="rotate(90 0 0)">0.0.0.0</text>
  </g>
</svg>
