<%- include('../shared/_head', { title: title, portalCss: '/platform/payer/css/portal.css', bodyClass: 'payer-portal auth-page' }) %>

<div class="auth-shell">
  <div class="auth-card">
    <div class="auth-header">
      <a href="/" class="back-link">← BeezifiPay</a>
      <div class="portal-badge portal-badge--payer">Payer</div>
    </div>
    <h1 class="auth-title">Create your account</h1>
    <p class="auth-sub">Securely manage your payment methods and approve requests from your device.</p>

    <%- include('../shared/_flash') %>
    <%- include('../shared/_errors') %>

    <form method="POST" action="/payer/register" class="auth-form" novalidate>
      <input type="hidden" name="_csrf" value="<%= csrfToken %>">

      <div class="field">
        <label for="fullName">Full name</label>
        <input
          type="text"
          id="fullName"
          name="fullName"
          value="<%= typeof values !== 'undefined' && values.fullName ? values.fullName : '' %>"
          autocomplete="name"
          required
          autofocus
        >
      </div>

      <div class="field">
        <label for="email">Email</label>
        <input
          type="email"
          id="email"
          name="email"
          value="<%= typeof values !== 'undefined' && values.email ? values.email : '' %>"
          autocomplete="email"
          required
        >
      </div>

      <div class="field">
        <label for="phone">Mobile number <span class="field-hint">(optional, used for notifications)</span></label>
        <input
          type="tel"
          id="phone"
          name="phone"
          value="<%= typeof values !== 'undefined' && values.phone ? values.phone : '' %>"
          autocomplete="tel"
          placeholder="+1 555 000 0000"
        >
      </div>

      <div class="field">
        <label for="password">Password <span class="field-hint">(min 8 characters)</span></label>
        <input type="password" id="password" name="password" autocomplete="new-password" required minlength="8">
      </div>

      <div class="field">
        <label for="confirmPassword">Confirm password</label>
        <input type="password" id="confirmPassword" name="confirmPassword" autocomplete="new-password" required minlength="8">
      </div>

      <div class="field field--checkbox">
        <input type="checkbox" id="terms" name="terms" value="on" required>
        <label for="terms">I agree to the <a href="#" target="_blank">Terms of Service</a> and <a href="#" target="_blank">Privacy Policy</a></label>
      </div>

      <button type="submit" class="btn btn-primary btn-block">Create account</button>
    </form>

    <p class="auth-footer-link">Already have an account? <a href="/payer/login">Sign in</a></p>
  </div>
</div>

<%- include('../shared/_foot', {}) %>
