{% extends "base.html" %}

{% block more_headers %}
<style>
    {% for rtype in rel_types %}
    path.link.{{ rtype.cssname }} {
        stroke: {{ rtype.color }};
    }
    #legend .{{ rtype.cssname }} {
        background-color: {{ rtype.color }};
    }
    {% endfor %}
</style>
{% endblock %}


{% block content %}

<div class="row">
<div class="col-xs-12">
    <div id="graph">
        <img src="{{ url_for("static", filename="ajax-loader-big.gif") }}"
             alt="Loading..." class="ajaxloader" />
    </div>
</div>
</div>

<div id="legend">
<div class="row">
<div class="col-xs-12">
    Légende&nbsp;:
    <ul>
        {% for rtype in rel_types %}
        <li><span class="{{ rtype.cssname }}"> </span> {{ rtype.name }}</li>
        {% endfor %}
    </ul>
</div>
</div>
<div class="row">
<div class="col-xs-12">
    <p>
    Faire glisser pour recadrer, molette de la souris pour zoomer / dézoomer,
    double-click pour recentrer la vue.
    </p>
    <p data-toggle="buttons">
        Actions&nbsp;:
        <button class="btn btn-sm" id="btn-stop">Figer</button>
        <label class="btn btn-sm btn-default active" id="btn-anonymous">
            <input type="checkbox" autocomplete="off"
            {% if graph.anonymous %}checked{% endif %} />
            <span class="glyphicon glyphicon-eye-close"></span>
            <span class="glyphicon glyphicon-eye-open"></span>
            Anonyme
        </label>
        <!-- <button onclick="graph.redraw();">Redessiner</button> -->
    </p>
</div>
</div>
</div> <!-- /legend -->


{% endblock %}

{% block more_js %}
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="{{ url_for('static', filename='graph.js') }}"></script>
<script>
//<![CDATA[
    var graph = build_graph("#graph", "{{ url_for('data', graph_id=graph.id) }}");
    $("#btn-stop").click(function() { graph.stop(); });
    $("#btn-anonymous input").change(function() {
        graph.toggleAbbrev(this.checked);
    });
//]]>
</script>
{% endblock %}
