{% extends "page.html" %}

{% block main %}
  <main class="container">
    <div class="row text-center">
      <h1>Session already running</h1>
      <p>A session is running already. Do you want to stop it or go to it?</p>
      <div class="d-flex gap-3 justify-content-center mt-3">
        <button id="stop-session" type="button" class="btn btn-danger">
          <i class="fa fa-circle-stop"></i>
          Stop session
        </button>
        <button id="go-to-session" type="button" class="btn btn-primary">
          <i class="fa fa-circle-arrow-right"></i>
          Go to session
        </button>
      </div>
    </div>
  </main>
{% endblock %}

{% block script %}
{{ super() }}
<script type="text/javascript">

  const stopSessionBtn = document.getElementById('stop-session');
  const goToSessionBtn = document.getElementById('go-to-session');

  stopSessionBtn.addEventListener('click', () => {
    const query_params = window.location.search ? `&${window.location.search.substring(1)}` : '';
    window.location.replace('{{base_url}}home?changeconfig' + query_params);
  });

  goToSessionBtn.addEventListener('click', () => {
    window.location.replace(window.location.origin + "/{{ next_url }}");
  });

</script>
{% endblock %}