{% trans_default_domain comur_translation_domain %}
{# trans_default_domain 'ComurImageBundle' #}

{% block comur_image_scripts %}
{% if include_jquery is not defined or include_jquery %}
    <!-- The jQuery script, can be omitted if jQuery is already included -->
    <script src="{{ asset('bundles/comurimage/js/jquery.js') }}"></script>
{% endif %}
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="{{ asset('bundles/comurimage/js/jquery.ui.widget.js') }}"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="{{ asset('bundles/comurimage/js/jquery.iframe-transport.js') }}"></script>
<script src="{{ asset('bundles/comurimage/js/jquery.fileupload.js') }}"></script>
<script src="{{ asset('bundles/comurimage/js/jquery.Jcrop.min.js') }}"></script>
<script src="{{ asset('bundles/comurimage/js/jquery.color.js') }}"></script>
{% if include_holder is not defined or include_holder %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.5.2/holder.min.js"></script>
{% endif %}
{% if include_bootstrap is not defined or include_bootstrap %}
    <script src="{{ asset('bundles/comurimage/js/bootstrap.min.js') }}"></script>
{% endif %}
<!-- ComurImageBundle script. Do not remove this -->
<script src="{{ asset('bundles/comurimage/js/comur.imagelibrary.js') }}"></script>
{% endblock %}

{% block comur_image_stylesheets %}
<link rel="stylesheet" href="{{ asset('bundles/comurimage/css/jquery.Jcrop.min.css') }}" type="text/css" />
{% if include_bootstrap is not defined or include_bootstrap %}
    <!-- The bootstrap stylesheet, can be omitted if already inclided -->
    <link rel="stylesheet" href="{{ asset('bundles/comurimage/css/bootstrap.min.css') }}" type="text/css" />
{% endif %}
<link rel="stylesheet" href="{{ asset('bundles/comurimage/css/comur.image_bundle.css') }}" type="text/css" />
{% endblock %}

<div id="image_upload_modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3>{% trans %}Insert Image{% endtrans %}</h3>
            </div>
            <div class="modal-body">
                <ul class="nav nav-pills" id="image_upload_tabs">
                    <li class="active">
                        <a href="#upload-image" data-toggle="tab">{% trans %}Upload Image{% endtrans %}</a>
                    </li>
                    <li><a href="#select-existing" data-toggle="tab">{% trans %}Select Existing{% endtrans %}</a></li>
                    <li><a href="#crop-and-use" data-toggle="tab">{% trans %}Crop and Use{% endtrans %}</a></li>
                </ul>
                <div class="tab-content">
                    <!-- UPLOAD IMAGE -->
                    <div class="tab-pane active" id="upload-image">
                        <div class="field-error clearfix hidden">
                            <div id="image_upload_widget_error" class="alert alert-danger span6">
                            </div>
                        </div>
                        <div id="image_upload_drop_zone" class="image_upload_drop_zone">
                            <p>{% trans %}Drop your file here{% endtrans %}</p>
                            <p>{% trans %}or{% endtrans %}</p>
                        </div>
                        <div id="image_upload_file_container">
                            <span class="btn btn-info fileinput-button">
                                <i class="icon-white icon-download-alt"></i>
                                <span> {% trans %}Select a file...{% endtrans %}</span>
                                <input id="image_upload_file" type="file" name="image_upload_file">
                            </span>
                        </div>
                        <div id="image_file_upload_progress" class="progress">
                            <div class="progress-bar progress-bar-success"></div>
                        </div>
                    </div>
                    <!-- IMAGE LIB -->
                    <div class="tab-pane hidden" id="select-existing">
                        <div class="field-error clearfix hidden">
                            <div id="image_select_widget_error" class="alert alert-danger span6">
                            </div>
                        </div>
                        <div id="existing-images"></div>
                        <input type="hidden" id="selected_image"/>
                    </div>
                    <!-- CROP IMAGE -->
                    <div class="tab-pane" id="crop-and-use">
                        <p>{% trans %}Please adjust selection to your image{% endtrans %}</p>
                        <div class="image_preview" id="image_preview" style="z-index: 1050">
                            <p>{% trans %}Please select or upload an image{% endtrans %}</p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn" data-dismiss="modal" aria-hidden="true">{% trans %}Close{% endtrans %}</button>
                    <span class="btn btn-success hidden" id="image_crop_go_now">
                        <i class="icon-white icon icon-fullscreen"></i>
                        {% trans %}Crop & Use !{% endtrans %}
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $('#image_upload_modal').on({
        'hidden.bs.modal': destroyImageManager
    });
</script>