{% extends "layout2.html" %}
{% load i18n %}
{% load static %}

{% block css_include %}
    <link rel="stylesheet" href="{% static 'plugins/visjs/visjs.min.css' %}"/>
    <link rel="stylesheet" href="{% static 'plugins/jquery-confirm/jquery-confirm.min.css' %}"/>
    <link rel="stylesheet" href="{% static 'plugins/jstree/themes/default/style.min.css' %}"/>
    <link rel="stylesheet" href="{% static 'plugins/font-awesome4/css/font-awesome.min.css' %}"/>
{% endblock %}

{% block js_include %}
    <script src="{% static 'plugins/jstree/jstree.min.js' %}"></script>
    <script src="{% static 'plugins/jquery-confirm/jquery-confirm.min.js' %}"></script>
    <script src="{% static 'plugins/jquery-match-height/jquery-match-height.min.js' %}"></script>
    <script src="{% static 'plugins/visjs/visjs.min.js' %}"></script>
    <script src="{% static 'js/workflow_form.js' %}"></script>
    <script src="{% static 'js/workflow.js' %}"></script>
{% endblock %}

{% block content %}

  <section class="content form-horizontal" id="workflow_vue">
    <div class="row">
        <form id="workflow_save_form" action="#">
            {% csrf_token %}
            <div class="col-md-12">
                <div class="panel">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="fab fa-hubspot">&nbsp;</i>{% translate "Workflow" %}</h3>
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="panel panel-colorful panel-dark" id="block-tree">
                                    <div class="panel-body" id="toolbox">
                                        <div class="form-group">
                                            <label>{% translate "Enabled" %}:</label>
                                            {{form.enabled}}
                                            {{form.enabled.errors|safe}}
                                        </div>
                                        <div class="form-group">
                                            <label>{% translate "Workflow name" %}:</label>
                                            {{form.name}}
                                            {{form.name.errors|safe}}
                                        </div>
                                        <div class="input-group" id="toolbox-workflow">
                                            <input type="text" id="search-toolbox" placeholder="{% translate 'Search' %}" class="form-control input-sm"/>
                                            <span class="input-group-btn">
                                                <button class="btn btn-success btn-sm" id="search-toolbox-btn" type="button"><i class="fa fa-search"></i>&nbsp;Search</button>
                                                <button class="btn btn-purple btn-sm" v-on:click="get_dependencies()" type="button"><i class="fas fa-sync"></i></button>
                                            </span>
                                        </div>
                                        <hr/>
                                        {% comment %} ashamed of this inline 'style' tag, but easiest solution right now... {% endcomment %}
                                        <div id="toolbox-jstree" style="max-height: 400px; overflow-x: hidden">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-9">
                                <div class="panel panel-bordered-primary" id="block-visualisation">
                                    <div class="panel-body">
                                        <div class="row">
                                            <div id="workflow-visualisation" style="height: 600px;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="pull-right">
                                    <label><i class="fa fa-cloud fa-2x"></i>&nbsp;&nbsp;{% translate "Internet" %}</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <label><i class="fa fa-sitemap fa-2x"></i>&nbsp;&nbsp;{% translate "Frontend" %}</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <label><i class="fa fa-lock fa-2x"></i>&nbsp;&nbsp;{% translate "ACL" %}</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <label><i class="fa fa-server fa-2x"></i>&nbsp;&nbsp;{% translate "Backend" %}</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <label><i class="fa fa-user fa-2x"></i>&nbsp;&nbsp;{% translate "Authentication" %}</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <label><i class="fa fa-shield fa-2x"></i>&nbsp;&nbsp;{% translate "Authentication Filter" %}</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <label><i class="fa fa-database fa-2x"></i>&nbsp;&nbsp;{% translate "Database" %}</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="panel-footer">
                        <a href="{% url 'workflow.list' %}" class="btn btn-flat btn-default"><i class="fa fa-times">&nbsp;&nbsp;</i>{% translate "Cancel" %}</a>
                        <button type="submit" id="btn-save-workflow" class="btn btn-flat btn-success pull-right"><i class="fa fa-check">&nbsp;&nbsp;</i>{% translate "Save" %}</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
  </section>

{% endblock %}


{% block jquery_code %}

    var workflow_id = "{{ object_id }}";
    var vulture_logo = "{% static 'img/vulture-logo.png' %}";
    var radius_logo = "{% static 'img/logos/radius.png' %}";
    var kerberos_logo = "{% static 'img/logos/kerberos.png' %}";
    var ldap_logo = "{% static 'img/logos/ldap.png' %}";
    var openid_logo = "{% static 'img/logos/openid.png' %}";
    var otp_logo = "{% static 'img/logos/otp.png' %}";
    var server_icon = "{% static 'plugins/visjs/img/network/server-icon.jpg' %}";
    var favicon = "{% static 'img/favicon.ico' %}";
    var access_control_get = "{% url 'api.darwin.access_control.get' %}";
    var access_control_add_uri = "{% url 'darwin.access_control.edit' %}";
    var frontend_services_api = "{% url 'services.frontend.api' %}";
    var frontend_add_uri = "{% url 'services.frontend.edit' %}";
    var backend_applications_api = "{% url 'applications.backend.api' %}";
    var backend_add_uri = "{% url 'applications.backend.edit' %}";
    var workflow_api = "{% url 'workflow.api' %}"
    var worflow_list_uri = "{% url 'workflow.list' %}";
    var authentication_portal_api = "{% url 'api.portal.user_authentication' %}";
    var authentication_add_uri = "{% url 'portal.user_authentication.edit' %}";
    var authentication_filter_api = "{% url 'api.portal.authentication_access_control' %}";
    var authentication_filter_add_uri = "{% url 'portal.authentication_access_control.edit' %}";

{% endblock %}