{% extends "workflow/viewport-element.html" %}
{% load staticfiles %}

{% load bootstrap3 %}


{% block extrahead %}
    <!-- DataTables CSS -->
    <link href="{% static "bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" %}"
          rel="stylesheet">

    <!-- DataTables Responsive CSS -->
    <link href="{% static "bower_components/datatables-responsive/css/dataTables.responsive.css" %}" rel="stylesheet">
{% endblock extrahead %}

{% block content %}
{% if error %}
    <h1 style="text-align:center;">{{ error }}</h1>
{% else %}
    <form style="width: 90%; margin: 5%;" method="post" action="" class="form" id="softwaredefinitionform">
        {% csrf_token %}

    <div class="row">
        <div class="col-lg-12">
                    <div class="dataTables_wrapper">
                        <table class="table table-striped table-bordered table-hover" id="table" cellspacing="0"
                               width="100%">

                            {% block table %}
                                <thead>
                                    <tr>
                                        <th>Device</th>
                                        <th>Role</th>
                                        <th>Image</th>
                                    </tr>
                                </thead>
                                <tbody>
                            {% for form in formset %}
                                <tr>
                                {% for field in form %}
                                    <td>{{ field }}</td>
                                {% endfor %}
                                </tr>
                            {% endfor %}
                            {{formset.management_form}}

                            {% endblock table %}

                        </table>
                    </div>
                    <!-- /.table-responsive -->
                <!-- /.panel-body -->
            <!-- /.panel -->
        </div>
        <!-- /.col-lg-12 -->
    </div>
    </form>

    <script>
function filter_images(){
    var filter_data = {{filter_data|safe}};
    for(var key in filter_data){
        var dropdown = document.getElementById(key);
        var to_remove = filter_data[key];
        for(var i=0; i<to_remove.length; i++){
            for(var j=dropdown.children.length-1; j>=0; j--){
                if(dropdown.children[j].text == to_remove[i]){
                    dropdown.removeChild(dropdown.children[j]);
                }
            }
        }
    }
}

filter_images();
    </script>
{% endif %}
{% endblock content %}

{% block extrajs %}
    {{ block.super }}
    <!-- DataTables JavaScript -->

    <script src={% static "bower_components/datatables/media/js/jquery.dataTables.min.js" %}></script>
    <script src={% static "bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js" %}></script>

    <script src={% static "js/dataTables-sort.js" %}></script>

    {% block tablejs %}
    {% endblock tablejs %}
{% endblock extrajs %}


{% block onleave %}
var form = $("#softwaredefinitionform");
var formData = form.serialize();
var req = new XMLHttpRequest();
req.open("POST", "/wf/workflow/", false);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.onerror = function() { alert("problem with form submission"); }
req.send(formData);
{% endblock %}