{% extends "application.html" %}

{% block content %}

<div id="topologies">
  <div class="row">
  </div>

  <!-- Row start -->
  <div class="row">
      <div id="topotable-container"></div>
  </div>
  <!-- Row end -->
</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script type="text/jsx" src="{{ static_url('js/alltopologies.js') }}" ></script>
<script type="application/javascript">
  window.onload = function() {
    d3.select("#page-title")
      .append("p")
        .html("Topologies");

    console.log("React render component...");
  };
</script>

<script type="text/jsx">
  
  /** @jsx React.DOM */
  React.renderComponent(
      <FilterableTopologyTable clusters={ {% raw clusters %}  } />,
      document.getElementById('topotable-container')
  );
</script>
{% end %}