{% extends "gbase.html" %}
{% load static %}

<!-- Aggiunto adesso e vediamo se lo prende -->
{% block css %}
{{ block.super }}

    <link href="{% static '/DataTables/dataTables.bootstrap5.min.css' %}" rel="stylesheet">
    <link href="{% static '/datepicker/css/datepicker.css' %}" rel="stylesheet">
    <!--
    <link href="{% static '/smartwizard/css/smart_wizard_all.min.css' %}" rel="stylesheet">
    -->
    <link href="https://unpkg.com/smartwizard@5/dist/css/smart_wizard_all.min.css" rel="stylesheet" type="text/css" />

{% endblock css %}

  

  <!-- =============================================== -->

  

    <!-- Main content -->


{% block right_col %}
            <!-- page content -->
        <div class="right_col" role="main">
            <div class="page-title">
              <div class="title_left">
                <h3>Form Wizards</h3>
              </div>

              <div class="title_right">
                <div class="col-md-5 col-sm-5  form-group row pull-right top_search">
                  <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search for...">
                    <span class="input-group-btn">
                              <button class="btn btn-secondary" type="button">Go!</button>
                          </span>
                  </div>
                </div>
              </div>
            </div>
            <div class="clearfix"></div>


                  <div class="x_title">
                    <h2>Form Wizards <small>Sessions</small></h2>
                    <ul class="nav navbar-right panel_toolbox">
                      <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                      </li>
                      <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                        <ul class="nav dropdown-menu" role="menu">
                          <li><a href="#">Settings 1</a>
                          </li>
                          <li><a href="#">Settings 2</a>
                          </li>
                        </ul>
                      </li>
                      <li><a class="close-link"><i class="fa fa-close"></i></a>
                      </li>
                    </ul>
                    <div class="clearfix"></div>
                  </div>


                    <!-- Smart Wizard -->
                    <p>This is a basic form wizard example that inherits the colors from the selected scheme.</p>
                    
                    <div id="smartwizard" class="flex">
                        <ul class="nav wizard_steps">
                        <li>
                            <a href="#step-1" class="nav-link">
                                                <span class="step_descr">
                                                                Step 1<br />
                                                                <small>Finalita' della richiesta</small>
                                                            </span>
                                            </a>
                        </li>
                        <li>
                            <a href="#step-2" class="nav-link">
                            <span class="step_descr">
                                              Step 2<br />
                                              <small>Convenzioni Consip/MEPA</small>
                                          </span>
                          </a>
                        </li>
                        <li>
                            <a class="nav-link" href="#step-3">
                            <span class="step_descr">
                                Step 3<br />
                                <small>Descrizione beni/servizi</small>
                                </span>
                            </a>
                        </li>
                        <li>
                            <a class="nav-link" href="#step-4">
                            <span class="step_descr">
                                Step 4<br />
                                <small>Obiettivi Funzione</small>
                                </span>
                                
                            </a>
                        </li>
                        <li>
                            <a class="nav-link" href="#step-5">
                            <span class="step_descr">
                                Step 5<br />
                                <small>Riepilogo Acquisto</small>
                                </span>
                                
                            </a>
                        </li>
                        <li>
                            <a class="nav-link" href="#step-6">
                                <span class="step_descr">
                                Step 6<br />
                                <small>Sottometti acquisto</small>
                                </span>                            </a>
                        </li>
                        </ul>
 
                        <div class="tab-content">

                                    <div id="step-1" class="tab-pane " role="tabpanel">
                            
                                        <b> <h2 id="app" >Step 1 - Dati Richiedente e finalita' della richiesta [[ message ]]</h2> </b>
                                                
                                            <div class="row">
                                                <div class="col-lg-8">
                                                    <div class="form-group">
                                                                    <button style="z-index:100" id="pollastro" type="button" data-toggle="popover" title="Info" data-html="true" data-content="Inserire parole chiave per agevolare la tracciabilità e la ricerca della richiesta di acquisto" data-original-title="Info"><span class="fa fa-1x fa-info-circle" aria-hidden="true"></span></button>
                                                        <label>Specificare un titolo breve per questo acquisto in modo da poter essere facilmente ricercato</label>
                                                        <input id="descrizione" name="descrizione" type="text" class="form-control required">
                                                    </div>
                                                    <div class="form-group ">
                                                        <label>Pino Torinese, il 30-05-2020 <br> 
                                                        Il sottoscritto {{ user.last_name }} {{ user.first_name }}  per lo svolgimento dei compiti istituzionali legati a: </label>
                                                    </div>
                                                    
                                                <div class="input-group m-b">
                                                    <div class="form-check">
                                                    
                                                        <input class="form-check-input" type="radio" name="settore" required>
                                                        <label class="form-check-label" for="pippo">
                                                            Ricerca,Trasferimento Tecnologico  </label>
                            
                                                    </div>
                                                </div>
                                                <div class="input-group m-b">
                                                    <div class="form-check ">
                                                        
                                                        <input class="form-check-input" type="radio" name="settore"  required>
                                                        <label class="form-check-label" for="pippo">
                                                            Didattica </label>
                                                    </div>
                                                </div> 
                                                <div class="input-group m-b">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="radio" name="settore"   required>
                                                        <label class="form-check-label" for="pippo">
                                                            Funzionamento Struttura </label>
                                                    </div>
                                                </div>                  
                                                <div class="form-group">
                                                        <label>Dettagliare la motivazione e finalita' dell'acquisto</label>
                                                        <input id="motivazione" name="motivazione" type="text" class="form-control" required>
                                                    </div>
                                                </div>
                                                <div class="col-lg-4">
                                                    <div class="text-center">
                                                        <div style="margin-top: 20px">
                                                        
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>


                                        </div>
                                    <div id="step-2" class="tab-pane " role="tabpanel">
                            
                                            <h2 class="StepTitle">Step 2 - Programmabilità della spesa e convenzioni Consip/MEPA</h2>
                                            <b>dichiara che si tratta di </b><br><br>
                                                    <div class="row">

                                                        <div class="form-check">
                                                            <input class="form-check-input" type="radio" name="tipoacquisto" id="tipoacquisto1" required="required" value="informatici" class="form-control ">
            
                                                            <span class="checkmark "></span>
                                                            <label class="form-check-label" for="tipoacquisto1">
                                                            <b>Beni/servizi informatici</b> <br> obbligo di ricorso a strumenti di 
                                                            approvvigionamento telematico quali ad esempio convenzioni CONSIP/MEPA
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="row">

                                                            <div class="form-check">
                                                            <input class="form-check-input" type="radio" name="tipoacquisto" value="largoconsumo" required="required" id="tipoacquisto2" class="form-control ">
                                                            <label class="form-check-label" for="tipoacquisto2">
                                                            <b>Beni/servizi di largo consumo.</b> <br>Trattasi di acquisto programmabile 
                                                            di largo consumo e/o di uso ricorrente acquisibile attraverso le gare effettuate 
                                                            da parte dell'Amm.ne,
                                                            se attive. In mancanza, si chiede di provvedere in autonomia per garantire la funzionalità della 
                                                            Struttura e delle attività istituzionali.
                                                            </label>
                                                            </div>
                                                    </div>
                                                    <div class="row">

                                                        <div class="form-check">
                                                            <input class="form-check-input" type="radio" name="tipoacquisto" value="altro" id="tipoacquisto3" required="required"  class="form-control ">
            
                                                            <span class="checkmark "></span>
                                                            <label class="form-check-label" for="tipoacquisto3">
                                                            <b>Altro</b>
                                                            </label>
                                                        </div>
                                                    </div>
                                                        
                                                    <div id="informaticiPlus" class="row  invisible ms-3"  >

                                                        <b>e quindi dichiara che</b> <br>
                                                                    <div class="row form-check ms-3">
                                                                        <label for="convenzione" class="container ">
                                                                    Esiste convenzione attiva per il bene/servizio che si desidera acquistare ( ove possibile indicare convenzione e lotto )
                                                                    <a class="" href="https://www.acquistinretepa.it/opencms/opencms/vetrina_iniziative.html?filter=CO" target="_blank" >	VEDI ELENCO CONVENZIONI CONSIP</a>

                                                                        <input type="radio" name="convenzione"  required="required"  class="form-check-input" value="esisteconvenzioneattiva" />
                                                                        <span class="checkmark"></span>
                                                                        </label>
                                                                        <div id="nomeconvenzione" class="  d-none " >
                                                                        <div class="row">
                                                                        <div class="col-8">
                                                                        <div class="input-group mb-3 ">
                                                                            <input type="text" name="nomeconvezione" class="form-control" placeholder="Indicare convenzione e lotto" aria-label="Example text with button addon" aria-describedby="button-addon1">
                                                                            <button class="btn btn-outline-secondary" type="button" id="button-addon1"><span class="fa fa-1x fa-info-circle" aria-hidden="true"></span></button>
                                                                        </div>
                                                                        </div>
                                                                        </div>

                                                                            <!-- 
                                                                            <input type="text" name="nomeconvezione" placeholder="Indicare convenzione e lotto" class="form-control" required> 
                                                                            <p style="margin-left:200px" > 
                                                                            <button  id="pollastro" type="button"  title="Info"  data-content="QUALORA IL LINK ALLA PAGINA NON DOVESSE FUNZIONARE, OCCORRE FRE UN REFERSH.SI CONSIGLI ADI VISUALIZZARE L'ELENCO DELLE CNVENZIONI UTILIZZANDO VISTA GRIGLIA." data-original-title="Info"><span class="fa fa-1x fa-info-circle" aria-hidden="true"></span></button>
                                                                            -->
                                                                        </div>
                                                                    </div>
                                                                        
                                                                    
                                                                    <div class="row form-check ms-3">
                                                                    <label class="container ">
                                                                Non esiste convenzione attiva per il bene/servizio che si desidera acquistare 
                                                                    <input type="radio" name="convenzione" value="nonesisteconvenzioneattiva" required="required"  class="form-check-input" />
                                                                    <span class="checkmark"></span>
                                                                </label>
                                                                </div>
                                                                <div class="row form-check ms-3">
                                                                <label class="container ">
                                                                Esiste convenzione attiva ma i beni/servizi presenti non sono compatibili con quello/i richeisto/i per la seguente motivazione 
                                                                    <input type="radio" name="convenzione"  value="nousareconvenzioneattiva" required="required"  class="form-check-input" />
                                                                    <span class="checkmark"></span>
                                                                </label>	
                                                                </div>
                                                                
                                                                <div id="motivonoconvenzione" class="d-none " style="margin-left:135px">
                                                                    <div class="row">
                                                                        <div class="col-8">
                                                                        <div class="input-group mb-3 ">
                                                                            <textarea  name="motivonoconvenzione" class="form-control" placeholder="Indicare motivazione"  ></textarea>
                                                                        </div>
                                                                        </div>
                                                                        </div>
                                                                </div>
                                                                <br>
                                                                <br>
                                                                <br>
                                                                
                                                        </div>
                                                        

                                            </div>

                                    <div id="step-3" class="tab-pane " role="tabpanel">                                           
                                        <h2 class="StepTitle">Step 3 - Descrizione beni/servizi da acquisire </h2>
                                            <div  style="margin-top: 20px">
                                                Avendo preso visione della normativa vigente e consapevole di quanto disposto dal DPR n. 445/2000 in tema di rilascio di false dichiarazioni,
                                                <br> <b>Richiede di acquisire il seguente bene/servizio il cui prezzo complessivo presunto ( IVA esclusa ) e' inferiore a Euro 40.000,00</b><br>
                                                Indicare per singolo articolo dell'ordine la quantita', il codice produttore, la descrizione ed il prezzo al netto dell'IVA trovati sul sito di acquistiinrete o nella documentazione della convenzione.
                                                <br>
                                                <br>
                                                    <h4>Lista Articolo/i e Prezzo/i</h4>
                                             </div>
                                            <div class="row">

                                                    <div class="col-md-1">Q.ta`</div>
                                                    <div class="col-md-2">Codice CONSIP/MEPA</div>
                                                    <div class="col-md-4">Descrizione</div>
                                                    <div class="col-md-2">Prezzo Unitario (IVA esclusa )</div>

                                                    <div class="col-md-1 " ><button title="Aggiungi un nuovo Articolo" class="btn btn-success btn-xs add-form-row float-right"><i class="fa fa-plus-square-o"></i></button></div>

                                             </div>
                                            <div class="row form-row added-row">

                                                    <div class="col-md-1"><input type="number" name="quantita" min="1" value="1"  class="form-control" ></div>
                                                    <div class="col-md-2"><input type="text" name="codiceproduttore" placeholder="" class="form-control"  ></div>
                                                    <div class="col-md-4"><input type="text" name="descrizione" placeholder="" class="form-control" ></div>
                                                    <div class="col-md-2"> <span class="input-number input-number-currency">
                                                        <input type="number" class="form-control"  name="prezzo" placeholder="0,00" min="0">
                                                    </span>
                                                    </div>

                                             </div>
                                            <div class="row" >


                                                    <div class="col-md-1"></div>
                                                    <div class="col-md-2"><button title="Calcola il Totale" class="btn btn-success btn-xs calcolaTotale float-right">Calcola Totale</button></div>
                                                    <div class="col-md-4 "><span class="float-right">Totale :</span> </div>
                                                    <div class="col-md-2"><input id="importoTotale" type="text" name="totale" placeholder="" class="form-control" readonly></div>
                                             </div>
                                     </div>
                                    <div id="step-4"  class="tab-pane  " role="tabpanel">

                                        <h1> Obiettivi Funzione </h1>
                                        <p>Su quale/i obiettivo/i deve essere caricato quest acquisto.</p>
                                        <div class="form-group row"><label class="col-sm-2 col-form-label">Seleziona uno o piu' obiettivi funzione su cui caricare l'acquisto</label>

                                            <div class="col-sm-10">
                                            <select id="obiettivo" class="form-control m-b" name="account" multiple>
                                                    {% for one in ob_fun %}
                                                        <option value="{{one.id}}">{{ one.descrizione }}</option>
                                                    {% endfor %}
                                                </select>
                                            </div>
                                        </div>
                                        <div class="row form-row">
                                        <div class="col-md-5"></div>
                                            <div class="col-md-2"> <b>Prezzo Totale </b> </div>
                                            <div class="col-md-2">
                                            <div class="input-group">
                                                <span class="input-group-addon">€</span>
                                                <input type="text" name="totale" value="143,23"  class="form-control " readonly />               
                                            </div>
                                            </div>
                                            <div class="col-md-3"></div>
                                        </div>
                                        <div class="row form-row">

                                            <div class="col-md-3">Capitolo</div>
                                            <div class="col-md-4">Obiettivo Funzione </div>
                                            <div class="col-md-2">Prezzo (IVA esclusa )</div>
                                            <div class="col-md-3">Responsabile Fondi</div>


                                        </div> <br/>
                                        <div id="addsome" class="d-flex flex-column overflow-auto"></div>
                                        <br/>
                                        <div class="row form-row">
                                        <div class="col-md-5"></div>
                                            <div class="col-md-2"> <b>Somma dei capitoli </b> </div>
                                            <div class="col-md-2">
                                            <div class="input-group">
                                                <span class="input-group-addon">€</span>
                                                <input id="sommacapitoli" type="number" name="sommacapitoli" readonly value="0.0" min="0" step="0.01" data-number-to-fixed="2" data-number-stepfactor="100" class="form-control currency"  />                                            </div>
                                            </div>
                                            <div class="col-md-3"></div>
                                        </div>



                            
                            
                                     </div>                                   
                                <div id="step-5" class="tab-pane" role="tabpanel">
                                <h1>Riepilogo Acquisto</h1>
                                        <h2>Terms and Conditions</h2>
                                        <input id="acceptTerms" name="acceptTerms" type="checkbox" class="required"> <label for="acceptTerms">I agree with the Terms and Conditions.</label>
                                </div>

                                <div id="step-6" class="tab-pane" role="tabpanel">
                                <h1>Finish</h1>
                                        <h2>Terms and Conditions</h2>
                                        <input id="acceptTerms" name="acceptTerms" type="checkbox" class="required"> <label for="acceptTerms">I agree with the Terms and Conditions.</label>
                                </div>                        
                        </div>
                    </div>                   
        </div>
        <!-- /page content -->
                       {% endblock right_col %}




{% block javascripts %}
{{ block.super }}

    <script src="{% static '/DataTables/jquery.dataTables5.min.js' %}"></script>

    <script src="{% static '/DataTables/dataTables.bootstrap5.min.js' %}"></script>
    <script src="{% static '/datepicker/js/bootstrap-datepicker.js' %}"></script>
    <script src="{% static '/smartwizard/js/jquery.smartWizard.min.js' %}"></script>
    <!--
    <script src="https://unpkg.com/smartwizard@5/dist/js/jquery.smartWizard.min.js" type="text/javascript"></script>
-->
    <script id="hidden-template" type="text/x-custom-template" >

<div class="row ">
    <input type="hidden" name="idobiettivofunzione" value="ID_OB_FUN" >                     
    <div class="col-md-3"><input type="text" name="capitolo" readonly value="CAPITOLO" class="form-control" ></div>
    <div class="col-md-4"><input type="text" name="obiettivofunzione" readonly value="DESCRIZIONE" class="form-control" ></div>
    <div class="col-md-2"> <div class="input-group"> 
        <span class="input-group-addon">€</span>
        <input  type="number" name="prezzoobfun" value="0" min="0" step="0.01" data-number-to-fixed="2" data-number-stepfactor="100" class="form-control currency parzialeobfun"  />
    </div>
    </div>
    <div class="col-md-3"><input type="text" name="responsabilefondiobfun" readonly value="RESPONSABILEFONDI" class="form-control" ></div>

</div> 
      </script>
<script>
var app3 = new Vue({
  el: '#informaticiPlus',
  data: {
    seen: false
  }
});

 $(document).on('change', 'input:radio[name="convenzione"]', function (event) {
      console.log("CONVENZIONE",$(this).val());
      if ($(this).val() == 'esisteconvenzioneattiva') {
      $('#nomeconvenzione').removeClass("d-none").addClass("d-block");
      } else {
      $('#nomeconvenzione').addClass("d-none");
       
      }
      if ( $(this).val() == 'nousareconvenzioneattiva') {
        $('#motivonoconvenzione').removeClass("d-none").addClass("d-block");
      } else {
          $('#motivonoconvenzione').addClass('d-none');
      }
 })
 $(document).on('change', 'input:radio[name="tipoacquisto"]', function (event) {
            //alert($(this).is(":checked"))
                console.log("OK",$(this).val());
                if ($(this).val() == 'informatici') {
                  $('#informaticiPlus').removeClass("invisible").addClass("visible");
                }
                console.log("App3 1",app3.seen);

            });  
 
$(document).on('keyup','.parzialeobfun'   , function(event){
    console.log('CAMBIO',$(this).val());
    ptot=$('#sommacapitoli').val();
    tot = parseFloat(ptot) + parseFloat($(this).val())
        
    $('#sommacapitoli').val(tot);
    console.log('Totale',tot)
})
var app = new Vue({
       delimiters: ['[[', ']]'],
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    });
$(document).on('click', '.add-form-row', function(e){
    e.preventDefault();
    cloneMore('.added-row:first');
    return false;
});
           function cloneMore(selector) {
        var newElement = $(selector).clone(true);
        //newElement.find('.remove-form-row').parent().remove();
        removebtn = '<div class="col-md-1" ><button class="btn btn-danger btn-xs  remove-form-row"><i class="fa fa-minus-square-o"></i></button></div>';
        newElement.append(removebtn);
        newElement.find("input[name='prezzo']").val('0,00');
        newElement.find("input[name='quantita']").val('1');
        newElement.find("input[name='codiceproduttore']").val('');
        newElement.find("input[name='descrizione']").val('');
        $(selector).after(newElement);
    
        return false;
}
 $(document).on('click', '.remove-form-row', function(e){
    e.preventDefault();
    deleteForm($(this));
    return false;
}); 
function deleteForm( btn) {
        btn.closest('.form-row').remove();
    return false;
};
$(document).on('click', '.calcolaTotale', function(e){
    e.preventDefault();
    calcolaTotale();
    return false;
});
function calcolaTotale() {
        //newElement.find("input[name='prezzo']").val('0,00)');
        tot=0;
        $('.form-row').find("input[name='prezzo']").each(function() {  

             tot= tot+ ( $(this).val().length > 0  ? parseFloat($(this).val()) : 0.0 );
                });
         $('#importoTotale').val(tot);
};
$(document).ready(function(){
    // Toolbar extra buttons
var btnFinish = $('<button></button>').text('Finish')
                                           .addClass('btn btn-info')
                                           .on('click', function(){ alert('Finish Clicked'); });
var btnCancel = $('<button></button>').text('Cancel')
                                           .addClass('btn btn-danger')
                                           .on('click', function(){ $('#smartwizard').smartWizard("reset"); });

$('#smartwizard').smartWizard({
  selected: 0, // Initial selected step, 0 = first step
  theme: 'arrows', // theme for the wizard, related css need to include for other than default theme
  justified: true, // Nav menu justification. true/false
  darkMode:true, // Enable/disable Dark Mode if the theme supports. true/false
  autoAdjustHeight: false, // Automatically adjust content height
  cycleSteps: false, // Allows to cycle the navigation of steps
  backButtonSupport: true, // Enable the back button support
  enableURLhash: true, // Enable selection of the step based on url hash
  transition: {
      animation: 'none', // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing
      speed: '400', // Transion animation speed
      easing:'' // Transition animation easing. Not supported without a jQuery easing plugin
  },
  toolbarSettings: {
      toolbarPosition: 'bottom', // none, top, bottom, both
      toolbarButtonPosition: 'right', // left, right, center
      showNextButton: true, // show/hide a Next button
      showPreviousButton: true, // show/hide a Previous button
      toolbarExtraButtons: [btnFinish, btnCancel] // Extra buttons to show on toolbar, array of jQuery input/buttons elements
  },
  anchorSettings: {
      anchorClickable: true, // Enable/Disable anchor navigation
      enableAllAnchors: false, // Activates all anchors clickable all times
      markDoneStep: true, // Add done state on navigation
      markAllPreviousStepsAsDone: true, // When a step selected by url hash, all previous steps are marked done
      removeDoneStepOnNavigateBack: false, // While navigate back done step after active step will be cleared
      enableAnchorOnDoneStep: true // Enable/Disable the done steps navigation
  },
  keyboardSettings: {
      keyNavigation: true, // Enable/Disable keyboard navigation(left and right keys are used if enabled)
      keyLeft: [37], // Left key code
      keyRight: [39] // Right key code
  },
  lang: { // Language variables for button
      next: 'Next',
      previous: 'Previous'
  },
  disabledSteps: [], // Array Steps disabled
  errorSteps: [], // Highlight step with errors
  hiddenSteps: [] // Hidden steps
});
             var obiettivifun=[]
    {% for one in ob_fun %}
        j={'id':{{one.id}},'of':'{{one.obiettivofunzione}}','descr': '{{one.descrizione}}',
        'responsabile':'{{one.emailresponsabile}}'};
        
        obiettivifun[{{one.id}}]=j;

    {% endfor %}
    console.log(obiettivifun);
            $( document ).on('change',"#obiettivo",function(e) {
//alert("POLLO");
                head='<div class="row ">'+                              
                '<div class="col-md-5">Obiettivo Funzione</div>'+
                '<div class="col-md-2">Prezzo (IVA esclusa )</div></div>';
                //$("#addsome").append(head);
                $("#addsome").html('');
                $.each($("#obiettivo option:selected"), function(){  
                        indx =   $(this).val()   ;
                        neww = $("#hidden-template").html();//clone(true);
                        //alert(neww);
                        //alert(obiettivifun[indx].descr);
                        
                        //neww.find("input[name='descrizione']").val(obiettivifun[indx].descrizione);

                        oooo = neww.replace('DESCRIZIONE',obiettivifun[indx].descr);
                        ooo1 = oooo.replace('CAPITOLO',obiettivifun[indx].of);
                        ooo = ooo1.replace('RESPONSABILEFONDI',obiettivifun[indx].responsabile);
                        oo = ooo.replace('ID_OB_FUN',indx); 
                        $("#addsome").append(oo);
                        
                        //alert($(this).val());
                        //countries.push($(this).val());
                    })
    
   
        });
});
    </script>
{% endblock javascripts %}