<div class="page-header">
  <div>
    <div class="eyebrow">Account</div>
    <h1>Settings</h1>
    <p class="desc">Manage your profile and security preferences.</p>
  </div>
</div>

<% if (typeof success !== 'undefined' && success) { %><div class="alert alert-success" data-autohide><i class="fa-solid fa-circle-check"></i> <%= success %></div><% } %>
<% if (typeof error !== 'undefined' && error) { %><div class="alert alert-error"><i class="fa-solid fa-circle-exclamation"></i> <%= error %></div><% } %>

<div class="grid-2">
  <div class="card card-pad">
    <h3 style="margin-bottom:16px;">Profile Information</h3>
    <form method="POST" action="/settings/profile">
      <div class="form-grid" style="grid-template-columns:1fr;">
        <div class="form-group"><label>Full Name</label><input type="text" name="name" value="<%= user.name %>"></div>
        <div class="form-group"><label>Email Address</label><input type="email" value="<%= user.email %>" disabled></div>
        <div class="form-group"><label>Phone</label><input type="tel" name="phone" value="<%= user.phone || '' %>"></div>
        <div class="form-group"><label>Role</label><input type="text" value="<%= user.role %>" style="text-transform:capitalize;" disabled></div>
        <% if (school) { %><div class="form-group"><label>School</label><input type="text" value="<%= school.name %>" disabled></div><% } %>
      </div>
      <div class="form-actions"><button type="submit" class="btn btn-primary"><i class="fa-solid fa-check"></i> Save Profile</button></div>
    </form>
  </div>

  <div class="card card-pad">
    <h3 style="margin-bottom:16px;">Change Password</h3>
    <form method="POST" action="/settings/password">
      <div class="form-grid" style="grid-template-columns:1fr;">
        <div class="form-group"><label>Current Password</label><input type="password" name="current_password" required></div>
        <div class="form-group"><label>New Password</label><input type="password" name="new_password" required minlength="6"></div>
      </div>
      <div class="form-actions"><button type="submit" class="btn btn-primary"><i class="fa-solid fa-lock"></i> Update Password</button></div>
    </form>
  </div>
</div>
