{% 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_m1">
            {% if lang == 'hr' %}
                Mjerenje 1
            {% else %}
                Measurement 1
            {% endif %}
        </a></li>
        <li><a data-toggle="tab" href="#notification_menu_m2">
            {% if lang == 'hr' %}
                Mjerenje 2
            {% else %}
                Measurement 2
            {% endif %}
        </a></li>
        <li><a data-toggle="tab" href="#notification_menu_m3">
            {% if lang == 'hr' %}
                Mjerenje 3
            {% else %}
                Measurement 3
            {% endif %}
        </a></li>
        <li><a data-toggle="tab" href="#notification_menu_m4">
            {% if lang == 'hr' %}
                Mjerenje 4
            {% else %}
                Measurement 4
            {% endif %}
        </a></li>
        <li><a data-toggle="tab" href="#notification_menu_m5">
            {% if lang == 'hr' %}
                Mjerenje 5
            {% else %}
                Measurement 5
            {% endif %}
        </a></li>
        <li><a data-toggle="tab" href="#notification_menu_m6">
            {% if lang == 'hr' %}
                Mjerenje 6
            {% else %}
                Measurement 6
            {% endif %}
        </a></li>
        <li><a data-toggle="tab" href="#notification_menu_m7">
            {% if lang == 'hr' %}
                Mjerenje 7
            {% else %}
                Measurement 7
            {% endif %}
        </a></li>
        <li><a data-toggle="tab" href="#notification_menu_m8">
            {% if lang == 'hr' %}
                Mjerenje 8
            {% else %}
                Measurement 8
            {% endif %}
        </a></li>
        <li><a data-toggle="tab" href="#notification_menu_m9">
            {% if lang == 'hr' %}
                Mjerenje 9
            {% else %}
                Measurement 9
            {% endif %}
        </a></li>
        <li><a data-toggle="tab" href="#notification_menu_m10">
            {% if lang == 'hr' %}
                Mjerenje 10
            {% else %}
                Measurement 10
            {% endif %}
        </a></li>
    </ul>

    <div class="tab-content">
        <div id="notification_menu_m1" class="tab-pane fade in active" style="margin-top: 15px">
            {{ form.measurement1recalculateenable | bootstrap_horizontal:'col-lg-4' }}
            {{ form.measurement1recalculateunit | bootstrap_horizontal:'col-lg-4' }}
            {{ form.measurement1recalculatefactor | bootstrap_horizontal:'col-lg-4' }}
        </div>
        <div id="notification_menu_m2" class="tab-pane fade in" style="margin-top: 15px">
            {{ form.measurement2recalculateenable | bootstrap_horizontal:'col-lg-4' }}
            {{ form.measurement2recalculateunit | bootstrap_horizontal:'col-lg-4' }}
            {{ form.measurement2recalculatefactor | bootstrap_horizontal:'col-lg-4' }}
        </div>
        <div id="notification_menu_m3" class="tab-pane fade in" style="margin-top: 15px">
            {{ form.measurement3recalculateenable | bootstrap_horizontal:'col-lg-4' }}
            {{ form.measurement3recalculateunit | bootstrap_horizontal:'col-lg-4' }}
            {{ form.measurement3recalculatefactor | bootstrap_horizontal:'col-lg-4' }}
        </div>
        <div id="notification_menu_m4" class="tab-pane fade in" style="margin-top: 15px">
            {{ form.measurement4recalculateenable | bootstrap_horizontal:'col-lg-4' }}
            {{ form.measurement4recalculateunit | bootstrap_horizontal:'col-lg-4' }}
            {{ form.measurement4recalculatefactor | bootstrap_horizontal:'col-lg-4' }}
        </div>
        <div id="notification_menu_m5" class="tab-pane fade in" style="margin-top: 15px">
            {{ form.measurement5recalculateenable | bootstrap_horizontal:'col-lg-4' }}
            {{ form.measurement5recalculateunit | bootstrap_horizontal:'col-lg-4' }}
            {{ form.measurement5recalculatefactor | bootstrap_horizontal:'col-lg-4' }}
        </div>
        <div id="notification_menu_m6" class="tab-pane fade in" style="margin-top: 15px">
            {{ form.measurement6recalculateenable | bootstrap_horizontal:'col-lg-4' }}
            {{ form.measurement6recalculateunit | bootstrap_horizontal:'col-lg-4' }}
            {{ form.measurement6recalculatefactor | bootstrap_horizontal:'col-lg-4' }}
        </div>
        <div id="notification_menu_m7" class="tab-pane fade in" style="margin-top: 15px">
            {{ form.measurement7recalculateenable | bootstrap_horizontal:'col-lg-4' }}
            {{ form.measurement7recalculateunit | bootstrap_horizontal:'col-lg-4' }}
            {{ form.measurement7recalculatefactor | bootstrap_horizontal:'col-lg-4' }}
        </div>
        <div id="notification_menu_m8" class="tab-pane fade in" style="margin-top: 15px">
            {{ form.measurement8recalculateenable | bootstrap_horizontal:'col-lg-4' }}
            {{ form.measurement8recalculateunit | bootstrap_horizontal:'col-lg-4' }}
            {{ form.measurement8recalculatefactor | bootstrap_horizontal:'col-lg-4' }}
        </div>
        <div id="notification_menu_m9" class="tab-pane fade in" style="margin-top: 15px">
            {{ form.measurement9recalculateenable | bootstrap_horizontal:'col-lg-4' }}
            {{ form.measurement9recalculateunit | bootstrap_horizontal:'col-lg-4' }}
            {{ form.measurement9recalculatefactor | bootstrap_horizontal:'col-lg-4' }}
        </div>
        <div id="notification_menu_m10" class="tab-pane fade in" style="margin-top: 15px">
            {{ form.measurement10recalculateenable | bootstrap_horizontal:'col-lg-4' }}
            {{ form.measurement10recalculateunit | bootstrap_horizontal:'col-lg-4' }}
            {{ form.measurement10recalculatefactor | 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>