<%- 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">Sign in</h1>

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

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

      <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
          autofocus
        >
      </div>

      <div class="field">
        <label for="password">
          Password
          <a href="/payer/forgot-password" class="field-action">Forgot?</a>
        </label>
        <input type="password" id="password" name="password" autocomplete="current-password" required>
      </div>

      <div class="field field--checkbox">
        <input type="checkbox" id="rememberMe" name="rememberMe" value="on">
        <label for="rememberMe">Stay signed in for 30 days</label>
      </div>

      <button type="submit" class="btn btn-primary btn-block">Sign in</button>
    </form>

    <p class="auth-footer-link">New here? <a href="/payer/register">Create an account</a></p>
  </div>
</div>

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