{% 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">
    <strong>{{ _("Legend:") }}</strong>
    <ul>
        {% for rtype in rel_types %}
        <li><a href="" data-rtype="{{ rtype.cssname }}" 
               data-toggle="tooltip" data-placement="top"
               title="{{ _("Hide or show this type") }}">
            <span class="{{ rtype.cssname }}"> </span> {{ rtype.name }}
        </a></li>
        {% endfor %}
    </ul>
</div>
</div>
<div class="row">
<div class="col-xs-12">
    <p>
        <span class="glyphicon glyphicon-user"></span> {{ _("%(pnum)s persons, %(rnum)s relationships.", pnum=graph.persons|length, rnum=graph.relationships|length) }}
    </p>
    <p data-toggle="buttons">
        <strong>{{ _("Actions :") }}</strong>
        <button class="btn btn-sm" id="btn-stop">{{ _("Freeze") }}</button>
        <label class="btn btn-sm btn-default{% if graph.anonymous %} active{% endif %}" 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>
            {{ _("Anonymous") }}
        </label>
        <!-- <button onclick="graph.redraw();">{{ _("Redraw") }}</button> -->
        <label for="linkdistance">{{ _("Link length:") }}</label>
        <input id="linkdistance" value="70"/>
    </p>
    <p>
    {{ _("Drag to move, mouse wheel to zoom/unzoom, double click to recenter the view.") }}
    </p>
</div>
</div>
</div> <!-- /legend -->


{% endblock %}

{% block more_js %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="{{ url_for('static', filename='graph.js') }}"></script>
<script>
//<![CDATA[
    setup_graph_page("{{ url_for('data', graph_id=graph.id) }}");
//]]>
</script>
{% endblock %}
