{% extends "base.html" %}
{% block title %}My Account — IslamInLife Quran App{% endblock %}
{% block body %}
<header>
  <h1>⚙️ My Account</h1>
  <div>{{ display_name }} &nbsp;·&nbsp; <a href="{{ url_for('home') }}">Home</a></div>
</header>
<main>
  {% if error %}<div class="msg msg-error">{{ error }}</div>{% endif %}
  {% if success %}<div class="msg msg-success">{{ success }}</div>{% endif %}

  <div class="card">
    <div class="section-title">Change Password</div>
    <form method="post">
      <input type="hidden" name="action" value="change_password">
      <label>Current Password</label>
      <input type="password" name="old_password" required>
      <label>New Password</label>
      <input type="password" name="new_password" required>
      <label>Confirm New Password</label>
      <input type="password" name="confirm" required>
      <button type="submit" class="btn-save">🔑 Change Password</button>
    </form>
  </div>

  <div class="card">
    <div class="section-title">Delete My Account</div>
    <p style="font-size:13px; color:#566573;">
      This permanently removes your account and all your data. This cannot be undone.
      Admin accounts cannot self-delete this way — ask a Super Admin instead.
    </p>
    <form method="post" onsubmit="return confirm('Permanently delete your account? This cannot be undone.');">
      <input type="hidden" name="action" value="delete_account">
      <button type="submit" class="btn-delete">🗑 Delete My Account</button>
    </form>
  </div>
</main>
{% endblock %}