{%extends 'cmdb/base.html'%}

{% load bob %}
{% load icons %}

{% block scripts %}
    {{ block.super }}
 
    <script type="text/javascript" src="{{STATIC_URL}}cmdb/d3.v2.min.js"></script>
    <script type="text/javascript" src="{{STATIC_URL}}cmdb/common.js"></script>
    <script type="text/javascript" src="{{STATIC_URL}}cmdb/graphs_tree.js"></script>
{% endblock %}

{% block extra_headers %}
<style type='text/css'>
    
   svg {
       z-index: -100;
   }

</style>
    {{ block.super }}
{% endblock %}
{% block contentarea %}
{{ block.super }}
    {% form_horizontal form=form method="get" action="/cmdb/graphs_tree"  %}
    <hr>
    
    <h4> Tree dependency chart </h4> 
    <button id="save_svg_button" class="btn btn-primary"> View as SVG </button>
    <div id="container" style="width: 800px; height: 800px; border: solid #ddd 1px">
	    <div id="chart" style="">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <style type="text/css">
                 <![CDATA[
                    .node circle {
                          fill: #fff;
                          stroke: steelblue;
                          stroke-width: 1.5px;
                    }

                    .node {
                      font: 3px sans-serif;
                    }

                    .link {
                        fill: none;
                        stroke: #ccc;
                        stroke-width: 1px;
                        }
                ]]>
                </style>
            </svg>
        </div>
    </div>
{% endblock %}
