<%- include('header.ejs', { pageTitle: 'Tài khoản · VUS CMS', pageHeading: 'Tài khoản', activeTab: 'account' }) %>
<div class="page-intro">
  <div><div class="eyebrow blue">ACCESS CONTROL</div><h1>Quản lý tài khoản</h1><p class="muted">Thêm, cập nhật mật khẩu và quản lý quyền truy cập CMS.</p></div>
  <a class="button button-light" href="/admin/account">↻ Làm mới</a>
</div>

<% if (saved) { %><div class="notice success">✓ Tài khoản đã được lưu thành công.</div><% } %>
<% if (deleted) { %><div class="notice success">✓ Tài khoản đã được xóa.</div><% } %>

<div class="account-management-layout">
  <section class="panel account-list-panel">
    <div class="panel-toolbar"><div><h2>Danh sách account</h2><span class="muted small-text"><%= accountCount %> tài khoản · Mật khẩu được lưu bằng bcrypt</span></div><span class="security-badge">● Protected</span></div>
    <div class="table-scroll">
      <table class="account-table">
        <thead><tr><th>ACCOUNT</th><th>ROLE</th><th>TRẠNG THÁI</th><th style="width: 110px">THAO TÁC</th></tr></thead>
        <tbody>
        <% accounts.forEach((account) => { %>
          <tr class="<%= account.username === currentUsername ? 'current-account' : '' %>">
            <td><div class="account-name-cell"><div class="avatar small-avatar"><%= account.displayname.slice(0, 1).toUpperCase() %></div><div><strong><%= account.displayname %></strong><span>@<%= account.username %></span></div></div></td>
            <td><span class="role-pill <%= account.role === 'SUPER_ADMIN' ? 'role-super' : '' %>"><%= account.role %></span></td>
            <td><span class="account-status"><span class="status-dot"></span> Active</span></td>
            <td><div class="row-actions"><a class="icon-button" href="/admin/account?edit=<%= account.id %>" title="Chỉnh sửa">✎</a><% if (account.username === currentUsername) { %><button class="icon-button disabled" type="button" title="Không thể xóa tài khoản đang đăng nhập" disabled>⌫</button><% } else { %><form method="post" action="/admin/account/<%= account.id %>/delete" onsubmit="return confirm('Xóa tài khoản <%= account.username %>?')"><button class="icon-button danger" title="Xóa" type="submit">⌫</button></form><% } %></div></td>
          </tr>
        <% }) %>
        <% if (!accounts.length) { %><tr><td colspan="4" class="empty-state">Chưa có tài khoản nào.</td></tr><% } %>
        </tbody>
      </table>
    </div>
  </section>

  <section class="panel account-editor-panel">
    <div class="panel-heading"><div><div class="eyebrow blue"><%= selectedAccount ? 'EDIT ACCOUNT' : 'NEW ACCOUNT' %></div><h2><%= selectedAccount ? 'Cập nhật tài khoản' : 'Thêm tài khoản' %></h2></div><span class="required-note">* Bắt buộc</span></div>
    <form class="account-form" method="post" action="/admin/account/save">
      <% if (selectedAccount) { %><input type="hidden" name="id" value="<%= selectedAccount.id %>"><% } %>
      <label class="field-label" for="username">Username <span>*</span></label>
      <input id="username" name="username" value="<%= selectedAccount ? selectedAccount.username : '' %>" placeholder="admin01" required>
      <div class="field-hint">Username dùng để đăng nhập, không phân biệt hoa thường khi xác thực.</div>
      <label class="field-label" for="displayname">Tên hiển thị <span>*</span></label>
      <input id="displayname" name="displayname" value="<%= selectedAccount ? selectedAccount.displayname : '' %>" placeholder="Administrator" required>
      <label class="field-label" for="role">Role <span>*</span></label>
      <select id="role" name="role" required><% roles.forEach((role) => { %><option value="<%= role %>" <%= selectedAccount && selectedAccount.role === role ? 'selected' : '' %>><%= role %></option><% }) %></select>
      <label class="field-label" for="password">Mật khẩu <%= selectedAccount ? '(để trống nếu không đổi)' : '' %> <span><%= selectedAccount ? '' : '*' %></span></label>
      <input id="password" name="password" type="password" placeholder="Nhập mật khẩu mới" <%= selectedAccount ? '' : 'required' %> minlength="3" autocomplete="new-password">
      <div class="field-hint">Mật khẩu không được hiển thị lại. Tối thiểu 3 ký tự.</div>
      <div class="form-actions"><% if (selectedAccount) { %><a class="button button-light" href="/admin/account">Hủy sửa</a><% } %><button class="button button-primary" type="submit"><%= selectedAccount ? 'Lưu thay đổi' : 'Tạo tài khoản' %> <span>→</span></button></div>
    </form>
  </section>
</div>
<%- include('footer.ejs') %>
