{% 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="graph-footer" class="row">
<div id="legend" class="row">
    <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>
<p>
    <span class="glyphicon glyphicon-user"></span>
    {{ _("%(pnum)s persons, %(rnum)s relationships.", pnum=graph.persons|length, rnum=graph.relationships|length) }}
</p>
<ul id="graph-actions" class="list-inline">
    <li><strong>{{ _("Actions :") }}</strong></li>
    <li><button class="btn btn-sm btn-default" id="btn-stop">
        <span class="glyphicon glyphicon-pause"></span>
        {{ _("Freeze") }}</button>
    </li>
    <li data-toggle="buttons">
        <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>
    </li>
    <!-- <button onclick="graph.redraw();">{{ _("Redraw") }}</button> -->
    <li>
        <form action="{{ url_for("to_svg", graph_id=graph.id, name=graph.name) }}"
              method="post" id="export-svg" target="_blank" style="display:inline">
            <input type="hidden" name="svg"/>
            <button type="submit" class="btn btn-sm btn-default" title="{{ _("Export to SVG") }}">
                <span class="glyphicon glyphicon-share"></span> SVG
            </button>
        </form>
    </li>
    <li><label for="linkdistance">{{ _("Link length:") }}</label>
        <span id="linkdistance"></span>
    </li>
</ul>
<p>
    {{ _("Drag to move, mouse wheel to zoom/unzoom, double click to recenter the view.") }}
</p>
</div> <!-- /graph-footer -->


{% 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 %}
