{% load i18n nested_admin admin_urls %}
{% with inline_admin_formset.formset.is_nested as is_nested %}
<style type="text/css">
    #cy {
      height: 400px;
      width: 100%;
    }
</style>

{% with inline_admin_formset.opts as inline_opts %}
<script type="text/javascript">
    var nodes = [];
    var edges = [];
</script>

<div class="js-inline-admin-formset inline-group group djn-group djn-stacked{% if is_nested %} djn-group-nested{% else %} djn-group-root{% endif %}"
    id="{{ inline_admin_formset.formset.prefix }}-group"
    data-inline-type="stacked"
    data-inline-formset="{{ inline_admin_formset.inline_formset_data }}"
    data-inline-model="{{ inline_admin_formset.inline_model_id }}">
    <h2>
        {% if inline_admin_formset.opts.title %}{{ inline_admin_formset.opts.title }}{% else %}{{ inline_admin_formset.opts.verbose_name_plural|capfirst }}{% endif %}
    </h2>

    {{ inline_admin_formset.formset.management_form }}
    {{ inline_admin_formset.formset.non_form_errors }}

    <div class="items djn-items">
        <form></form>
        {% with inline_admin_formset.opts.sortable_field_name|default:"" as sortable_field_name %}
        {% for inline_admin_form in inline_admin_formset|formsetsort:sortable_field_name %}

            {% if forloop.first %}
            <div class="djn-item djn-no-drag"><div></div></div>
            {% endif %}
            {{ inline_admin_form.management_form }}
            <div class="parent_div {% if not forloop.last %}djn-item{% endif %} djn-module djn-inline-form {% if inline_admin_formset.opts.classes %} {{ inline_admin_formset.opts.classes|join:" " }}{% endif %}{% if inline_admin_form.original or inline_admin_form.show_url %} has_original{% endif %}{% if forloop.last %} djn-empty-form empty-form{% endif %} inline-related"
                 {% if inline_admin_form.pk_field.field %}
                 data-is-initial="{% if inline_admin_form.pk_field.field.value %}true{% else %}false{% endif %}"
                 {% endif %}
                 id="{{ inline_admin_formset.formset.prefix }}{% if forloop.last %}-empty{% else %}{{ inline_admin_form.form|form_index }}{% endif %}">
                 <script type="text/javascript">
                    nodes.push({ data: { 
                        id: '{{inline_admin_form.original.id}}', 
                        name: '{{inline_admin_form.original}}', 
                        weight: 200, 
                        faveColor: '#6FB1FC', 
                        faveShape: 'rectangle' ,
                        'locked': true
                    } });
                    {% for dep in inline_admin_form.original.dependencias.all %}
                        edges.push({ data: { 
                            source: '{{dep.id}}', 
                            target: '{{inline_admin_form.original.id}}', 
                            faveColor: '#6FB1FC', 
                            strength: 90 
                        } });
                    {% endfor %}
                </script>
                
                <!--rem>
                    <h3 class="{% if not inline_opts.sortable_options or not inline_opts.sortable_options.disabled %} djn-drag-handler{% endif %}">
                        <b>{{ inline_admin_formset.opts.verbose_name|capfirst }}:</b>&nbsp;<span class="inline_label">{% if inline_admin_form.original %}{{ inline_admin_form.original }}{% if inline_admin_form.model_admin.show_change_link and inline_admin_form.model_admin.has_registered_model %} <a href="{% url inline_admin_form.model_admin.opts|admin_urlname:'change' inline_admin_form.original.pk|admin_urlquote %}" class="inlinechangelink">{% trans "Change" %}</a>{% endif %}
                        {% else %}{% ifnotsuit %}#{{ forloop.counter }}{% endifnotsuit %}{% endif %}</span>
                              {% if inline_admin_form.show_url %}<a href="{{ inline_admin_form.absolute_url }}">{% trans "View on site" %}</a>{% endif %}
                            {% if inline_admin_formset.formset.can_delete  %}
                            {% if inline_admin_form.original %}
                                <span class="delete djn-delete-handler {{ inline_admin_formset.handler_classes|join:" " }}">{{ inline_admin_form.deletion_field.field }} {{ inline_admin_form.deletion_field.label_tag }}</span>
                            {% else %}
                                <span><a class="inline-deletelink djn-remove-handler {{ inline_admin_formset.handler_classes|join:" " }}" href="javascript:void(0)">Remove</a></span>
                            {% endif %}
                            {% endif %}
                    </h3>
                </rem-->

                {% if inline_admin_form.form.non_field_errors %}
                    <ul class="errorlist">
                        <li>{{ inline_admin_form.form.non_field_errors }}</li>
                    </ul>
                {% endif %}
                <div id="inputs-p{{inline_admin_form.original.id}}">
                </div>
                <div id="p{{inline_admin_form.original.id}}" class="popup si" style="display: none;">
                    <form>
                        <ul>
                            <li><a href="#tabs-0">{% if inline_admin_formset.opts.title %}{{ inline_admin_formset.opts.title }}{% else %}{{ inline_admin_formset.opts.verbose_name_plural|capfirst }}{% endif %}</a></li>
                            {% for nested in inline_admin_form.form.inlines %}

                                <li><a href="#tabs-{{forloop.counter}}">
                                    {% if nested.opts.title %}{{ nested.opts.title }}{% else %}{{ nested.opts.verbose_name_plural|capfirst }}{% endif %}
                                </a></li>
                            {% endfor %}
                        </ul>
                        <div id="tabs-0">
                            {% for fieldset in inline_admin_form %}
                                {% include inline_admin_formset.opts.fieldset_template %}
                            {% endfor %}
                            {% if inline_admin_form.has_auto_field or inline_admin_form.needs_explicit_pk_field %}
                                {{ inline_admin_form.pk_field.field }}
                            {% endif %}
                            {{ inline_admin_form.fk_field.field }}
                        </div>
                        {% if inline_admin_form.form.inlines %}
                            {% for nested in inline_admin_form.form.inlines %}
                                <div id="tabs-{{forloop.counter}}">
                                {% include nested.opts.template with inline_admin_formset=nested %}
                                </div>
                            {% endfor %}
                        {% endif %}
                    </form>
                </div>
                <script type="text/javascript">
                    $( "#p{{inline_admin_form.original.id}}" ).tabs();
                </script>
            </div>
        {% endfor %}
        {% endwith %}

        {{ inline_admin_formset.extra_forms }}
    </div>
    <div id="cy"></div>
    <script type="text/javascript">

        $('#cy').cytoscape({
            layout: {
            name: 'dagre'
          },
          'initOptions.autoungrabify': true,
          wheelSensitivity: 0.0001,
          style: cytoscape.stylesheet()
            .selector('node')
              .css({
                'shape': 'data(faveShape)',
                'width': '130px',
                'height': '60px',
                'content': 'data(name)',
                'text-valign': 'center',
                'font-size': '12px',
                'word-wrap': 'break-word',
                'text-outline-width': 2,
                'text-outline-color': '#4a5154',
                'background-color': '#4a5154',
                'color': '#fff'
              })
            .selector(':selected')
              .css({
                'border-width': 3,
                'border-color': '#333'
              })
            .selector('edge')
              .css({
                'width': 4,
                'target-arrow-shape': 'triangle',
                'line-color': '#9dbaea',
                'target-arrow-color': '#9dbaea',
                'curve-style': 'bezier'
              })
            .selector('edge.questionable')
              .css({
                'line-style': 'dotted',
                'target-arrow-shape': 'diamond'
              })
            .selector('.faded')
              .css({
                'opacity': 0.25,
                'text-opacity': 0
              }),
          
          elements: {
            nodes: nodes,
            edges: edges
          },
          
          ready: function(){
            window.cy = this;
          }
        });
        cy.nodes().ungrabify();
        cy.on('click', 'node', function(evt){
            console.log( 'clicked ' + this.id() );
            openmodal('#p' + this.id());
        });
    </script>
    <div class="djn-module djn-add-item add-item add-row">
        <a href="javascript://" class="add-handler djn-add-handler {{ inline_admin_formset.handler_classes|join:" " }}">WW
            {% blocktrans with inline_admin_formset.opts.verbose_name|strip_parent_name:inline_opts.verbose_name|title as verbose_name %}Add another {{ verbose_name }}{% endblocktrans %}
        </a>
    </div>
</div>
{% endwith %}{# ends with inline_admin_formset.opts as inline_opts #}

{% endwith %}{# ends {% with inline_admin_formset.formset.is_nested as is_nested %} #}