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

<div class="auth-shell">
  <div class="auth-card">
    <div class="auth-brand">
      <span class="brand-name">BeezifiPay</span>
      <div class="portal-badge portal-badge--merchant">Merchant</div>
    </div>

    <% if (state === 'pending') { %>

    <h1 class="auth-title">Join <%= orgName %></h1>
    <p class="auth-subtitle">You've been invited to join this organization as a team member.</p>

    <form method="POST" action="/merchant/organization/accept-invite" class="auth-form">
      <input type="hidden" name="_csrf" value="<%= csrfToken %>">
      <input type="hidden" name="token" value="<%= token %>">
      <button type="submit" class="btn btn-primary btn--full">Accept invitation</button>
    </form>

    <p class="auth-footer">
      <a href="/merchant/dashboard">Not now — go to dashboard</a>
    </p>

    <% } else if (state === 'invalid' || state === 'expired' || state === 'used' || state === 'error') { %>

    <h1 class="auth-title">Invitation unavailable</h1>
    <div class="banner banner--<%= state === 'used' ? 'info' : 'error' %>" role="alert">
      <%= message %>
    </div>
    <p class="auth-footer">
      <a href="/merchant/dashboard">Go to dashboard</a>
    </p>

    <% } %>
  </div>
</div>

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