<%- include('partials-header.ejs', { title: 'Đăng nhập điểm danh', checkinOnly: true }) %>

<section class="mobile-checkin">
  <div class="panel checkin-panel">
    <div class="text-center mb-4">
      <img class="brand-logo mb-3" src="/img/Logo.png" alt="MPOC">
      <h1 class="h3 mb-1">PG đăng nhập</h1>
      <p class="muted mb-0">Đăng nhập bằng tài khoản PG để quét QR hoặc nhập mã khách.</p>
    </div>

    <%- include('partials-error-modal.ejs') %>

    <form action="/checkin/login" method="post" class="vstack gap-3">
      <div>
        <label class="form-label" for="username">Tên đăng nhập</label>
        <input class="form-control form-control-lg" id="username" name="username" autocomplete="username" required autofocus>
      </div>
      <div>
        <label class="form-label" for="password">Mật khẩu</label>
        <input class="form-control form-control-lg" id="password" name="password" type="password" autocomplete="current-password" required>
      </div>
      <button class="btn btn-brand btn-lg" type="submit">Đăng nhập</button>
    </form>
  </div>
</section>

<%- include('partials-footer.ejs') %>
