{% load i18n %}

<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>
    <text x="0" y="-20" class="network-type" transform="rotate(90 0 0)"
          data-toggle="tooltip" data-placement="bottom" title="{% trans 'External Network' %}"></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>
    <text x="490" y="-20" class="network-type" transform="rotate(90 0 0)"
          data-toggle="tooltip" data-placement="bottom" title="{% trans 'External Network' %}"></text>
  </g>
</svg>
