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

<div class="dashboard-shell">
  <header class="dashboard-header">
    <div class="dashboard-brand">
      <span class="brand-name">BeezifiPay</span>
      <div class="portal-badge portal-badge--payer">Payer</div>
    </div>
    <nav class="dashboard-nav">
      <a href="/payer/dashboard" class="nav-link">My account</a>
      <a href="/payer/methods" class="nav-link">Payment methods</a>
      <a href="/payer/dashboard/scan" class="nav-link">Scan to Pay</a>
      <span class="nav-divider">·</span>
      <span class="nav-user"><%= payerAccount.fullName %></span>
      <form method="POST" action="/payer/logout" style="display:inline">
        <input type="hidden" name="_csrf" value="<%= csrfToken %>">
        <button type="submit" class="btn-link">Sign out</button>
      </form>
    </nav>
  </header>

  <main class="dashboard-main">
    <%- include('../shared/_flash') %>

    <div class="page-header">
      <div>
        <h1>Verify phone number</h1>
        <p class="text-muted">Add a verified phone number to your account for added security.</p>
      </div>
    </div>

    <% if (!smsEnabled) { %>
    <div class="banner banner--warn">
      <p>SMS verification is not configured in this environment. Contact the platform administrator.</p>
    </div>
    <% } else { %>

    <section class="org-section" style="max-width:480px">

      <% if (errors && errors.length) { %>
      <div class="banner banner--error" style="margin-bottom:var(--space-4)">
        <% for (const e of errors) { %><p><%= e %></p><% } %>
      </div>
      <% } %>

      <% if (step === 'send') { %>
      <h2>Enter your phone number</h2>
      <p class="text-muted">We'll send a 6-digit verification code to this number.</p>

      <form method="POST" action="/payer/verify-phone/send" class="auth-form">
        <input type="hidden" name="_csrf" value="<%= csrfToken %>">
        <div class="field">
          <label for="phone">Phone number <span class="required">*</span></label>
          <input type="tel" id="phone" name="phone"
                 value="<%= typeof values.phone !== 'undefined' ? values.phone : '' %>"
                 placeholder="+1 555 000 0000" required autofocus>
          <span class="field-hint">Include country code, e.g. +1 for US</span>
        </div>
        <div class="form-actions">
          <button type="submit" class="btn btn-primary">Send code</button>
          <a href="/payer/dashboard" class="btn btn-secondary">Cancel</a>
        </div>
      </form>

      <% } else if (step === 'confirm') { %>
      <h2>Enter your verification code</h2>
      <p class="text-muted">
        A 6-digit code was sent to <strong><%= values.phone %></strong>.
        It expires in 10 minutes.
      </p>

      <form method="POST" action="/payer/verify-phone/confirm" class="auth-form">
        <input type="hidden" name="_csrf" value="<%= csrfToken %>">
        <div class="field">
          <label for="code">Verification code <span class="required">*</span></label>
          <input type="text" id="code" name="code"
                 placeholder="123456" maxlength="6" pattern="\d{6}"
                 inputmode="numeric" autocomplete="one-time-code" required autofocus>
        </div>
        <div class="form-actions">
          <button type="submit" class="btn btn-primary">Verify</button>
          <a href="/payer/verify-phone" class="btn btn-secondary">Use a different number</a>
        </div>
      </form>
      <% } %>

    </section>
    <% } %>
  </main>
</div>

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