<!doctype html>
<html lang="vi">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title><%= title %> | Robot Installer</title>
  <link rel="stylesheet" href="/vendor/montserrat/index.css">
  <link rel="stylesheet" href="/vendor/notiflix/notiflix-<%= notiflixVersion %>.min.css">
  <link rel="stylesheet" href="/css/styles.css">
</head>
<body class="auth-shell" <% if (notice) { %>data-notice-type="<%= notice.type %>" data-notice="<%= notice.message %>"<% } %>>
  <main class="auth-page">
    <section class="auth-panel">
      <div class="auth-brand">
        <div class="brand-mark">
          <span class="material-symbols-outlined">precision_manufacturing</span>
        </div>
        <div class="brand-copy">
          <strong>Robot Installer</strong>
          <span>User Access</span>
        </div>
      </div>

      <% if (mode === 'login') { %>
        <div class="auth-heading">
          <h1>Đăng nhập</h1>
          <p>Truy cập console quản lý package và app.</p>
        </div>

        <form class="auth-form" method="post" action="/login">
          <input type="hidden" name="returnTo" value="<%= returnTo %>">
          <label class="form-field">
            <span>Username hoặc email</span>
            <input type="text" name="identifier" autocomplete="username" required autofocus>
          </label>
          <label class="form-field">
            <span>Mật khẩu</span>
            <input type="password" name="password" autocomplete="current-password" required>
          </label>
          <button class="btn btn-primary auth-submit" type="submit">
            <span class="material-symbols-outlined">login</span>
            Đăng nhập
          </button>
        </form>

        <p class="auth-switch">Chưa có tài khoản? <a href="/register">Đăng ký</a></p>
      <% } else { %>
        <div class="auth-heading">
          <h1>Đăng ký</h1>
          <p>App sẽ gửi email xác nhận để kích hoạt tài khoản.</p>
        </div>

        <form class="auth-form" method="post" action="/register" data-register-form>
          <div class="form-grid">
            <label class="form-field">
              <span>Username</span>
              <input type="text" name="username" value="<%= values.username || '' %>" autocomplete="username" required autofocus data-unique-check="username">
              <small class="field-feedback" data-unique-feedback="username"></small>
            </label>
            <label class="form-field">
              <span>Họ tên</span>
              <input type="text" name="fullName" value="<%= values.fullName || '' %>" autocomplete="name">
            </label>
          </div>
          <label class="form-field">
            <span>Email</span>
            <input type="email" name="email" value="<%= values.email || '' %>" autocomplete="email" required data-unique-check="email">
            <small class="field-feedback" data-unique-feedback="email"></small>
          </label>
          <div class="form-grid">
            <label class="form-field">
              <span>Mật khẩu</span>
              <input type="password" name="password" autocomplete="new-password" minlength="8" required>
            </label>
            <label class="form-field">
              <span>Xác nhận mật khẩu</span>
              <input type="password" name="confirmPassword" autocomplete="new-password" minlength="8" required>
            </label>
          </div>
          <button class="btn btn-primary auth-submit" type="submit" data-register-submit>
            <span class="material-symbols-outlined">person_add</span>
            Tạo tài khoản
          </button>
        </form>

        <p class="auth-switch">Đã có tài khoản? <a href="/login">Đăng nhập</a></p>
      <% } %>
    </section>
  </main>

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