{% set loc_title_bar=title_bar|default(0) %}
{% set loc_limite=limite|default(0) %}  
    <div id="info-{{ block_name }}" class="blocco-contenitore-info">  
{% if loc_title_bar == 1 %}
    <section class="tile transparent {{ minimzed_class_container|default('minimized') }} loading-solutions iteml-list-table">
        <div class="tile-header color transparent-black rounded-corners">
            <div class="controls-left c-name might-overflow">
                <i class="fas fa-plus-circle" style="color: green;"></i>
                <span class="data-table-title value"></span>

            </div>
            <div class="controls">
                <a href="#" class="minimize"><i class="fa fa-chevron-down fa-2x"></i></a>
                <a href="#" class="refresh"><i class="fa fa-refresh fa-2x"></i></a>
            </div>
        </div>
        <div class="tile-body color transparent-black rounded-corners">

{% endif %}


<div id="{{ block_name }}-b1" class="c-{{ block_name }} block-data-load-order col-md-12 col-sm-12 col-xl-12 col-lg-12 col-12">
    <div class="spinner"></div>
    <div class="data-load-order hidden-element">
        <div class="col-md-{% if showpc == 1 %}12{% else %}5{% endif %}">
            {% if loc_title_bar != 1 %}
                <div class="c-name">
                <span class="label"></span>
                <span class="value"></span>
            </div>
            {% endif %}
            <span class="c-image"><img /></span>  
            {% if showpc == 1 %}
                <div class="dim">
                    <span class="label">{{ 'Dim. Int: '|trans}}</span>
                    <span class="value"></span>
                </div>
            {% endif %}        
        </div>
        {% if showpc == 0 %}
            <div class="col-md-7">
                <div class="dim">
                    <span class="label">{{ 'Dim. Int: '|trans}}</span>
                    <span class="value"></span>
                </div>
                <div class="volume">
                    <span class="label">{{ 'Volume: '|trans}}</span>
                    <span class="value"></span>
                </div>
                <div class="surface">
                    <span class="label">{{ 'Superficie: '|trans}}</span>
                    <span class="value"></span>
                </div>
                <div class="portata">
                    <span class="label">{{ 'Portata: '|trans}}</span>
                    <span class="value"></span>
                </div>
            </div>
        {% endif %}
        <div style="clear: both;"></div>
    </div>
</div>   
<div style="clear: both;"></div>
{% if loc_title_bar == 1 %}
    </div>
    </section>

{% endif %}




{% if loc_title_bar == 1 %}
    <section class="tile transparent {{ minimzed_class_info|default('minimized') }} loading-solutions iteml-list-table">
        <div class="tile-header color transparent-black rounded-corners">
            <div class="controls-left c-name might-overflow">
                <span class="data-table-title">&nbsp;</span>
            </div>            
            <div class="controls">
                <a href="#" class="minimize"><i class="fa fa-chevron-down fa-2x"></i></a>
                <a href="#" class="refresh"><i class="fa fa-refresh fa-2x"></i></a>
            </div>
        </div>
        <div class="tile-body color transparent-black rounded-corners">

{% endif %}


<div id="{{ block_name }}-b2" class="c-{{ block_name }} block-data-load-order col-md-12 col-sm-12 col-xl-12 col-lg-12 col-12">
    <div class="data-load-order hidden-element">
        {% if showdata|default(0) == 1 %}
            <div class="clear-both"></div>
            <div class="blocco-datiaggiuntivi">
                {% if showLoadConstraints|default(false) == true %}
                    <div class="lcL">
                        <span class="label">{{ 'Load constraints L: '|trans}}</span>
                        <span class="value">{{ loadConstraintsL|default(0) }}</span>
                    </div>
                    <div class="lcW">
                        <span class="label">{{ 'Load constraints W: '|trans}}</span>
                        <span class="value">{{ loadConstraintsW|default(0) }}</span>
                    </div>
                    <div class="lcH">
                        <span class="label">{{ 'Load constraints H: '|trans}}</span>
                        <span class="value">{{ loadConstraintsH|default(0) }}</span>
                    </div>
                    <div class="lcP">
                        <span class="label">{{ 'Load constraints Weight: '|trans}}</span>
                        <span class="value">{{ loadConstraintsP|default(0) }}</span>
                    </div>
                {% endif %}
                <div class="nitems">
                    <span class="label">{{ 'N. Items: '|trans}}</span>
                    <span class="value"></span>
                </div>
                <div class="pesototitems">
                    <span class="label">{{ 'Items tot. Weight: '|trans}}</span>
                    <span class="value"></span>
                </div>                
                <div class="pesototfissaggi">
                    <span class="label">{{ 'Fixings: '|trans}}</span>
                    <span class="value"></span>
                </div>
                <div class="pesotottara">
                    <span class="label">{{ 'Tare: '|trans}}</span>
                    <span class="value"></span>
                </div>
                <div class="pesocassa">
                    <span class="label">{{ 'Tot. Weight: '|trans}}</span>
                    <span class="value"></span>
                </div>
                <div class="volumetotitems">
                    <span class="label">{{ 'Vol. Tot. Items: '|trans}}</span>
                    <span class="value"></span>
                </div>
                <div class="volumeitems">
                    <span class="label">{{ 'Vol. Items: '|trans}}</span>
                    <span class="value"></span>
                </div>
                <div class="volumeutilecassa">
                    <span class="label">{{ 'Vol. Utile: '|trans}}</span>
                    <span class="value"></span>
                </div>
                <div class="superficieutilecassa">
                    <span class="label">{{ 'Sup. Utile: '|trans}}</span>
                    <span class="value"></span>
                </div>
            </div>
        {% endif %}
        <div style="clear: both;"></div>
    </div>
</div>   
<div style="clear: both;"></div>
{% if loc_title_bar == 1 %}
    </div>
    </section>

{% endif %}

{% if showpcbar == 1 %}
    <section class="tile transparent loading-solutions iteml-list-table">
        <div class="tile-body color transparent-black rounded-corners">
    <div class="blocco-pc">
        <span class="blocco-label">{{ 'Items: '|trans}}</span>
        <div class="blocco-barre blocco-volume">
            <div class="blocco-label">{{ 'Tot. Volume'|trans }}</div>
            <div class="valore-completo"></div>
            <div class="blocco-percentuale">
                <div class="wraqpper verifica-volume valori-perc">
                    <div class="chart-container">
                        <div class="data-cell gauges">
                            <div class="linear-gauge">
                                <div class="barra" value="0">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="valore">0.0%</div>
        </div>
        <div class="blocco-barre blocco-peso">
            <div class="blocco-label">{{ 'Tot. Weight'|trans }}</div>
            <div class="valore-completo"></div>
            <div class="blocco-percentuale">
                <div class="wraqpper verifica-peso valori-perc">
                    <div class="chart-container">
                        <div class="data-cell gauges">
                            <div class="linear-gauge">
                                <div class="barra" value="0">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="valore">0.0%</div>
        </div>
        <div class="blocco-barre  blocco-superficie">
            <div class="blocco-label">{{ 'Tot. Surface'|trans }}</div>
            <div class="valore-completo"></div>
            <div class="blocco-percentuale">
                <div class="wraqpper verifica-superficie valori-perc">
                    <div class="chart-container">
                        <div class="data-cell gauges">
                            <div class="linear-gauge">
                                <div class="barra" value="0">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="valore">0.0%</div>
        </div>
    </div>
    </div>
    </section>
{% endif %}
<div style="clear: both;"></div>

</div>

<style>
    .c-{{ block_name }} .spinner:after {
        background-color: black;
    } 
    .c-{{ block_name }} .spinner {
        margin: auto;
    } 
</style>
<script>
    let _ContenitoreVol = 0.0, _ContenitorePortata = 0.0, _ContenitoreSuperficie = 0.0, _ContenitoreL = 0.0, _ContenitoreW = 0.0, _ContenitoreH = 0.0;
    {% if showpcbar == 1 %}
        function aggiornaDatiCarico(a_Area, a_Vol, a_Peso) {
            
        }
    {% endif %}
    function _updateContenitore(a_Dati) {
        let _IDImg = (typeof a_Dati.id !== 'undefined') ? parseInt(a_Dati.id) : 0;
        if (isNaN(_IDImg) || _IDImg <= 0 || a_Dati.id == '1_0' || a_Dati.id == '2_0') {
            _IDImg = a_Dati.id;
            if ($('input[type="radio"][name="cb-FC"]:checked').length > 0) {
                let _v = $('input[type="radio"][name="cb-FC"]:checked').val();
                _IDImg = _v + '_0';
            }
        }
        img = "{{ path('get_image', {'id':':::ID','tipo':':::TIPO'}) }}"
            .replace(':::ID', _IDImg)
            .replace(':::TIPO', 'b');
        $('.c-name .value').html(a_Dati.tipo_contenitore + ' ' + a_Dati.nome);     
        if (a_Dati.tot_dim.value_h !== '') {
            $('.c-{{ block_name }} .dim .value').html(a_Dati.tot_dim.value_h);
        }           
        else {
            $('.c-{{ block_name }} .dim .value').html('');
        }
        $('.c-{{ block_name }} .surface .value').html(a_Dati.tot_area.value_h);
        $('.c-{{ block_name }} .volume .value').html(a_Dati.tot_volume.value_h);
        $('.c-{{ block_name }} .portata .value').html(a_Dati.tot_weight.value_h);
        $('.c-{{ block_name }} .c-image').html('<div class="image-png"><img src="' + img + '"></div>');
    }
// HP_Base_DX_Load_Conf_LAND.png
    function updateContenitore(a_ID) {
        let upurl;
        let _ID = (typeof a_ID !== 'undefined') ? parseInt(a_ID) : 0;
        if (!isNaN(_ID) &&_ID > 0) {
            upurl = "{{ path('api_gettrasporto', {'tipocodice':tipocodice,'codice':b64codice,'box':':::BOX','uid':'box'}) }}".replace(':::BOX', _ID);
        
        }
        else {
            upurl = "{{ path('api_gettrasporto', {'tipocodice':tipocodice,'codice':b64codice,'box':idBox|default(box|default(0)),'uid':uid|default('__')}) }}";
        }
        $('.c-{{ block_name }} .data-load-order').addClass('hidden-element');
        $('.c-{{ block_name }} .spinner').removeClass('hidden-element');
        $('.watermarked').attr('data-content', "");
		$.ajax({
			'url': upurl,
			'type': "GET",
            'dataType': 'json',
			'data': {}
		})
		.done(function(json) {
        {% if loc_limite == 0 %}
            let conta = json.data.length;
        {% else %}
            let conta = 1;
        {% endif%}
            if (json.err === 0 && conta === 1) {
                let data = json.data[0];
                if (typeof data.tipo_contenitore === 'undefined' || data.tipo_contenitore === null) {
                    data.tipo_contenitore = '';
                }
                _ContenitoreL = data.container.int_l;
                _ContenitoreW = data.container.int_w;
                _ContenitoreH = data.container.int_h;
                _ContenitoreVol = data.container.int_l * data.container.int_w * data.container.int_h;
                _ContenitoreSuperficie = data.container.int_l * data.container.int_w;
                _ContenitorePortata = data.container.portata;
                _updateContenitore(data); 
			}
			if (json.err === 0 && conta > 1) {
                let data = json.dato;
                _ContenitoreL = 0.0;
                _ContenitoreW = 0.0;
                _ContenitoreH = 0.0;
                _ContenitoreVol = 0.0;
                _ContenitoreSuperficie = 0.0;
                _ContenitorePortata = 0.0;
                _updateContenitore(data); 

/*                $('.c-name .value').html('');
                $('.c-{{ block_name }} .dim .value').html('');
                $('.c-{{ block_name }} .surface .value').html(json.TotAreaF);
                $('.c-{{ block_name }} .volume .value').html(json.TotVolumeF);
                $('.c-{{ block_name }} .portata .value').html(json.TotWeightCapacityF);
                $('.c-{{ block_name }} .c-image').html("<div class=\"image-png\"><img src=\"{{ asset('static/configuratore/images/blocks/HP_Base_DX_Load_Conf_LAND.png') }}\"></div>");
*/
			}
		})
		.fail(function() {
			alert("{{ 'An error occured'|trans }}");
		})
		.always(function() {
            $('.c-{{ block_name }} .spinner').addClass('hidden-element');
            $('.c-{{ block_name }} .data-load-order').removeClass('hidden-element');
        });    
    }



    // or:
    //$( window ).on( "load", readyFn );    
</script>