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

{% load bob %}
{% load icons %}
{% block extra_headers %}
    <style type='text/css'>
        #graphDiv
        {
            height: 400px;
            border: solid #ddd 1px;
        }

        svg
        {
            z-index: 10;
            width: 100%;
            height: 100%;
        }

        text:hover
        {
            cursor: pointer;
            stroke: red;
        }

        .focused
        {
            stroke-width: 1;
            font-size:13px;
            stroke: red;
        }
    </style>
{% endblock %}

{% block scripts %}
    {{ block.super }}
    <script type="text/javascript" src="{{STATIC_URL}}cmdb/VivaGraphJS/vivagraph.js"></script>
    <script type="text/javascript">
        /* Data container for cmdb/graphs.js */
        CMDB = {'graph_data': JSON.parse("{{graph_data|escapejs}}") }
    </script>
    <script type="text/javascript" src="{{STATIC_URL}}cmdb/graphs.js"></script>
{% endblock %}

{% block contentarea %}
    {{ block.super }}
    <div class="row-fluid">
        <div class="span12">
            <h3>Impact report</h3>
            {% form_horizontal form=form method="get" action="/cmdb/graphs" submit_label="run impact" %}
        </div>
    </div>
    <div class="row-fluid">
    <hr>
        <div class="span8">
        <h4>Impact graph</h4>
            <div id="graphDiv">
            </div>
        </div>
        <div class="span2">
            <div>
                <h4>Relations - legend:</h4>
                <ul class="unstyled">
                    <li><span class="label" style="background-color:blue">Contains</span></li>
                    <li><span class="label label-important">Requires</span></li>
                    <li><span class="label label-inverse">Is role for</span></li>
                </ul>
            </div>
            <hr>
            <h4>Selected item info</h4>
            <ul class="unstyled">
                <li>Name: <span id="cmdb_name"></span><li/>
                <li>CMDB link: <span id="cmdb_link"></span><li/>
                <li>Check impact link: <span id="check_impact_link"></span></li>
            </ul>
            <hr>
            <h4>Actions</h4>
            <button class="btn" id="save_svg_button">Save graph as SVG</button>
        </div>
    </div>

    <div class="row-fluid">
        <div class="span12">
        <h4>Affected CIs</h4>
    <table class="table table-striped table-condensed table-list table-bordered">
        <tbody>
        <tr>
            <th>No.</th>
            <th>Name</th>
            <th>Type</th>
            <th>UID</th>
            <th>Venture/Role</th>
        </tr>
        {% for row in rows %}
        <tr>
            <td>
                {{ forloop.counter }}
            </td>
            <td>
            <a href="/cmdb/ci/view/{{ row.ci.id }}">
                <b><i class="fugue-icon {{ row.icon }}"></i> {{ row.ci.name }} </b>
            </a></td>
            <td>{{ row.ci.type }} </td>
            <td>{{ row.ci.uid }}</td>
            <td>{{ row.venture|default:"" }} {{ row.role|default:"" }}</td>
        </tr>
        {% endfor %}
    </tbody>
    </table>
    </div>
    </div>
{% endblock %}
