{% extends "templates/spawn.html" %}
{% from "_macros.html" import swan_loader with context %}
{% if announcement_spawn is string %}
  {% set announcement = announcement_spawn %}
{% endif %}

{% block main %}
<main class="container justify-content-start" style="max-width: 600px;">
  {{ render_hub_announcement() }}
  <div class="row">
    <form enctype="multipart/form-data" id="spawn_form" action="{{ url | safe }}" method="post" role="form">
      {% if error_message %}
        <div class="alert alert-danger alert-dismissible" role="alert">
          {{error_message | safe}}
          <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
      {% endif %}
      <div>
        <div id="spawner-options">
          {{spawner_options_form | safe}}
        </div>
        <div class="w-100 text-center mt-3">
          <button type="submit" id="spawn" class="btn btn-default btn-primary btn-lg w-100">
            <span>
              <i class="fa fa-rocket me-1"></i>
              Start new session
            </span>
          </button>
        </div>
      </div>
    </form>

    {% call swan_loader(visible=false) %}
      <div class="text-center">
        <h4>Starting your session...</h4>
        <p>You will be redirected automatically when it's ready for you.</p>
      </div>
    {% endcall %}
  </div>
</main>
{% endblock %}

{% block script %}
<script type="text/javascript">
  /*
  * This function keeps the "use-tn" checkbox in sync, whether the cluster is exposed to the TN or not.
  */
  function updateUseTnCheckbox() {
    const tnCheckbox = document.getElementById('use-tn');
    if (tnCheckbox) tnCheckbox.checked = '{{ tn_enabled }}' === 'True';
    else console.warn("'use-tn' is not defined, cannot set use-tn checkbox");
  }

  const mainContainer = document.querySelector('main.container');
  const spawnBtn = document.getElementById('spawn');
  const spawnForm = document.getElementById('spawn_form');
  const loader = document.getElementById('swan-loader');

  spawnForm.addEventListener('submit', () => {
    // Hide the form and show the loading spinner
    spawnForm.classList.add('hidden');
    loader.classList.remove('d-none');
    loader.classList.add('d-flex');
    mainContainer.classList.add('justify-content-center');
    mainContainer.classList.remove('justify-content-start');
  });

  // This runs when user comes back via browser history (e.g. Back button)
  window.onpageshow = () => updateUseTnCheckbox();
</script>
{% endblock %}

{% macro render_hub_announcement() %}
  <div id="swan-announcement-wrapper" class="row d-none">
    <div class="alert alert-warning alert-dismissible" role="alert">
      <span id="swan-announcement-text"></span>
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    <script>
      async function showAnnouncement() {
        const resp = await fetch('/hub/static/announcement/announcement.json', {cache: 'no-store'})
        if (resp.status === 404) {
          console.log('No announcement found');
          return;
        }

        const announcement = (await resp.json()) || {};
        const {message, expiresDt: _expiresDt} = announcement;
        const expiresDt = Date.parse(_expiresDt);

        if (!message || isNaN(expiresDt)) {
          return;
        }

        if (localStorage.getItem('swan-announcement-dismissed') === message) {
          return;
        }

        if (Date.now() > expiresDt) {
          return;
        }

        const wrapper = document.getElementById('swan-announcement-wrapper');
        const text = document.getElementById('swan-announcement-text');
        const closeBtn = wrapper.querySelector('button');

        text.innerHTML = message;
        closeBtn.addEventListener('click', () => {
          localStorage.setItem('swan-announcement-dismissed', message);
        });
        wrapper.classList.remove('d-none');
      }

      showAnnouncement().catch(e => console.error(e));
    </script>
  </div>
{% endmacro %}