{% extends "base.html" %}
{% block title %}Account{% endblock %}
{% block page_title %}My Account{% endblock %}
{% block content %}
<div style="max-width:480px">
  <div class="card" style="margin-bottom:20px">
    <div class="card-header"><h3>Account Info</h3></div>
    <div class="card-body">
      <div class="form-group"><label class="form-label">Name</label><div class="form-input" style="background:var(--gray-50)">{{ user.user_name }}</div></div>
      <div class="form-group"><label class="form-label">Email</label><div class="form-input" style="background:var(--gray-50)">{{ user.user_email }}</div></div>
      <div class="form-group"><label class="form-label">School</label><div class="form-input" style="background:var(--gray-50)">{{ user.school_name }}</div></div>
      <div class="form-group"><label class="form-label">Role</label><span class="badge badge-blue">{{ user.role }}</span></div>
    </div>
  </div>

  <div class="card">
    <div class="card-header"><h3>Change Password</h3></div>
    <div class="card-body">
      <form hx-post="/account/password" hx-target="#pw-toast" hx-swap="innerHTML">
        <div class="form-group"><label class="form-label">Current Password</label><input type="password" name="current_password" class="form-input" required></div>
        <div class="form-group"><label class="form-label">New Password</label><input type="password" name="new_password" class="form-input" required minlength="8"></div>
        <div class="form-group"><label class="form-label">Confirm New Password</label><input type="password" name="confirm_password" class="form-input" required></div>
        <button type="submit" class="btn btn-primary w-full">Update Password</button>
      </form>
      <div id="pw-toast" style="margin-top:10px"></div>
    </div>
  </div>
</div>
{% endblock %}