{% extends "layout.html" %}
{% block content %}
    <link rel="stylesheet" href="/static/node_modules/huebee/dist/huebee.min.css">
    <script src="/static/node_modules/huebee/dist/huebee.pkgd.min.js"></script>
    {% if json_data %}
        <link rel="stylesheet" href="/static/css/network.css">
        <script src="/static/node_modules/d3/dist/d3.min.js"></script>
        <div class="toolbar">
            {{ 'tools/network'|manual }}
            {{ _('download')|button('#', onclick="saveSvgAsPng(d3.select('#network-svg').node(), 'network.png')") }}
        </div>
        <div>
            <svg id="network-svg"></svg>
        </div>
        <script>
            var graph = {{ json_data|safe }};
            var width = {{ network_params.options.width }};
            var height = {{ network_params.options.height }};
            var charge = {{ network_params.options.charge * 10 }};
            var distance = {{ network_params.options.distance }};
        </script>
        <script src="/static/js/network.js"></script>
        <script src="/static/node_modules/save-svg-as-png/lib/saveSvgAsPng.js"></script>
    {% else %}
        <div class="toolbar">
            {{ 'tools/network'|manual }}
        </div>
        <h2>{{ _('no data to display')|uc_first }}</h2>
    {% endif %}
    <form method="post" id="network-form">
        {{ form.csrf_token }}
        <h2>{{ _('classes')|uc_first }}</h2>
        <div>
            <div id="classes" style="float:left">
                {% for item in form.classes %}
                    {{ form[item.data] }} {{ item.label }}<br>
                {% endfor %}
            </div>
        </div>
        <div style="clear:both;"></div>
        <p>{{ form.orphans }} {{ _('show orphans')|uc_first }}</p>
        <h2>{{ _('network options')|uc_first }}</h2>
        {{ form.width }} {{ form.width.label }}<br>
        {{ form.height }} {{ form.height.label }}<br>
        {{ form.charge }} {{ form.charge.label }}<br>
        {{ form.distance }} {{ form.distance.label }}<br>
        <div class="toolbar" style="margin-top: 1em;">
            <input class="{{ config.CSS.button.primary }}" id="save" name="save" value="{{ _('apply')|uc_first }}" type="submit">
        </div>
    </form>
{% endblock %}