{% extends "base.html" %}

{% block content %}
{% include "partials/navbar.html" %}
<div class="container">
  <h1>Remove User Data</h1>
  {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
      <ul class="flashes">
        {% for message, category in messages %}
          <li class="flash-{{ category }}">{{ message }}</li>
        {% endfor %}
      </ul>
    {% endif %}
  {% endwith %}
  <form action="/manage_user_data" method="POST" name="manage_user_data" onsubmit="return confirmPhoneNumber();">
    <div id="usernumberinput" class="input-group col-md-6">
      <span class="input-group-addon" id="basic-addon1">User Number</span>
      <input type="text" class="form-control" name="user_phone" id="user_phone" aria-describedby="basic-addon1" value="{{ user_phone }}">
    </div>
    <button id="form_submit" type="submit" class="btn btn-success">Submit</button>
  </form>
</div>

<script>
function confirmPhoneNumber() {
  var userPhone = document.getElementById("user_phone").value;
  return confirm('Please confirm the phone number ' + userPhone + ' before deletion.');
}
</script>
{% endblock content %}