{% load bootstrap %}
{% load staticfiles %}

<form class="form-horizontal" id="RecalculateUnitsForm" action="{% url 'Applications.Measure.views.measure_unit_recalculation_form' %}" method="post">
    <div hidden>
        {{ form.lldevicelist | bootstrap_horizontal }}
    </div>

    <ul class="nav nav-tabs" id="NotificationTabs">
        <li class="active"><a data-toggle="tab" href="#notification_menu_ci">
            {% if lang == 'hr' %}
                Strujni ulaz
            {% else %}
                Current input
            {% endif %}
        </a></li>
        <li><a data-toggle="tab" href="#notification_menu_vi">
            {% if lang == 'hr' %}
                Naponski ulaz
            {% else %}
                Voltage input
            {% endif %}
        </a></li>
        <li><a data-toggle="tab" href="#notification_menu_f">
            {% if lang == 'hr' %}
                Protok
            {% else %}
                Flow
            {% endif %}
        </a></li>
        <li><a data-toggle="tab" href="#notification_menu_t1">
            {% if lang == 'hr' %}
                Ukupni protok 1
            {% else %}
                Total flow 1
            {% endif %}
        </a></li>
        <li><a data-toggle="tab" href="#notification_menu_t2">
            {% if lang == 'hr' %}
                Ukupni protok 2
            {% else %}
                Total flow 2
            {% endif %}
        </a></li>
        <li><a data-toggle="tab" href="#notification_menu_t3">
            {% if lang == 'hr' %}
                Ukupni protok 3
            {% else %}
                Total flow 3
            {% endif %}
        </a></li>
    </ul>

    <div class="tab-content">
        <div id="notification_menu_ci" class="tab-pane fade in active" style="margin-top: 15px">
            {{ form.analogcurrentrecalculateenable | bootstrap_horizontal:'col-lg-4' }}
            {{ form.analogcurrentrecalculateunit | bootstrap_horizontal:'col-lg-4' }}
            {{ form.analogcurrentrecalculateequation | bootstrap_horizontal:'col-lg-4' }}
        </div>
        <div id="notification_menu_vi" class="tab-pane fade in" style="margin-top: 15px">
            {{ form.analogvoltagerecalculateenable | bootstrap_horizontal:'col-lg-4' }}
            {{ form.analogvoltagerecalculateunit | bootstrap_horizontal:'col-lg-4' }}
            {{ form.analogvoltagerecalculateequation | bootstrap_horizontal:'col-lg-4' }}
        </div>
        <div id="notification_menu_f" class="tab-pane fade in" style="margin-top: 15px">
            {{ form.flowrecalculateenable | bootstrap_horizontal:'col-lg-4' }}
            {{ form.flowrecalculateunit | bootstrap_horizontal:'col-lg-4' }}
            {{ form.flowrecalculatefactor | bootstrap_horizontal:'col-lg-4' }}
        </div>
        <div id="notification_menu_t1" class="tab-pane fade in" style="margin-top: 15px">
            {{ form.totalflow1recalculateenable | bootstrap_horizontal:'col-lg-4' }}
            {{ form.totalflow1recalculateunit | bootstrap_horizontal:'col-lg-4' }}
            {{ form.totalflow1recalculatefactor | bootstrap_horizontal:'col-lg-4' }}
        </div>
        <div id="notification_menu_t2" class="tab-pane fade in" style="margin-top: 15px">
            {{ form.totalflow2recalculateenable | bootstrap_horizontal:'col-lg-4' }}
            {{ form.totalflow2recalculateunit | bootstrap_horizontal:'col-lg-4' }}
            {{ form.totalflow2recalculatefactor | bootstrap_horizontal:'col-lg-4' }}
        </div>
        <div id="notification_menu_t3" class="tab-pane fade in" style="margin-top: 15px">
            {{ form.totalflow3recalculateenable | bootstrap_horizontal:'col-lg-4' }}
            {{ form.totalflow3recalculateunit | bootstrap_horizontal:'col-lg-4' }}
            {{ form.totalflow3recalculatefactor | bootstrap_horizontal:'col-lg-4' }}
        </div>
    </div>
</form>

<button type="button" style="margin-top:20px;" class="btn btn-primary btn-block" onclick="save_recalculate_units();">
    {% if lang == 'hr' %}
        Spremi promjene
    {% else %}
        Save changes
    {% endif %}
</button>


<script type="text/javascript">


    function save_recalculate_units() {
        var frm = $('#RecalculateUnitsForm');
        var frmData=frm.serialize();
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            headers: {'X-CSRFToken': getCookie('csrftoken')},
            success: function (data) {
                if (data==='Ok'){
                    alert('Data saved');
                }else{
                    alert('Error saving');
                }
            },
            error: function(data) {
                alert('Error saving');
            }
        });
    }
</script>