{% block resizable_image_widget %}
    {% spaceless %}
        <input type="file" accept="image/*" {{ block('widget_container_attributes') }} id="{{ form.vars['id'] }}">
        <div id="{{ form.vars['id'] }}_fields">
            {% for part in form.children %}
                {{ form_widget(part) }}
            {% endfor %}
        </div>
        <script>
            $( function () {
                $('#{{ form.vars['id'] }}').on('change', function (event) {
                    {% if form.vars['max_size'] is defined %}
                        var maxSize = {{ form.vars['max_size'] }};
                    {% endif %}
                    var input = this;
                    var file  = input.files[0];

                    if (file && file.type.match(/^image\/.+$/) && window.File && window.FileReader && window.FileList && window.Image) {
                        var reader = new FileReader();
                        reader.onload = function(readerEvent) {
                            var image = new Image();
                            image.onload = function (imageEvent) {
                                var width = image.width;
                                var height = image.height;

                                {% if form.vars['max_size'] is defined %}
                                    if (width > height) {
                                        if (width > maxSize) {
                                            height *= maxSize / width;
                                            width = maxSize;
                                        }
                                    } else {
                                        if (height > maxSize) {
                                            width *= maxSize / height;
                                            height = maxSize;
                                        }
                                    }
                                {% endif %}

                                var canvas = document.createElement('canvas');
                                canvas.width = width;
                                canvas.height = height;
                                canvas.getContext('2d').drawImage(image, 0, 0, width, height);

                                $('#{{ form.vars['id'] }}_fields input[name="{{ form.vars['full_name'] }}[file]"]').val(canvas.toDataURL(file.type));
                                $('#{{ form.vars['id'] }}_fields input[name="{{ form.vars['full_name'] }}[name]"]').val(file.name);
                                $('#{{ form.vars['id'] }}_fields input[name="{{ form.vars['full_name'] }}[type]"]').val(file.type);
                                $('#{{ form.vars['id'] }}_fields input[name="{{ form.vars['full_name'] }}[size]"]').val(file.size);

                                input.dispatchEvent(new Event('resized'));
                            };
                            image.src = readerEvent.target.result;
                        };
                        reader.readAsDataURL(file);
                    }
                });
            });
        </script>
    {% endspaceless %}
{% endblock resizable_image_widget %}