{{ block title }}
Please Wait
<style>
    .loading-bar {
      width: 100%;
      height: 20px;
      background-color: #ddd;
      margin-bottom: 10px;
    }

    .progress {
      width: 0%;
      height: 100%;
      background-color: #1e90ff;
    }

    input[type="submit"] {
      display: none; /* Hide the submit button initially */
    }
  </style>
{{ endblock }}
{{ block content }}

<!-- Add this HTML code to your page -->
<form id="myForm" method="post" action="submit">
  <div class="loading-bar">
    <div class="progress"></div>
  </div>
  <input type="hidden" name="timeup" value="True">
  <input type="submit" value="Submit">
  <button id="hiddenButton" style="display: none;"></button>
</form>

<script>
  // Get the form element, progress bar element, and hidden button element
  const form = document.getElementById('myForm');
  const progressBar = document.querySelector('.progress');
  const hiddenButton = document.getElementById('hiddenButton');

  // Submit the form after 5 seconds
  setTimeout(() => {
    document.querySelector('input[name="timeup"]').value = "True";
    hiddenButton.click();
  }, 5000);

  // Update the progress bar every 50 milliseconds
  let width = 0;
  const progressInterval = setInterval(() => {
    if (width >= 100) {
      clearInterval(progressInterval);
    } else {
      width += 1;
      progressBar.style.width = `${width}%`;
    }
  }, 50);

  // Optional: Handle the hidden button click event
  hiddenButton.addEventListener('click', () => {
    form.submit();
  });
</script>

{{ endblock }}