{% extends "main.html" %}
{% block content %}

<style>
    #cfg-wrapper {
        height:100%;
        position:relative;
    }

    #cfg-inner-wrapper {
        height:100%;
        padding-top: 100px;
    }

    #cfgs {
        height:100px;
        margin-top:-100px;
    }

    #cfg {
        height: 100%;
        overflow: auto;
        <!--margin-left: 200px;-->
        padding-left: 30px;
        <!--border-left: 1px solid #9e9e9e;-->
    }

    sidenav {
        position: fixed!important;
        width:200px;
        padding-left:10px;
    }

    input[type=submit] {
      width: 100%;
    }

    .container {
        padding: 20px 16px;
    }
</style>

{% load django_bootstrap_breadcrumbs %}
{% block breadcrumbs %}
{% clear_breadcrumbs %}
{% for b, u in path %}
{% breadcrumb_raw_safe b u %}
{% endfor %}
{% endblock %}

<div id="cfg-wrapper" class="container">
    <div class="card" style="height:100%">
        <div id="cfg-inner-wrapper">

            <header id="cfgs">
                <form action="" method="post">{% csrf_token %}
                    {{ cfgs }}
                </form>
                {% render_breadcrumbs %}
            </header>

            <!--{% if cfg is not None %}-->
            <!--<sidenav>-->
                <!--{% for i,j in keys %}-->
                <!--<a style="font-size:16px; font-weight: bold; display:block;" href="/cfgs/{{cfg}}/{{i}}">{{ j }}</a>-->
                <!--{% endfor %}-->
            <!--</sidenav>-->

            {% if form is not None %}
            {% load material_form %}
            <div id="cfg">
                <!--<div>-->
                    <!--<h6 style="font-weight:bold">{{request.path}}</h6>-->
                    <form action="" method="post" style="padding-right:20px">

                        {% csrf_token %}
                        {% form form=form %}{% endform %}
                    </form>
                <!--</div>-->
            </div>
            {% endif%}

            {% if forms is not None %}
            {% load material_form %}
            <div id="cfg">
                {% for frm in forms %}
                <div id="form{{forloop.counter0}}" class="card" style="display:none">
                    <!--<h6 style="font-weight:bold">{{request.path}}/{{forloop.counter0}}</h6>-->
                    <form action="" method="post" style="padding-right:20px">

                        {% csrf_token %}
                        <!--{{ frm }}-->
                        {% form form=frm %}{% endform %}
                        <input type="hidden" name="_id" value="{{forloop.counter0}}">
                    </form>
                </div>
                {% endfor %}

                <input id="prevbutton" type="button" value="Previous" class="btn blue" disabled/>
                <input id="nextbutton" type="button" value="Next" class="btn blue" disabled/>
                <input id="removebutton" type="button" class="btn red" value="Remove" disabled/>
                <input id="addbutton" type="button" value="Add" class="btn green" disabled/>

            </div>

            <script>
                var form_id = 0

                function handleButtons(new_form_id) {
                    form_id = new_form_id
                    $("div[id^='form']").hide();
                    $("#form"+new_form_id).show();

                    if (new_form_id>0) $("#prevbutton").prop('disabled', false);
                    else $("#prevbutton").prop('disabled', true);

                    if ($('#form1').length) $("#removebutton").prop('disabled', false);
                    else $("#removebutton").prop('disabled', true);

                    if ($('#form'+(new_form_id+1)).length) {
                        $("#nextbutton").prop('disabled', false);
                        $("#addbutton").prop('disabled', true);
                    } else {
                        $("#nextbutton").prop('disabled', true);
                        $("#addbutton").prop('disabled', false);
                    }
                }

                $("#prevbutton").click(function (){handleButtons(form_id-1)})
                $("#nextbutton").click(function (){handleButtons(form_id+1)})
                $("#addbutton").click(function() {
                    window.location = '{{request.path}}'+'/add';
                })
                $("#removebutton").click(function() {
                    window.location = '{{request.path}}'+'/remove/'+form_id;
                })

                handleButtons(form_id)
            </script>

            {% endif %}
            {% endif %}


            <script>
                $(function() { $(":input").change(function() {
                    $.post( '', $(this.form).serialize(), function(data) {
                         alert('server response'+data);
                       }, 'json' );
                })
                });
            </script>
        </div>
    </div>
</div>

{% endblock %}