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

<div class="modal-header">
    <h3 class="modal-title">
        <p><img class="media-object" src="{%static "img/edit_user-128.png" %}" alt="..." style="width: 30px;float:left;margin-right: 10px">
            {% if lang == 'hr'%}
                Promjena informacija za: {{ user.username }}
            {% else %}
                Edit user information: {{ user.username }}
            {% endif %}
            <small style="margin-bottom: 10px;">
                <cite title="Group">
                    {% if lang == 'hr'%}
                        Pripada grupi <span style="color:red">{{ groups.first }}</span> s ulogom  <span style="color:red">{{ role }}</span>
                    {% else %}
                        Belongs to group <span style="color:red">{{ groups.first }}</span> with role <span style="color:red">{{ role }}</span>
                    {% endif %}
                </cite>
            </small>
        </p>
    </h3>
</div>
<div class="row">
    <div class="col-sm-12">
        <form class="form-horizontal" id="UserEditInformationForm" action="{% url 'Applications.Users.views.user_edit_information_return_form' %}" method="post">
            <div class="modal-body">

                {% for field in fields_user_info %}
                    {{ field|bootstrap_horizontal }}
                {% endfor %}


                <div class="row" style="padding:5px; text-align: center">
                    <span class="input-group-btn">
                        <button class="btn btn-primary" role="button" data-toggle="collapse" href="\#collapse_password" aria-expanded="false" aria-controls="collapse_password" style="width: 60%">
                            {% if lang == 'hr'%}
                                Promjeni lozinku
                            {% else %}
                                Change password
                            {% endif %}
                            <span class="glyphicon glyphicon-menu-down">
                            </span>
                        </button>
                    </span>
                </div>
                <div class="collapse" id="collapse_password" style="padding-top: 10px">
                    {% for field in fields_passwords %}
                        {{ field|bootstrap_horizontal }}
                    {% endfor %}
                </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="submitUserEditInformation()">
                            {% if lang == 'hr'%}
                                Spremi promjene
                            {% else %}
                                Save changes
                            {% endif %}
                        </button>
                    </div>
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-primary" data-dismiss="modal">
                            {% if lang == 'hr'%}
                                Odustani
                            {% else %}
                                Close
                            {% endif %}
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<script type="text/javascript">

    function submitUserEditInformation() {
        var frm = $('#UserEditInformationForm');
        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') {
                    $('#ModalSmall').modal('hide');
                } else if (data === 'No match'){
                    alert('Passwords do not match');
                } else if (data === 'Password change'){
                    location.reload(true)
                }else{
                    alert('Error saving user information');
                }
            },
            error: function(data) {
                alert('Error saving user information');
            }
        });
    }

</script>