{# designed to be printed in a small box #}
<div class="PNB10" callback="{{ callback }}">
    <form  id="quickAddUser" method="POST" action="{{ path('prod_push_do_add_user') }}">
        <table>
            <tr>
                <td>
                    <label for="">{{ 'First Name' | trans }} *</label>
                </td>
                <td>
                    <input name="firstname" type="text" value=""/>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="">{{ 'Last Name' | trans }} *</label>
                </td>
                <td>
                    <input name="lastname" type="text" value=""/>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="">{{ 'Email Name' | trans }} *</label>
                </td>
                <td>
                    <input name="email" type="text" value=""/>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="">{{ 'Job' | trans }}</label>
                </td>
                <td>
                    <input name="job" type="text" value=""/>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="">{{ 'Company' | trans }}</label>
                </td>
                <td>
                    <input name="company" type="text" value=""/>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="">{{ 'City' | trans }}</label>
                </td>
                <td>
                    <input name="city" type="text" value="" class="geoname_field"/>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <button class="valid btn btn-inverse" type="submit">{{ 'Add' | trans }}</button>
                    <button class="cancel btn btn-inverse" type="button">{{ 'Cancel' | trans }}</button>
                </td>
            </tr>
            <tr>
                <td></td>
                <td class="messages"></td>
            </tr>
        </table>
    </form>
</div>

<script type="text/javascript">

    $addUserForm = $('#quickAddUser');
    $addUserFormMessages = $addUserForm.find('.messages');

    var closeModal = function() {
        var dialog = $addUserForm.closest('.ui-dialog-content');
        if (dialog.data("ui-dialog")) {
            dialog.dialog('destroy').remove();
        }
    };

    var submitAddUser = function() {
        console.log('add user');
        $addUserFormMessages.empty();
        var method = $addUserForm.attr('method');

        method = $.inArray(method.toLowerCase(), ['post', 'get']) ? method : 'POST';
        $.ajax({
            type : method,
            url : $addUserForm.attr('action'),
            data : $addUserForm.serializeArray(),
            beforeSend : function(){
                $addUserForm.addClass('loading');
            },
            success : function(datas){
                if( datas.success === true ) {
                    p4.Feedback.addUser($addUserForm, closeModal);
                } else {
                    if( datas.message !== undefined ) {
                        $addUserFormMessages.empty().append('<div class="alert alert-error">' + datas.message + '</div>');
                    }
                }
                $addUserForm.removeClass('loading');
            },
            error:function(){
                $addUserForm.removeClass("loading");
            },
            timeout:function(){
                $addUserForm.removeClass("loading");
            }
        });
    };

    $addUserForm.find('.geoname_field').geocompleter({
        "server": "{{ app['geonames.server-uri'] }}",
        "limit": 40
    });

    $addUserForm.on('submit', function(event) {
        event.preventDefault();
        submitAddUser();
    });

    $addUserForm.on('click', '.validate', function(event) {
        event.preventDefault();
        submitAddUser();
    });

    $addUserForm.on('click', '.cancel', function(event) {
        event.preventDefault();
        closeModal();
        return false;
    });
    </script>