{# contenitori/edit.html.twig #}

{% extends 'base.html.twig' %}

{% block body_id 'edit-container' %}    

{% block title %}Edit Contenitori{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    {# ElFinder CSS #}
    
    <style>
        .elfinder-input {
            cursor: pointer;
        }
        .image-field-group {
            border: 1px solid #ddd;
            padding: 15px;
            margin-bottom: 15px;
            border-radius: 5px;
        }
        .image-preview {
            max-width: 150px;
            max-height: 150px;
            margin-bottom: 10px;
        }
        .nav-tabs .nav-link.active {
            background-color: #f8f9fa;
        }
        .tab-content {
            background: #fff;
        }
    </style>
{% endblock %}    

{% block body %}
    <div class="mm-page">
        <div id="wrap">

            <div class="row">
                
                <div id="content" class="col-md-12">
                    
                <div class="col-md-12">       
<div class="titotlo-pagina">
    <h1>{{ 'Edit'|trans }} {{ nome|trans }} 
    {% if flag == 1 %}
        <span class="badge badge-warning">CLONE</span>
    {% endif %}
    </h1>
</div>

    {{ include('contenitori/_form.html.twig', {'button_label': 'Update'}) }}

    <a href="{{ path('contenitori_index', {'tipologia':contenitori.tipologia}) }}" class="btn btn-secondary mt-3">
        <i class="fa fa-arrow-left"></i> {{ 'back to list'|trans }}
    </a>

    {{ include('contenitori/_delete_form.html.twig') }}
    </div>
    </div>
    </div>
    </div>    
    </div>    
{% endblock %}

{% block javascripts %}
    {{ parent() }}
   
    
    <script>
    $(document).ready(function() {
        // Aggiorna anteprima quando viene selezionato un file dalla galleria
        $('.elfinder-input').on('change', function() {
            var path = $(this).val();
            if (path) {
                var previewContainer = $(this).closest('.card-body, .row').find('img.img-thumbnail');
                if (previewContainer.length) {
                    previewContainer.attr('src', path);
                }
            }
        });
        
        // Anteprima per upload diretto
        $('input[type="file"]').on('change', function() {
            var file = this.files[0];
            if (file) {
                var reader = new FileReader();
                var previewContainer = $(this).closest('.card-body, .row').find('img.img-thumbnail');
                reader.onload = function(e) {
                    if (previewContainer.length) {
                        previewContainer.attr('src', e.target.result);
                    }
                };
                reader.readAsDataURL(file);
            }
        });
    });
    </script>
{% endblock %}