{% if delay is defined %}
       <script type="text/javascript">
          {% if javascript is defined %}
          {{ javascript | raw }}
          {% endif %}
          {% if refreshUrl is defined %}
            var refreshUrl = "{{ refreshUrl }}";
          {% else %}
            var refreshUrl = window.location.href;
          {% endif %}       
          $('{{ modal }}').modal('hide');
          window.location.href = refreshUrl ;
        </script>
{% else %}
    <script type="text/javascript">
      function delayedFunction() {
        {% if javascript is defined %}
        {{ javascript | raw }}
        {% endif %}
        {% if refreshUrl is defined %}
          var refreshUrl = "{{ refreshUrl }}";
        {% else %}
          var refreshUrl = window.location.href;
        {% endif %}    
          $('{{ modal }}').modal('hide');
          window.location.href = refreshUrl ;
      }

      setTimeout(delayedFunction, 2000);

    </script>

    <div id="alert-wrapper1">
      <div class="alert alert-success alert-dismissible" role="alert" style="box-shadow: 10px 5px 5px #c0c0c0;">
        Starting google authentication process. Please wait...<button type="button" class="close" data-dismiss="alert" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
    </div>
    
    <style>
    .modal-backdrop {
      background-color: transparent;
    }
    #alert-wrapper1, #alert-wrapper2 {
      position: fixed;
      z-index: 10000;
      top: 200px;
      left: 50%;
      transform: translate(-50%, -50%);
      display: block;
      font-size: 17px;  
    }
    </style>


{% endif %}