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

{% block title %}{% trans 'Manage Upgrades' %}{% endblock %}
{% block extra_css%}{% include "purist/spinner.html" %}{% endblock %}
{% block header %}{% trans 'Manage Upgrades' %}{% endblock %}
{% block byline %}
  {% if can_upgrade %}
    {% trans 'You are currently on' %} <strong>{{ current_bdl }}</strong> {% trans 'bundle.' %}
  {% endif %}
{% endblock %}
{% block content %}
{% if has_pending_changes %}
  <p>{% trans 'Your change from ' %} <strong>{{ from_bdl }}</strong> {% trans ' to ' %} <strong>{{ to_bdl }}</strong> {% trans 'was successful.' %}<br>
    Use <a href="{{ pay_url }}">this link</a> to pay.</p>
  <p>{% trans 'After payment is done your account will be updated in few minutes.' %}
{% elif can_upgrade %}
  {% if not invitees_clean %}
    <p> {% trans 'You cannot downgrade while one or more invitees are missing a recovery address. Please prompt them to update their details or contact support.' %}</p>
  {% else %}
    <form id="change_bundle" action="" method="post">
      {% csrf_token %}
      {{ form.as_p }}
      <input type="submit" value="Confirm" />
      <a href="{% url 'profile' %}" class="button">No thanks</a>
    </form>
    <div id="spinner-wrap" class="hidden">
      <div class="spinner"></div>
      <p class="wait">Please wait ...</p>
    </div>
  {% endif %}
{% else %}
  {% trans 'There is no upgrade or downgrade options for your account.' %}
{% endif %}
{% endblock %}
{% block extra_js %}
<script>
  const frm = document.getElementById('change_bundle'),
        spin = document.getElementById('spinner-wrap');

  frm.addEventListener('submit', enable_spinner);

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