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

{% block title %}{% trans 'Delete Account' %}{% endblock %}
{% block extra_css%}{% include "purist/spinner.html" %}{% endblock %}
{% block header %}{% trans 'Delete Account' %}{% endblock %}
{% block byline %}
  {% if can_delete %}
    {% trans 'Are you sure you want to delete your account?' %}
  {% else %}
    {% trans 'You cannot currently delete your account' %}
  {% endif %}
{% endblock %}
{% block content %}
  {% if can_delete %}
<div style="padding: 20px;">
  <p><strong>WARNING!</strong></p>
  Deleting your account will permanently delete all your data, and your username will no longer be available.
<form id="delete-acc" action="" method="post">{% csrf_token %}
  {{ form.as_p }}
  <input type="submit" value="Confirm" />
  <a href="{% url 'profile' %}" class="button">No thanks</a>
</form>
</div>
<div id="spinner-wrap" class="hidden">
  <div class="spinner"></div>
  <p class="wait">Please wait ...</p>
</div>
  {% else %}
{% trans 'You have' %}  <a href="{{ shoplink }}"> {% trans 'pending orders that are incomplete' %} </a>{% trans '. Once they are completed you can can cancel your account.' %}
    {% if paid %}
<p>{% trans 'To stop subscription payments in the meantime, please downgrade to a Basic account.' %}
    {% endif %}
  {% endif %}
{% endblock %}
{% block extra_js %}
<script>
  const frm = document.getElementById('delete-acc'),
        spin = document.getElementById('spinner-wrap');

  frm.addEventListener('submit', enable_spinner);

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