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

{% block body_id 'gallery' %}

    {#
        the homepage is a special page which displays neither a header nor a footer.
        this is done with the 'trick' of defining empty Twig blocks without any content
    #}

    {% block stylesheets %}
        {{ parent() }}
        <link rel="stylesheet" href="{{ asset('static/c4rg0_themes/assets/js/vendor/videobackground/css/jquery.videobackground.css') }}">
        <link rel="stylesheet" href="{{ asset('static/c4rg0_themes/assets/css/vendor/bootstrap-checkbox.css') }}">
        <link rel="stylesheet" href="{{ asset('static/c4rg0_themes/assets/css/vendor/bootstrap/bootstrap-dropdown-multilevel.css') }}">
        <link rel="stylesheet" href="{{ asset('static/c4rg0_themes/assets/js/vendor/superbox/css/style.css') }}">
        <link rel="stylesheet" href="{{ asset('static/c4rg0_themes/assets/js/vendor/colorbox/css/colorbox.css') }}">
        <link rel="stylesheet" href="{{ asset('static/c4rg0_themes/assets/js/vendor/owl-carousel/css/owl.carousel.min.css') }}">
        <link rel="stylesheet" href="{{ asset('static/c4rg0_themes/assets/js/vendor/owl-carousel/css/owl.theme.default.css') }}"> 

        <link rel="stylesheet" href="{{ asset('static/c4rg0_themes/assets/js/vendor/datepicker/css/bootstrap-datetimepicker.css') }}">
        <link rel="stylesheet" href="{{ asset('static/css/mail_spinner.css?v=20200416') }}">          
    {% endblock %}
    {% block header %}
    {% endblock %}

    {% block modal %}
        {{ parent() }}
        <div class="md-modal md-effect-10 md-hotpink colorize-overlay" id="id-msg-red">
            <div class="md-content">
                <h3>ERROR</h3>   
                <div id="id-msg-err" class="tile-body nopadding rounded-corners">
                </div>
                <button class="md-close btn btn-default">{{ "OK"|trans }}</button>
            </div>
        </div>
        <div class="md-modal md-effect-10 md-blue colorize-overlay" id="id-msg-nota">
            <div class="md-content">
                <div class="row">
                    <!-- /col 6 -->
                    <section class="tile transparent mail-note">
                        <!-- tile widget -->
                        <div class="tile-widget color transparent-black rounded-top-corners">
                            <div class="form-horizontal mail-info" id="mail-header" role="form">
                                <div class="form-group">
                                    <label for="message-to" class="col-sm-2 control-label font-slab">Recipients</label>
                                    <div class="col-sm-10">
                                        <select data-placeholder="{{ 'Select recipients...'|trans }}" multiple="" tabindex="3" class="chosen-select form-control chosen-transparent" id="message-to">
                                            {% for address in addresslist %}
                                                <option value="{{ address.email }}">{{ address.nome }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group no-bottom-margin">
                                    <label for="subject" class="col-sm-2 control-label font-slab">Subject</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control transparent" id="subject" placeholder="Type subject here...">
                                    </div>
                                </div>
                            </div>
                            <!-- tile body -->
                            <div class="tile-body nopadding mail-info">
                                <div id="quick-email-content"></div>
                            </div>
							{% if false %}
                            <div class="form-horizontal" id="note-header" role="form">
                                <div class="form-group">
                                    <label for="message-to" class="col-sm-2 control-label font-slab">{{ 'Note'|trans }}</label>
                                    <div class="col-sm-10 hidden-element">
                                        <select data-placeholder="{{ 'Select notes...'|trans }}" multiple="" tabindex="3" class="chosen-select form-control chosen-transparent" id="message-note">
                                            {% for address in addresslist %}
                                                <option value="{{ address.email }}">{{ address.nome }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="tile-body nopadding nota-info">
                                <div id="quick-message-content"></div>
                            </div>
							{% endif %}
                            <!-- /tile body -->

                            <!-- tile footer -->
                            <div class="tile-footer rounded-bottom-corners text-right">
                                <a class="submit font-slab submit-cancell" href="javascript: chiudi_nota();">{{ 'Cancel'|trans }}<i class="fa fa-close"></i></a>
                                <a class="submit font-slab" href="javascript: conferma_nota();">{{ 'Confirm'|trans }}<i class="fa fa-check"></i></a>
                            </div>
                            <!-- /tile footer -->
                        </div>
                    </section>
                </div>
            </div>
        </div>
        <div class="md-modal md-effect-5 md-blue colorize-overlay" id="id-msg-dlg">
            <div class="md-content">
                <div class="row">
                    <!-- /col 6 -->
                    <section class="tile transparent mail-note">
                        <!-- tile widget -->
                        <div class="tile-widget color transparent-black rounded-top-corners">

                            <!-- /tile body -->
                            <div class="tile-body nopadding">
                                <div class="dlg-message" id="dlg-message"></div>
                            </div>
                            <!-- tile footer -->
                            <div class="tile-footer rounded-bottom-corners text-right">
                                <a class="submit font-slab submit-cancell" href="javascript: chiudi_msg();"><strong>{{ 'Cancel'|trans }}<i class="fa fa-close"></i></strong></a>
                                <a id="dlg-confirm" data-exec="" class="submit font-slab" href="javascript: conferma_msg();"><strong>{{ 'Confirm'|trans }}<i class="fa fa-check"></i></strong></a>
                            </div>
                        </div>
                        <!-- /tile footer -->
                    </section>
                </div>
            </div>
        </div>

        <div class="md-modal md-effect-5 md-blue colorize-overlay" id="id-waitmail-dlg">
            <div class="md-content">
                <div class="row">
                    <!-- /col 6 -->
                    <section class="tile transparent mail-note">
                        <!-- tile widget -->
                        <div class="tile-widget color transparent-black rounded-top-corners">

                            <!-- /tile body -->
                            <div class="tile-body nopadding" >
                                <div class="dlg-message" id="dlg-wait-messag">{{ 'Sending email'|trans }}</div>
                                <div id="loader-mail-wrapper">
                                    <div id="loader-mail" class="loader-mail"></div>
                                    <div class="loader-mail-section"></div>
                                </div>                              
                            </div>
                            <!-- tile footer -->
                            <!--   <div class="tile-footer rounded-bottom-corners text-right">
                                   <a class="submit font-slab submit-cancell" href="javascript: chiudi_msg();"><strong>{{ 'Cancel'|trans }}<i class="fa fa-close"></i></strong></a>
                               </div>  -->
                        </div>
                        <!-- /tile footer -->
                    </section>
                </div>
            </div>
        </div>

    {% endblock %}

    {% block body %}

        <div class="md-overlay"></div><!-- the overlay element -->        


        <!-- Page content -->
        <div id="content" class="col-md-12" style="margin-top: 40px">









            <!-- page header -->
            <div class="pageheader">



           <!--     <div class="breadcrumbs">
                    <ol class="breadcrumb">
                        <li></li>
                        <li><a href="index.html"></a></li>
                        <li class="active">Gallery</li>
                    </ol>
                </div>-->


            </div>
            <!-- /page header -->






            <!-- content main container -->
            <div class="main">        



                <!-- row -->
                <div class="row">




                    <!-- col 12 -->
                    <div class="col-md-12">



                        <!-- tile -->
                        <section class="tile transparent" id="superbox-gallery">


                            <!-- tile header -->
                            <div class="tile-header transparent">


                                <div class="controls">
                                    <a href="#" class="minimize"><i class="fa fa-chevron-down"></i></a>
                                    <a href="#" class="refresh"><i class="fa fa-refresh"></i></a>
                                    <a href="#" class="remove"><i class="fa fa-times"></i></a>
                                </div>
                            </div>
                            <!-- /tile header -->


                            <!-- tile widget -->
                    <div class="tile-widget color transparent-black rounded-top-corners" id="id-search-block">
                        <div class="block-menu-filter menu-start">
                            <div class="btn-group btn-w100">
                                <input type="text" class="form-control" id="id-search" style="width: 20vw;float: left;background-color: #d3d3d369;margin-right: 6px;"  value="{{ textsearch }}">                                
                                <button style="height: 38px;" onclick="javascript:search();" type="button" class="btn btn-blue margin-left-20"><i class="fa fa-search fa-2x"></i></button>
                            </div>
                        </div>
                        <div class="block-menu-filter menu-center">
                            <div class="btn-group btn-w100">
                                <input autocomplete="off" type="text" class="form-control" id="datepicker" style="width: 14vw; float: left; background-color: #d3d3d369; margin-right: 6px;" placeholder="{{ "Select date"|trans }}"/>
                                <label for="datepicker" class="control-label" style="float: left;"><i class="fa fa-calendar fa-2x"></i></label>
                            </div>
                        </div>
                        <div class="block-menu-filter menu-end">
                            <div class="btn-group">
                                <button type="button" id="type-D30" class="btn btn-custom filter-menu {% if data == 'D30' %}filter-selected{% endif %}" onclick="javascript:searchByDate('D30', true, true)">{{ 'Last 30 days'|trans }}</button>
                                <button type="button" id="type-D60" class="btn btn-custom filter-menu {% if data == 'D60' %}filter-selected{% endif %}" onclick="javascript:searchByDate('D60', true, true)">{{ 'Last 60 days'|trans }}</button>
                                <button type="button" id="type-D180" class="btn btn-custom filter-menu {% if data == 'D180' %}filter-selected{% endif %}" onclick="javascript:searchByDate('D180', true, true)">{{ 'Last 180 days'|trans }}</button>
                                <button type="button" id="type-CY" class="btn btn-custom filter-menu {% if data == 'CY' %}filter-selected{% endif %}" onclick="javascript:searchByDate('CY', true, true)">{{ 'Current year'|trans }}</button>
                                <button type="button" id="type-LY" class="btn btn-custom filter-menu {% if data == 'LY' %}filter-selected{% endif %}" onclick="javascript:searchByDate('LY', true, true)">{{ 'Last year'|trans }}</button>
                            </div>

                        </div>
                    </div>
                            <!-- /tile widget -->
                            <!-- tile body -->
                            <div class="tile-header color transparent-black rounded-bottom-corners text-center">


                                <ul class="pagination pagination-sm pagination-custom text-center">

                                    <li class="{% if (cur <= 1) %}disabled{% endif %}"><a href="{{ path('gallery_page_pag', {'data': data,'p':1,'n':perpage}) }}"><i class="fa fa-angle-double-left"></i><i class="fa fa-angle-double-left"></i></a></li>
                                    <li class="{% if (cur <= 1) %}disabled{% endif %}"><a href="{{ path('gallery_page_pag', {'data': data,'p':prev,'n':perpage}) }}"><i class="fa fa-angle-double-left"></i></a></li>
                                            {% if (startp > 1) %} 
                                        <li><a href="javascript:void(0);">...</a></li>
                                        {% endif %}
                                        {% for i in range(startp, endp) %}
                                        <li class="{% if (cur == i) %}active{% endif %}"><a href="{{ path('gallery_page_pag', {'data': data,'p':i,'n':perpage}) }}">{{ i }}</a></li>    
                                        {% endfor %}
                                        {% if (endp < maxpage) %} 
                                        <li><a href="javascript:void(0);">...</a></li>
                                        {% endif %}
                                    <li class="{% if (cur >= maxpage) %}disabled{% endif %}"><a href="{{ path('gallery_page_pag', {'data': data,'p':next,'n':perpage}) }}"><i class="fa fa-angle-double-right"></i></a></li>
                                    <li class="{% if (cur >= maxpage) %}disabled{% endif %}"><a href="{{ path('gallery_page_pag', {'data': data,'p':maxpage,'n':perpage}) }}"><i class="fa fa-angle-double-right"></i><i class="fa fa-angle-double-right"></i></a></li>
                                </ul>



                            </div>                      




                            <div class="tile-body color transparent-black superbox">



                                {% for awb in awblist %}
                                    <div class="superbox-list img-view">

										{% if awb.inoracle > 0 or awb.inattesaoracle > 0 %}
										<div style="z-index: 1000000;
										  position: absolute;
										  bottom: 0;
										  background: rgb(0, 0, 0);
										  background: rgba(0, 0, 0, 0.5);
										  color: #f1f1f1;
										  width: 100%;
										  transition: .5s ease;
										  opacity:1;
										  color: white;
										  font-size: 20px;
										  padding: 20px;
										  text-align: center;
										  height: 73px;
										  text-align: right;" wfd-id="277">
										  <img src="{% if awb.inoracle > 0 %}{{ asset('/static/images/loghi_aziende/Oracle_Corporation_logo.svg') }}{% else %}{{ asset('/static/images/retry-Oracle_TR_azzurro.png') }}{% endif %}" style="width: 62px; float: right;">
										</div>
										{% endif %}


                                        <img src="{{ awb.img_thumb.contenuto }}" 
                                             data-img="{% for imgv in awb.img_list %}{{ path('app_getimage', {'i':imgv.sid, 'n':imgv.nomefile}) }};{% endfor %}" 
                                             data-caption="{% for imgv in awb.img_list %}{{ imgv.caption }};{% endfor %}" 
                                             data-text="{% for imgv in awb.img_list %}{{ imgv.text }} ({% for stato in imgv.stati %}{{ stato|generateStatusMessage|striptags }} {% endfor %});{% endfor %}" 
                                             class="superbox-img" alt>
                                        <div class="overlay">
                                            <div class="media-info">

                                                <div class="checkbox">
                                                    <input type="checkbox" value="1" id="selectimg{{ awb.id }}" class="toggle">
                                                    <label for="selectimg{{ awb.id }}"></label>
                                                </div>
                                                <h2>{{ awb.AWB }}</h2>
                                                <span style="color: #66ccff;">{{ awb.Date|localizeddate('medium', 'short') }}</span>


                                                <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown"><i class="fa fa-caret-down"></i></button>
                                                <ul class="dropdown-menu" role="menu">

                                                    {% if awb.ShowDetail %}
                                                    <li><a href="{{ path('detail_page', {'aid':awb.aid, 'id': awb.AWB, 'prev': 0, 'next': 0}) }}"><i class="fa fa-share"></i>{{ 'Dettail'|trans }}</a></li>
                                                    {% else %}
                                                    <li><a href="{{ path('check_detail_page', {'aid':awb.aid, 'id': 0, 'prev': 0, 'next': 0, 'pid':awb.sid}) }}"><i class="fa fa-share"></i>{{ 'Dettail'|trans }}</a></li>
                                                    {%  endif %}
                                                    <li><a href="javascript:downloadExport(1, {{ awb.id}}, '{{ awb.AWB }}')"><i class="fa fa-file-pdf-o fa-2x"></i>&nbsp;{{ 'PDF'|trans }}</a></li>                                                    
                                                    <li><a href="javascript: email(2, {{ awb.id}}, '{{ awb.AWB }}');"><i class="fa fa-envelope-o fa-1x"></i>&nbsp;{{ 'E-M@IL'|trans }}</a></li>


                                                    <!--<li><a href="#"><i class="fa fa-envelope-o"></i> Email</a></li>
                                                    <li><a href="#"><i class="fa fa-download"></i> Download</a></li> -->
                                                </ul>

                                            </div>
                                            <p>{% for stato in awb.stati %}{{ stato|generateStatusMessage|raw }} {% endfor %}</p>
                                            <p>{{ awb.Vettore }}</p>
                                        </div>
                                    </div>
                                {% endfor %}                           



                                <!-- tile widget -->

                                <!-- /tile widget -->



                            </div>
                            <!-- /tile body -->


                            <div class="tile-footer color transparent-black rounded-bottom-corners text-center">


                                <ul class="pagination pagination-sm pagination-custom text-center">

                                    <li class="{% if (cur <= 1) %}disabled{% endif %}"><a href="{{ path('gallery_page_pag', {'data':data,'p':1,'n':perpage}) }}"><i class="fa fa-angle-double-left"></i><i class="fa fa-angle-double-left"></i></a></li>
                                    <li class="{% if (cur <= 1) %}disabled{% endif %}"><a href="{{ path('gallery_page_pag', {'data':data,'p':prev,'n':perpage}) }}"><i class="fa fa-angle-double-left"></i></a></li>
                                            {% if (startp > 1) %} 
                                        <li><a href="#">...</a></li>
                                        {% endif %}
                                        {% for i in range(startp, endp) %}
                                        <li class="{% if (cur == i) %}active{% endif %}"><a href="{{ path('gallery_page_pag', {'data':data,'p':i,'n':perpage}) }}">{{ i }}</a></li>    
                                        {% endfor %}
                                        {% if (endp < maxpage) %} 
                                        <li><a href="#">...</a></li>
                                        {% endif %}
                                    <li class="{% if (cur >= maxpage) %}disabled{% endif %}"><a href="{{ path('gallery_page_pag',{'data':data,'p':next,'n':perpage}) }}"><i class="fa fa-angle-double-right"></i></a></li>
                                    <li class="{% if (cur >= maxpage) %}disabled{% endif %}"><a href="{{ path('gallery_page_pag',{'data':data,'p':maxpage,'n':perpage}) }}"><i class="fa fa-angle-double-right"></i><i class="fa fa-angle-double-right"></i></a></li>
                                </ul>



                            </div>




                        </section>
                        <!-- /tile -->

                    </div>
                    <!-- /col 12 -->



                </div>
                <!-- /row -->




            </div>  
            <!-- /content container -->






        </div>
        <!-- Page content end -->



    {% endblock %}
    {% block javascripts %}
        {{ parent() }}
        <script type="text/javascript" src="{{ asset('static/c4rg0_themes/assets/js/vendor/sparkline/jquery.sparkline.min.js') }}"></script>
        <script type="text/javascript" src="{{ asset('static/c4rg0_themes/assets/js/vendor/nicescroll/jquery.nicescroll.min.js') }}"></script>
        <script type="text/javascript" src="{{ asset('static/c4rg0_themes/assets/js/vendor/animate-numbers/jquery.animateNumbers.js') }}"></script>
        <script type="text/javascript" src="{{ asset('static/c4rg0_themes/assets/js/vendor/videobackground/jquery.videobackground.js') }}"></script>
        <script type="text/javascript" src="{{ asset('static/c4rg0_themes/assets/js/vendor/blockui/jquery.blockUI.js') }}"></script>
        <script type="text/javascript" src="{{ asset('static/c4rg0_themes/assets/js/vendor/superbox/superbox.js') }}"></script>
        <script type="text/javascript" src="{{ asset('static/c4rg0_themes/assets/js/vendor/colorbox/jquery.colorbox-min.js') }}"></script>

        <script type="text/javascript" src="{{ asset('static/c4rg0_themes/assets/js/vendor/skycons/skycons.js') }}"></script>
        <script type="text/javascript" src="{{ asset('static/c4rg0_themes/assets/js/vendor/owl-carousel/owl.carousel.min.js') }}"></script>  

        <script type="text/javascript" src="{{ asset('static/js/base64.js') }}"></script>
        <script type="text/javascript" src="{{ asset('static/c4rg0_themes/assets/js/vendor/momentjs/moment-with-langs.min.js') }}"></script>

        <script type="text/javascript" src="{{ asset('static/c4rg0_themes/assets/js/vendor/datepicker/bootstrap-datetimepicker.min.js') }}"></script>
        <script type="text/javascript" src="{{ asset('static/js/jquery-dateformat.min.js') }}"></script>
        

        <script>

            var currentId = 0;
            var pageId = "";
            var subject = ""; 
            var note = "";
            var corpo = "";
            var noteid = "";
            var emailid = "";
            var op = 0; // 0: no operation, 1: save nota, 2: send mail;
            var girIDX = 0;
       /*     function searchByDate(date) {
                $('.filter-menu').removeClass('filter-selected');
                $('.filter-menu.type-' + date).addClass('filter-selected');                
                document.location.href = "{{ path('gallery_page', {'data':'::value'}) }}".replace('::value', date);
            }*/
            function searchByDate(date, cleardate, clearsearch) {
                $('.block-menu-filter.menu-end .filter-menu').removeClass('filter-selected');
                if (cleardate) {
                    $("#datepicker").val('');
                }
                if (clearsearch) {
                    $('#id-search').val('');
                }
                if (!date.startsWith('R')) {
                    $('.filter-menu#type-' + date).addClass('filter-selected'); 
                    $('#id-search').val('');
                }
                else {
                }
                document.location.href = "{{ path('gallery_page', {'data':'::value'}) }}".replace('::value', date);
            }            
            function search() {
                var searchval = 'R' + Base64.encode($('#id-search').val()); 
                 searchByDate(searchval, true, false);
            }
            function downloadExport(t, sid, id) {
                var url = '';
                switch (t) {
                    case 1:
                        url = "{{ path('app_genpdf', {'sid': 'sidvalue','id': 'idvalue'}) }}";
                        break;
                    case 2:
                        url = "{{ path('app_genxml', {'sid': 'sidvalue','id': 'idvalue'}) }}"
                        break;
                    case 3:
                        url = "{{ path('app_gencsv', {'sid':'sidvalue','id': 'idvalue'}) }}"
                        break;
                    case 4:
                        url = "{{ path('app_genexcel', {'sid':'sidvalue','id': 'idvalue'}) }}"
                        break;
                }
                url = url.replace('sidvalue', sid).replace('idvalue', id);
                document.location.href = url;
                //var url = 
            }
            function email(val, sid, id) {
                currentId = sid;
                pageId = id;
                var modalMsgNota = document.querySelector('#id-msg-nota');
                $(".mail-info").show();
                if (subject !== "") {
                    $('#subject').html(Base64.decode(subject));
                } else {
                    $('#subject').html("");
                }
               /* if (note !== "") {
                    $('.nota-info .note-editable').html(Base64.decode(note));
                } else {
                    $('.nota-info .note-editable').html("");
                }*/
                classie.add(modalMsgNota, 'md-show');
                op = val;
            }
            function chiudi_msg() {
                var modalMsgNota = document.querySelector('#id-msg-dlg');
                classie.remove(modalMsgNota, 'md-show');
            }
            function conferma_msg() {
                var modalMsgNota = document.querySelector('#id-msg-dlg');
                var func = $("#dlg-confirm").data('exec');
                classie.remove(modalMsgNota, 'md-show');
                eval(func);
            }
            
            function chiudi_nota() {
                var modalMsgNota = document.querySelector('#id-msg-nota');
                currentId = 0;
                pageId = "";
                classie.remove(modalMsgNota, 'md-show');
            }
            function conferma_nota() {
                var locCurrentId = currentId;
                var locPageId = pageId;
                currentId = 0;
                pageId = "";
                var modalMsgNota = document.querySelector('#id-msg-nota');
                var finemail = document.querySelector('#id-msg-dlg');                
                var attendere = document.querySelector('#id-waitmail-dlg');
                var _url = "{{ path('app_genemail') }}";
                var address = (op == 1) ? new Array() : $('#message-to').val();
                var body = Base64.encode($('.mail-info .note-editable').html());
                //note = Base64.encode($('.nota-info .note-editable').html());
                $('#dlg-confirm').hide();
                subject = Base64.encode($('#subject').val());
                if (op > 1 && (address == null || address.length == 0)) {
                    alert("{{ 'Recipients are mandatory'|trans }}")
                } else {
                    classie.remove(modalMsgNota, 'md-show');                    
                    classie.add(attendere, 'md-show');
                    $.ajax({
                        type: "POST",
                        url: _url,
                        data: {"id": locPageId, "sid": locCurrentId, "type": op, "noteid": noteid, "recipients": address, "subject": subject, "body": body, "nota": note}
                    })
                            .done(function (v) {
                                var o = JSON.parse(v);
                                classie.remove(attendere, 'md-show'); 
                                classie.add(finemail, 'md-show');                                
                                $("#dlg-message").html(o.msg);
                            })
                            .fail(function (err) {
                                classie.remove(attendere, 'md-show');                        
                                classie.add(finemail, 'md-show');
                                $("#dlg-message").html("{{ 'There was an error!'|trans }}");                            })
                            .always(function () {
                                classie.remove(attendere, 'md-show');                        
                            });
                }
            }
            
            $(function () {
            
				var today = new Date();
				var dd = today.getDate();

				var mm = today.getMonth()+1; 
				var yyyy = today.getFullYear();
				if(dd<10) 
				{
					dd='0'+dd;
				} 

				if(mm<10) 
				{
					mm='0'+mm;
				} 

				today = mm+'/'+dd+'/'+yyyy;			
            //initialize datepicker
                $('#datepicker').datetimepicker({
                    format: "DD/MM/YYYY",
					defaultDate: today,
                    icons: {
                    time: "fa fa-clock-o",
                    date: "fa fa-calendar",
                    up: "fa fa-arrow-up",
                    down: "fa fa-arrow-down"
                  }
                });

                $("#datepicker").on("dp.show",function (e) {
                  var newtop = $('.bootstrap-datetimepicker-widget').position().top - 45;      
                  $('.bootstrap-datetimepicker-widget').css('top', newtop + 'px');
                });
                
                $("#datepicker").on("dp.change", function (e) {
                    var mese = (e.date.month() + 1);
                    var datasel = e.date.year().toString() + '-' + mese.toString().padStart(2,'0') + '-' + e.date.date().toString().padStart(2,'0');
                //    searchByDate(datasel, false, true);
                    location.href="{{ path('gallery_page', {'data':'DATASELEZIONATA'}) }}".replace('DATASELEZIONATA', datasel);
                   // alert();
                });                


                $('#quick-message-content').summernote({
                    toolbar: [
                        //['style', ['style']], // no style button
                        ['style', ['bold', 'italic', 'underline', 'clear']],
                        ['fontsize', ['fontsize']],
                        ['color', ['color']],
                        ['para', ['ul', 'ol', 'paragraph']],
                        ['height', ['height']],
                                //['insert', ['picture', 'link']], // no insert buttons
                                //['table', ['table']], // no table button
                                //['help', ['help']] //no help button
                    ],
                    height: 295   //set editable area's height
                });
                $('#quick-email-content').summernote({
                    toolbar: [
                        //['style', ['style']], // no style button
                        ['style', ['bold', 'italic', 'underline', 'clear']],
                        ['fontsize', ['fontsize']],
                        ['color', ['color']],
                        ['para', ['ul', 'ol', 'paragraph']],
                        ['height', ['height']],
                                //['insert', ['picture', 'link']], // no insert buttons
                                //['table', ['table']], // no table button
                                //['help', ['help']] //no help button
                    ],
                    height: 295   //set editable area's height
                });
                $(".chosen-select").chosen({disable_search_threshold: 10});

                //initialize superbox

                $('.superbox').SuperBox();

                //superbox image selecting

                var checkSuperboxSelected = function () {
                    $('#superbox-gallery .img-view .checkbox :checkbox').each(function () {
                        var el = $(this);

                        if (!el.is(':checked')) {
                            enableToolsSuperbox(false);
                        } else {
                            el.parents('.img-view').addClass('selected');
                            enableToolsSuperbox(true);
                        }

                    });
                };

                $('#superbox-gallery .img-view .checkbox').click(function () {
                    var el = $(this);
                    if (!el.find(':checkbox').is(':checked')) {
                        el.parents('.img-view').removeClass('selected');
                        enableToolsSuperbox(false);
                    } else {
                        el.parents('.img-view').addClass('selected');
                        enableToolsSuperbox(true);
                    }
                });

                $('#superbox-gallery #selectall').click(function () {
                    if ($(this).prop('checked')) {
                        $(this).parents('.tile').each(function () {
                            $(this).find('.img-view .checkbox :checkbox').prop('checked', true);
                            $(this).find('.img-view').addClass('selected');
                        });
                        enableToolsSuperbox(true);
                    } else {
                        $(this).parents('.tile').each(function () {
                            $(this).find('.img-view .checkbox :checkbox').prop('checked', false);
                            $(this).find('.img-view').removeClass('selected');
                        });
                        enableToolsSuperbox(false);
                    }
                });

                var enableToolsSuperbox = function (enable) {

                    if (enable) {

                        $('#superbox-gallery .gallery-tool').removeClass('disabled');

                    } else {

                        var selected = false;

                        $('#superbox-gallery .superbox .img-view').each(function () {
                            if ($(this).hasClass('selected')) {
                                selected = true;
                            }
                        });

                        if (!selected) {
                            $('#superbox-gallery .gallery-tool').addClass('disabled');
                        }
                    }
                }

                checkSuperboxSelected();


                /* initialize colorbox */

                $('.colorbox .colorbox-list .overlay').colorbox({
                    photo: true,
                    opacity: .9,
                    rel: 'group1',
                    scalePhotos: true,
                    scrolling: false,
                    maxWidth: '100%',
                    maxHeight: '100%',
                    transition: 'elastic',
                    href: function () {
                        var url = $(this).prev().data('img');
                        return url;
                    },
                });

                //colorbox image selecting

                var checkColorboxSelected = function () {
                    $('#colorbox-gallery .img-view .checkbox :checkbox').each(function () {
                        var el = $(this);

                        if (!el.is(':checked')) {
                            enableToolsColorbox(false);
                        } else {
                            el.parents('.img-view').addClass('selected');
                            enableToolsColorbox(true);
                        }

                    });
                };

                $('#colorbox-gallery .img-view .checkbox').click(function () {
                    var el = $(this);
                    if (!el.find(':checkbox').is(':checked')) {
                        el.parents('.img-view').removeClass('selected');
                        enableToolsColorbox(false);
                    } else {
                        el.parents('.img-view').addClass('selected');
                        enableToolsColorbox(true);
                    }
                });

                $('#colorbox-gallery #selectall2').click(function () {
                    if ($(this).prop('checked')) {
                        $(this).parents('.tile').each(function () {
                            $(this).find('.img-view .checkbox :checkbox').prop('checked', true);
                            $(this).find('.img-view').addClass('selected');
                        });
                        enableToolsColorbox(true);
                    } else {
                        $(this).parents('.tile').each(function () {
                            $(this).find('.img-view .checkbox :checkbox').prop('checked', false);
                            $(this).find('.img-view').removeClass('selected');
                        });
                        enableToolsColorbox(false);
                    }
                });

                var enableToolsColorbox = function (enable) {

                    if (enable) {

                        $('#colorbox-gallery .gallery-tool').removeClass('disabled');

                    } else {

                        var selected = false;

                        $('#colorbox-gallery .colorbox .img-view').each(function () {
                            if ($(this).hasClass('selected')) {
                                selected = true;
                            }
                        });

                        if (!selected) {
                            $('#colorbox-gallery .gallery-tool').addClass('disabled');
                        }
                    }
                }

                checkColorboxSelected();

                $('.img-view .media-info .btn.dropdown-toggle').on('click', function (e) {
                    $(this).next().toggle();
                    e.stopPropagation();
                });

                $('.img-view .media-info .dropdown-menu').on('click', function (e) {
                    e.stopPropagation();
                    $(this).toggle();
                });

                $('.img-view .media-info .checkbox').on('click', function (e) {
                    e.stopPropagation();
                });


            })

            $(window).load(function () {

                //owl carousel
                $("#weather-carousel").owlCarousel({
                    singleItem: true,
                    autoPlay: 15000,
                    navigation: true,
                    slideSpeed: 400,
                    paginationSpeed: 500,
                    navigationText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>']
                });

                var theWindow = $(window),
                        $bg = $("#weather-carousel .slide .cover img"),
                        aspectRatio = $bg.width() / $bg.height();

                function resizeBg() {

                    if ((theWindow.width() / theWindow.height()) < aspectRatio) {
                        $bg
                                .removeClass()
                                .addClass('bgheight animation-pulseSlow');
                    } else {
                        $bg
                                .removeClass()
                                .addClass('bgwidth animation-pulseSlow');
                    }

                    console.log($bg.width());

                }

                theWindow.resize(resizeBg).trigger("resize");


                //weather icons
                var icons = new Skycons({"color": "white"});

                icons.set("icon01", Skycons.CLEAR_DAY);
                icons.set("icon02", Skycons.PARTLY_CLOUDY_DAY);
                icons.set("icon03", Skycons.CLOUDY);
                icons.set("icon04", Skycons.RAIN);
                icons.set("icon05", Skycons.CLOUDY);
                icons.set("icon06", Skycons.CLEAR_DAY);
                icons.set("icon07", Skycons.CLEAR_DAY);

                icons.set("icon08", Skycons.SNOW);
                icons.set("icon09", Skycons.SNOW);
                icons.set("icon10", Skycons.CLOUDY);
                icons.set("icon11", Skycons.RAIN);
                icons.set("icon12", Skycons.SNOW);
                icons.set("icon13", Skycons.SNOW);
                icons.set("icon14", Skycons.SNOW);

                icons.set("icon15", Skycons.RAIN);
                icons.set("icon16", Skycons.PARTLY_CLOUDY_DAY);
                icons.set("icon17", Skycons.CLOUDY);
                icons.set("icon18", Skycons.RAIN);
                icons.set("icon19", Skycons.CLOUDY);
                icons.set("icon20", Skycons.PARTLY_CLOUDY_DAY);
                icons.set("icon21", Skycons.RAIN);

                icons.set("icon22", Skycons.CLEAR_DAY);
                icons.set("icon23", Skycons.PARTLY_CLOUDY_DAY);
                icons.set("icon24", Skycons.CLEAR_DAY);
                icons.set("icon25", Skycons.RAIN);
                icons.set("icon26", Skycons.CLEAR_DAY);
                icons.set("icon27", Skycons.CLOUDY);
                icons.set("icon28", Skycons.CLEAR_DAY);

                icons.set("icon29", Skycons.CLEAR_DAY);
                icons.set("icon30", Skycons.CLEAR_DAY);
                icons.set("icon31", Skycons.CLEAR_DAY);
                icons.set("icon32", Skycons.CLEAR_DAY);
                icons.set("icon33", Skycons.CLEAR_DAY);
                icons.set("icon34", Skycons.CLEAR_DAY);
                icons.set("icon35", Skycons.PARTLY_CLOUDY_DAY);

                icons.play();

            });

        </script>
    {% endblock %}

    {% block footer %}
    {% endblock %}