{% extends "admin/base_site.html" %}

{% load i18n %}

{% block extrahead %}
    {{ block.super }}
    {{ media }}
    {% url 'admin:jsi18n' as jsi18nurl %}
    <script type="text/javascript" src="{{ jsi18nurl|default:"../../jsi18n/" }}"></script>
    <script type="text/javascript" src="{{ STATIC_URL }}admin/js/calendar.js"></script>
    <script type="text/javascript" src="{{ STATIC_URL }}admin/js/jquery.js"></script>
    <script type="text/javascript" src="{{ STATIC_URL }}admin/js/jquery.init.js"></script>
    {% if img_src %}
        {% ifequal form.cleaned_data.format "svg-js" %}
            {% block svgjs.media %}
                {% include "detect_cyclic/inc.svg_js_libraries.html"%}
                <script type="text/javascript">
                    (function($){
                        $(document).ready(function () {
                            $.ajax({url: "{{  img_src }}",
                                type: "GET",
                                async: true,
                                success: function(response) {
                                    var serializer = new XMLSerializer();
                                    var str = serializer.serializeToString($(response).find("svg")[0]);
                                    $("div#graph").html(str);
                                    $("svg").graphviz();
                                    var currentWidth =  $("svg").width();
                                    var parentWidth = $("svg").parent().width();
                                    if (parentWidth > currentWidth) {
                                        $("svg").width("100%");
                                    }
                                }
                            });
                            $("a.download").attr("href", "#download");
                            $("a.download").click(function () {
                                var data = {};
                                var serializer = new XMLSerializer();
                                data["svgPath"] = "{{ img_src }}";
                                data["svg"] = serializer.serializeToString($("svg")[0]);
                                data["csrfmiddlewaretoken"] = $("input[name=csrfmiddlewaretoken]").val();
                                $.ajax({data: data,
                                        url: "{% url save_ajax_svg %}",
                                        type: "POST",
                                        async: true,
                                        success: function(response) {
                                            window.open("{{ img_src }}", "_blank");
                                        }
                                });
                                return false;
                            });
                        });
                    })(jQuery);
                </script>
            {% endblock svgjs.media %}
        {% endifequal %}
    {% endif %}
    {{ form.media }}
{% endblock %}

{% block extrastyle %}
    {{ block.super }}
    <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}admin/css/forms.css" />
{% endblock %}

{% block coltype %}
    {% if ordered_objects %}colMS{% else %}colM{% endif %}
{% endblock %}

{% block breadcrumbs %}
    <div class="breadcrumbs">
        <a href="../">{% trans "Home" %}</a> &rsaquo;
        {{ title }}
    </div>
{% endblock %}

{% block content %}
    <div id="content-main">
        {% if message %}
            <h2> {{ message }} </h2>
        {% endif %}
        {% if img_src %}
            <div id="graph">
                {% ifnotequal form.cleaned_data.format "svg-js" %}
                    <img src="{{ img_src }}"/>
                {% endifnotequal %}
            </div>
            <p>
                <a href="{{ img_src }}" class="download" target="_blank">{% trans "Download" %}</a>
            </p>
        {% endif %}
        <form action="." method="POST">
            {% csrf_token %}
            {{ form }}
            <div class="submit-row">
                <input type="submit" name="submit" value="{% trans "Create Graph" %}"/>
            </div>
        </form>
    </div>
{% endblock %}