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

<div class="modal-header">
    <h4 class="modal-title">
        <p><img class="media-object" src="{%static "img/info-128.png" %}" alt="..." style="width: 30px;float:left;margin-right: 10px">
            ID: {{ device_id }} ({{ device_identifier }})
        </p>
    </h4>
</div>

<div class="row">
    <div class="col-sm-11">
        <form class="form-horizontal" id="DeviceInformationForm" action="{% url 'Applications.Devices.Information.views.information_return_form' %}" method="post">
            <div class="modal-body">
                <input type="hidden" value="{{ device_id }}" name="device_id">
                <input type="hidden" value="{{ device_identifier }}" name="device_identifier">

                <ul class="nav nav-tabs" id="DeviceInformationTabs">
                    <li class="active"><a data-toggle="tab" href="#device_information_menu1">
                        {% if lang == 'hr'%}
                            Generalno
                        {% else %}
                            General
                        {% endif %}
                    </a></li>
                    <li><a data-toggle="tab" href="#device_information_menu2">
                        {% if lang == 'hr'%}
                            Lokacija
                        {% else %}
                            Location
                        {% endif %}
                    </a></li>
                    <li><a data-toggle="tab" href="#device_information_menu3">
                        {% if lang == 'hr'%}
                            SIM kartica
                        {% else %}
                            SIM card
                        {% endif %}
                    </a></li>
                    <li><a data-toggle="tab" href="#device_information_menu4">
                        {% if lang == 'hr'%}
                            Oznake kanala
                        {% else %}
                            Channel labels
                        {% endif %}
                    </a></li>

                    {% if form_other != None %}
                    <li><a data-toggle="tab" href="#device_information_menu5">
                        {% if lang == 'hr'%}
                            Ostalo
                        {% else %}
                            Other
                        {% endif %}
                    </a></li>
                    {% endif %}
                </ul>
                <div class="tab-content">

                    <div id="device_information_menu1" class="tab-pane fade in active" style="margin-top: 15px">
                        {% for field in form_general %}
                            {{ field|bootstrap_horizontal:'col-lg-4' }}
                        {% endfor %}
                    </div>
                    <div id="device_information_menu2" class="tab-pane fade in" style="margin-top: 15px">
                        {% for field in form_location %}
                            {{ field|bootstrap_horizontal:'col-lg-4' }}
                        {% endfor %}
                    </div>
                    <div id="device_information_menu3" class="tab-pane fade in" style="margin-top: 15px">
                        {% for field in form_sim_card %}
                            {{ field|bootstrap_horizontal:'col-lg-4' }}
                        {% endfor %}
                    </div>
                    <div id="device_information_menu4" class="tab-pane fade in" style="margin-top: 15px">
                        {% for field in form_channels %}
                            {{ field|bootstrap_horizontal:'col-lg-4' }}
                        {% endfor %}
                    </div>
                    {% if form_other != None %}
                    <div id="device_information_menu5" class="tab-pane fade in" style="margin-top: 15px">
                        {% for field in form_other %}
                            {{ field|bootstrap_horizontal }}
                        {% endfor %}
                    </div>
                    {% endif %}
                </div>
            </div>
            <div class="modal-footer">
                <div class="btn-group btn-group-justified" data-toggle="buttons" style="padding-bottom: 10px;padding-top: 5px" >
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-primary" onclick="submitDeviceInformation()">
                            {% if lang == 'hr'%}
                                Spremi promjene
                            {% else %}
                                Save changes
                            {% endif %}
                        </button>
                    </div>
                    <div class="btn-group" role="group">
                        <button id="close-button" type="button" class="btn btn-primary" data-dismiss="modal">
                            {% if lang == 'hr'%}
                                Odustani
                            {% else %}
                                Close
                            {% endif %}
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="col-sm-1">
        <img class="media-object" src="/static/device_img/{{ device_type }}.png" alt="..." style="width: 200px;">
    </div>
</div>

<script type="text/javascript">
    function submitDeviceInformation() {
        var frm = $('#DeviceInformationForm');
        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'){
                    $('#close-button').trigger('click');
                }else{
                    alert('Error saving device information');
                }
            },
            error: function(data) {
                alert('Error saving device information');
            }
        });
    }

</script>