<%- include('partials/header') %>
<%- include('partials/nav') %>

<main class="flex-grow max-w-xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8">
  <div class="mb-6">
    <h1 class="text-3xl font-bold text-slate-900">Account</h1>
    <p class="text-sm text-slate-500 mt-1">Signed in as <span class="font-medium text-slate-700"><%= user.email %></span>.</p>
  </div>

  <% if (defaultPassword) { %>
    <div class="mb-6 px-4 py-3 rounded-lg text-sm border bg-amber-50 border-amber-200 text-amber-800">
      You're still using the default admin password. It's public, so anyone can sign in as admin until you change it below.
    </div>
  <% } %>
  <% if (error) { %>
    <div class="mb-6 px-4 py-3 rounded-lg text-sm border bg-red-50 border-red-200 text-red-600"><%= error %></div>
  <% } %>
  <% if (message) { %>
    <div class="mb-6 px-4 py-3 rounded-lg text-sm border bg-emerald-50 border-emerald-200 text-emerald-700"><%= message %></div>
  <% } %>

  <div class="bg-white rounded-2xl border border-sky-100 shadow-sm p-6">
    <h3 class="text-lg font-bold text-slate-900 mb-4">Change password</h3>
    <form action="/account/password" method="POST" class="space-y-4">
      <div>
        <label class="block text-xs font-medium text-slate-600 mb-1">Current password</label>
        <input type="password" name="current_password" required autocomplete="current-password" class="block w-full px-3 py-2 border border-slate-300 rounded-lg shadow-sm text-sm focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-brand-500">
      </div>
      <div>
        <label class="block text-xs font-medium text-slate-600 mb-1">New password</label>
        <input type="password" name="new_password" required minlength="8" autocomplete="new-password" class="block w-full px-3 py-2 border border-slate-300 rounded-lg shadow-sm text-sm focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-brand-500">
        <p class="text-xs text-slate-400 mt-1">At least 8 characters.</p>
      </div>
      <div>
        <label class="block text-xs font-medium text-slate-600 mb-1">Confirm new password</label>
        <input type="password" name="confirm_password" required minlength="8" autocomplete="new-password" class="block w-full px-3 py-2 border border-slate-300 rounded-lg shadow-sm text-sm focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-brand-500">
      </div>
      <button type="submit" class="w-full flex justify-center py-2.5 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-brand-500 hover:bg-brand-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500 transition">Update password</button>
    </form>
  </div>
</main>

<%- include('partials/footer') %>
