{% extends 'base/base.html' %}
{% load static %}

{% block title %}Delete Account{% endblock %}

{% block content %}
  {% include "base/navbar.html" %}

  <section class="section content">
    <div class="container">
      <h2 class="is-size-2 has-text-centered">Account Deletion</h2>

      <div class="columns is-centered">
        <div class="column is-half-desktop is-full-tablet is-full-mobile">

          <article class="message is-danger">
            <div class="message-body">
              <p>
                You have requested to delete the account with username
                <strong><span class="has-text-dark is-family-monospace">{{ user.username }}</span></strong>.
              </p>

              <p>
                Please note that this <strong>cannot be undone</strong>.
              </p>

              <p>
                To verify that you'd like to remove your account, please type your username into the box below.
              </p>
            </div>
          </article>
        </div>
      </div>

      <div class="columns is-centered">
        <div class="column is-half-desktop is-full-tablet is-full-mobile">
          <form method="post">
            {% csrf_token %}
            <label for="id_username" class="label requiredField">Username</label>
            <input id="id_username" class="input" type="text" required name="username">
            <input style="margin-top: 1em;" type="submit" value="I understand, delete my account" class="button is-primary">
          </form>
        </div>
      </div>
    </div>
  </section>
{% endblock %}