    </div>
  </main>

  <% if (currentUser && currentUser.role === 'User') { %>
    <div id="profileModal" class="modal-backdrop" role="dialog" aria-modal="true" aria-labelledby="profileModalTitle">
      <div class="modal-content">
        <div class="modal-header">
          <h3 id="profileModalTitle">Thông tin cá nhân</h3>
          <button class="icon-button subtle" type="button" data-modal-close aria-label="Đóng">
            <span class="material-symbols-outlined">close</span>
          </button>
        </div>
        <form class="modal-form" method="post" action="/profile" data-profile-form>
          <input type="hidden" name="returnTo" value="<%= currentPath || '/' %>">
          <div class="profile-summary">
            <div class="profile-avatar"><%= currentUser.name.charAt(0) %></div>
            <div>
              <strong><%= currentUser.name %></strong>
              <span><%= currentUser.username %></span>
            </div>
          </div>
          <div class="form-stack">
            <label class="form-field">
              <span>Fullname</span>
              <input type="text" name="fullName" value="<%= currentUser.fullName || '' %>" autocomplete="name">
            </label>
            <label class="form-field">
              <span>Email mới</span>
              <input type="email" name="email" value="<%= currentUser.email || '' %>" autocomplete="email" required data-profile-email>
            </label>
            <label class="form-field">
              <span>Confirm email mới</span>
              <input type="email" name="confirmEmail" value="<%= currentUser.email || '' %>" autocomplete="email" required data-profile-confirm-email>
              <small class="field-feedback" data-profile-feedback="email"></small>
            </label>
            <label class="form-field">
              <span>Mật khẩu mới</span>
              <input type="password" name="newPassword" minlength="8" autocomplete="new-password" data-profile-new-password>
            </label>
            <label class="form-field">
              <span>Xác nhận mật khẩu mới</span>
              <input type="password" name="confirmPassword" minlength="8" autocomplete="new-password" data-profile-confirm-password>
              <small class="field-feedback" data-profile-feedback="password"></small>
            </label>
          </div>
          <div class="modal-actions">
            <button class="btn btn-secondary" type="button" data-modal-close>Hủy</button>
            <button class="btn btn-primary" type="submit">
              <span class="material-symbols-outlined">save</span>
              Lưu
            </button>
          </div>
        </form>
      </div>
    </div>
  <% } %>

  <% if (currentUser && currentUser.role === 'Admin') { %>
    <div id="systemNotificationModal" class="modal-backdrop" role="dialog" aria-modal="true" aria-labelledby="systemNotificationModalTitle">
      <div class="modal-content">
        <div class="modal-header">
          <div>
            <h3 id="systemNotificationModalTitle">Đăng thông báo hệ thống</h3>
            <p>Thông báo sẽ được gửi tới tất cả tài khoản đang hoạt động.</p>
          </div>
          <button class="icon-button subtle" type="button" data-modal-close aria-label="Đóng">
            <span class="material-symbols-outlined">close</span>
          </button>
        </div>
        <form class="modal-form" data-system-notification-form>
          <div class="form-stack">
            <label class="form-field">
              <span>Tiêu đề</span>
              <input type="text" name="title" maxlength="200" required placeholder="Ví dụ: Hệ thống đã cập nhật phiên bản 1.2.0">
            </label>
            <label class="form-field">
              <span>Mức độ</span>
              <select name="severity" required>
                <option value="info">Thông tin</option>
                <option value="success">Cập nhật thành công</option>
                <option value="warning">Quan trọng / bảo trì</option>
                <option value="error">Khẩn cấp / sự cố</option>
              </select>
            </label>
            <label class="form-field">
              <span>Nội dung</span>
              <textarea name="message" rows="6" maxlength="1000" required placeholder="Mô tả nội dung cập nhật, ảnh hưởng và việc người dùng cần thực hiện."></textarea>
              <small>Tối đa 1000 ký tự. Không nhập mật khẩu, token hoặc thông tin nhạy cảm.</small>
            </label>
            <label class="form-field">
              <span>Đường dẫn nội bộ (không bắt buộc)</span>
              <input type="text" name="actionUrl" maxlength="1000" placeholder="Ví dụ: /applications hoặc /agent">
              <small>Chỉ chấp nhận đường dẫn trong website bắt đầu bằng dấu /.</small>
            </label>
          </div>
          <div class="modal-actions">
            <button class="btn btn-secondary" type="button" data-modal-close>Hủy</button>
            <button class="btn btn-primary" type="submit" data-system-notification-submit>
              <span class="material-symbols-outlined">send</span>
              Gửi cho mọi người
            </button>
          </div>
        </form>
      </div>
    </div>
  <% } %>

  <script src="/vendor/notiflix/notiflix-<%= notiflixVersion %>.min.js"></script>
  <script src="/js/app.js"></script>
</body>
</html>
