<filter-bar class="content-filter">
</filter-bar>

<div class="kube-pane">
    <div class="sidebar-pf sidebar-pf-right">
        <div class="sidebar-help" ng-if="!selected">
            <p translate>Select an object to see more details.</p>

            <kubernetes-topology-icon kind="Pod">
              <svg class="kube-topology">
                <use xlink:href="#vertex-Pod" x="16" y="16"></use>
              </svg>
            </kubernetes-topology-icon>
            <h3 translate>Pod</h3>
            <p translate>Pods contain one or more containers that run together on a node, containing your application code.</p>

            <kubernetes-topology-icon kind="ReplicationController">
              <svg class="kube-topology">
                <use xlink:href="#vertex-ReplicationController" x="16" y="16"></use>
              </svg>
            </kubernetes-topology-icon>
            <h3 translate>Replication Controller</h3>
            <p translate>Replication controllers dynamically create instances of pods from templates, and remove pods when necessary.</p>

            <kubernetes-topology-icon kind="Service">
              <svg class="kube-topology">
                <use xlink:href="#vertex-Service" x="16" y="16"></use>
              </svg>
            </kubernetes-topology-icon>
            <h3 translate>Service</h3>
            <p translate>Services group pods and provide a common DNS name and an optional, load-balanced IP address to access them.</p>

            <kubernetes-topology-icon kind="Node">
              <svg class="kube-topology">
                <use xlink:href="#vertex-Node" x="16" y="16"></use>
              </svg>
            </kubernetes-topology-icon>
            <h3 translate>Node</h3>
            <p translate>Nodes are the machines that run your containers.</p>
        </div>
        <div class="topology-actions" ng-if='selected && !(selected.kind === "Node")'>
          <div ng-if='selected.kind === "Pod"'>
            <button title="Delete" class="btn btn-danger btn-delete pficon pficon-delete delete-entity " ng-click="deleteItem(selected)" ></button>
          </div>
          <div ng-if='selected.kind === "Route"'>
            <button title="Delete" class="btn btn-danger btn-delete pficon pficon-delete delete-entity" ng-click="deleteItem(selected)"></button>
            <button title="Adjust"  class="btn btn-default pficon pficon-edit adjust-entity"  ng-click="modifyRoute(selected)"></button>
          </div>
          <div ng-if='selected.kind === "ReplicationController"'>
            <button title="Delete" class="btn btn-danger btn-delete pficon pficon-delete delete-entity" ng-click="deleteItem(selected)"></button>
            <button id="adjust-entity-btn" title="Adjust"  class="btn btn-default pficon pficon-edit adjust-entity" ng-click="modifyRC(selected)"></button>
          </div>
          <div ng-if='selected.kind === "Service" || selected.kind === "DeploymentConfig"'>
            <button title="Delete" class="btn btn-danger btn-delete pficon pficon-delete delete-entity" ng-click="deleteItem(selected)"></button>
          </div>
        </div>
        <kubernetes-object-describer ng-if="selected" resource="selected" kind="{{ selected.kind }}"
            more-details-link="optional/path/to/more/details.html"></kubernetes-object-describer>
    </div>
</div>

<svg class="kube-topology" hidden>
  <defs>
    <g class="Node" id="vertex-Node">
      <circle r="15" fill="#fff" stroke="#aaa"></circle>
      <text y="9" fill="#636363" font-family="PatternFlyIcons-webfont" font-size="18px" text-anchor="middle">&#xe621;</text>
    </g>
    <g class="Pod" id="vertex-Pod">
      <circle r="15" fill="#fff" stroke="#aaa"></circle>
      <text y="6" x="0.5" fill="#1186C1" font-family="FontAwesome" font-size="16px" text-anchor="middle">&#xf1b3;</text>
    </g>
    <g class="Service" id="vertex-Service">
      <circle r="15" fill="#fff" stroke="#aaa"></circle>
      <text y="10" x="-1" fill="#ff7f0e" font-family="PatternFlyIcons-webfont" font-size="20px" text-anchor="middle">&#xe61e;</text>
    </g>
    <g class="ReplicationController" id="vertex-ReplicationController">
      <circle r="15" fill="#fff" stroke="#aaa"></circle>
      <text y="9" fill="#9467bd" font-family="PatternFlyIcons-webfont" font-size="22px" text-anchor="middle">&#xe624;</text>
    </g>
    <g class="DeploymentConfig" id="vertex-DeploymentConfig">
      <circle r="15" fill="#fff" stroke="#aaa"></circle>
      <text y="8" fill="#888" font-family="FontAwesome" font-size="22px" text-anchor="middle">&#xf013;</text>
    </g>
    <g class="Route" id="vertex-Route">
      <circle r="15" fill="#fff" stroke="#aaa"></circle>
      <text y="9" fill="#888" font-family="PatternflyIcons-webfont" font-size="22px" text-anchor="middle">&#xe625;</text>
    </g>
  </defs>
</svg>

<kubernetes-topology-graph items="items" relations="relations" kinds="kinds" ng-style="height">
</kubernetes-topology-graph>
