{% extends "base.html" %}
{% load i18n %}

{% block title %}{% trans 'Invitation' %}{% endblock %}
{% block extra_css%}{% include "purist/spinner.html" %}{% endblock %}
{% block header %}{% trans 'Invitation' %}{% endblock %}
{% block byline %}{% trans 'Please fill in your invitation details' %}{% endblock %}

{% block login_status %}
    {% if DEBUG_REGISTER_STATUS %}
        {{ block.super }}
    {% endif %}
{% endblock %}

{% block content %}
<form id="register_invitee" method="post" action=".">
    {% csrf_token %}
    {{ form.as_p }}
    <input type="submit" value="{% trans 'Register >>' %}" />
</form>
<div id="spinner-wrap" class="hidden">
  <div class="spinner"></div>
  <p class="wait">Please wait ...</p>
</div>
{% endblock %}
{% block extra_js %}
<script>
  const frm = document.getElementById('register_invitee'),
        spin = document.getElementById('spinner-wrap');

  frm.addEventListener('submit', enable_spinner);

  function enable_spinner() {
      spin.setAttribute('class', 'spinner-wrapper');
  }
</script>
{% endblock %}