{% block ckfinder_file_chooser_widget %}
    {% if value %}
        {% if (value ends with '.jpg') or (value ends with '.jpeg') or (value ends with '.gif') or (value ends with '.png') or (value ends with '.svg') %}
            <img src="{{ value }}" alt="Preview" style="width:150px;height:auto;object-fit:contain;margin-bottom:16px;border-radius:4px;display:block;">
        {% else %}
            {{ value|split('/')|last|replace({'%20': ' ', '%2D': '-'}) }}
        {% endif %}
        <br>
    {% endif %}
    <div style="display:none;">{{ block('form_widget_simple') }}</div>
    <span class="{{ button_id }}-preview"></span>
    <img src="{{ value }}" alt="Preview" class="{{ button_id }}-preview-img" style="width:150px;height:auto;object-fit:contain;margin-bottom:16px;border-radius:4px;display:none;">
    <a class="btn" href="#" id="{{ button_id }}" {% for attrname, attrvalue in button_attr %} {{ attrname }}="{{ attrvalue }}"{% endfor %}>Choisir dans {{ config_name }}...</a>
   
    <script>
    (function (){
    const previewLink = document.querySelector(".{{ button_id }}-preview");
    const previewLinkImg = document.querySelector(".{{ button_id }}-preview-img");
        document.getElementById( '{{ button_id }}' ).addEventListener( 'click', function( e ) {
            e.preventDefault();
            CKFinder.modal( {
                resourceType: '{{ config_name }}',
                chooseFiles: true,
	            language: 'fr',
                onInit: function( finder ) {
                    finder.on( 'files:choose', function( evt ) {
                        var file = evt.data.files.first();
                        var output = document.getElementById( '{{ id }}' );
                        output.value = file.getUrl();
                        output.dispatchEvent(new Event('change'));
                        if(file.getUrl().endsWith(".jpg") || file.getUrl().endsWith(".png") || file.getUrl().endsWith(".jpeg")){
                            previewLinkImg.src = file.getUrl();
                            previewLinkImg.style.display = "block";
                        } else {
                            previewLink.innerHTML = file.getUrl();
                        }
                    } );
                    finder.on( 'file:choose:resizedImage', function( evt ) {
                        var output = document.getElementById( '{{ id }}' );
                        output.value = evt.data.resizedUrl;
                        output.dispatchEvent(new Event('change'));
                        if(file.getUrl().endsWith(".jpg") || file.getUrl().endsWith(".png") || file.getUrl().endsWith(".jpeg")){
                            previewLinkImg.src = file.getUrl();
                            previewLinkImg.style.display = "block";
                        } else {
                            previewLink.innerHTML = file.getUrl();
                        }
                    } );
                }
            } );
        } );
        })();
    </script>
{% endblock %}