{% include 'public/partials/header.html' %}
<main class="register-page-shell">
  <form class="register-wizard" data-register-wizard method="post" action="{{ $baseUrl }}/register">
    <input type="hidden" name="_token" value="{{ $csrfToken }}">
    <input type="hidden" name="avatar_color" value="#f0a500" data-avatar-value><input type="hidden" name="_shield_started" value="{{ $shieldStartedAt }}"><label class="shield-honeypot" aria-hidden="true">Leave this field empty<input name="website_confirm" tabindex="-1" autocomplete="off"></label>
    <div class="register-progress-track"><span data-register-progress></span></div>
    <div class="register-wizard-body">
      <div class="register-steps" aria-label="Registration progress"><div class="register-step active" data-register-indicator="1"><span class="register-step-icon">▤</span><b>Terms</b></div><span class="register-step-line"></span><div class="register-step" data-register-indicator="2"><span class="register-step-icon">♙</span><b>Account</b></div><span class="register-step-line"></span><div class="register-step" data-register-indicator="3"><span class="register-step-icon">☺</span><b>Profile</b></div><span class="register-step-line"></span><div class="register-step" data-register-indicator="4"><span class="register-step-icon">✓</span><b>Done</b></div></div>
      {% if $errorMessage %}<div class="form-error register-server-error">{{ $errorMessage }}</div>{% endif %}
      <section class="register-panel active" data-register-panel="1"><header class="register-panel-head"><h1>Terms of Service</h1><p>Please read and agree before creating your account.</p></header><div class="register-terms-box"><p><strong>1. ELIGIBILITY</strong><br>You must be at least 13 years of age to use this service.</p><p><strong>2. ACCOUNT RESPONSIBILITY</strong><br>You are responsible for maintaining the confidentiality of your account credentials.</p><p><strong>3. ACCEPTABLE USE</strong><br>You agree not to post unlawful, harmful, threatening, or abusive content. Spam is strictly prohibited.</p><p><strong>4. MODERATION</strong><br>Staff reserve the right to edit or remove content that violates these terms.</p></div><label class="register-agreement"><input type="checkbox" name="terms" value="1" data-register-agree><span class="register-checkbox" aria-hidden="true">✓</span><span>I have read and agree to the <a href="#">Terms of Service</a> and <a href="#">Community Rules</a>.</span></label><div class="register-actions right"><button class="register-primary" type="button" data-register-next disabled>Continue <span>›</span></button></div></section>
      <section class="register-panel" data-register-panel="2"><header class="register-panel-head"><h1>Create Your Account</h1></header><div class="register-fields"><label><span>Username</span><div class="register-input-wrap"><i>♙</i><input name="username" type="text" minlength="3" maxlength="40" required placeholder="e.g. stargazer_42" data-register-username></div></label><label><span>Email</span><div class="register-input-wrap"><i>✉</i><input name="email" type="email" required placeholder="you@example.com" data-register-email></div></label><label><span>Password</span><div class="register-input-wrap"><i>⌑</i><input name="password" type="password" minlength="8" required placeholder="Create a strong password" data-register-password></div></label><div class="register-password-strength" aria-label="Password strength"><span></span><span></span><span></span><span></span></div></div><div class="register-actions"><button class="register-back" type="button" data-register-back>‹ Back</button><button class="register-primary" type="button" data-register-next disabled>Continue <span>›</span></button></div></section>
      <section class="register-panel" data-register-panel="3"><header class="register-panel-head"><h1>Set Up Your Profile</h1><p>Choose your initial avatar colour. You can change it later.</p></header><div class="register-profile-preview"><div class="register-avatar" data-register-avatar>?</div><div><strong data-register-preview-name>New member</strong><span>New Member</span><small>Choose your avatar colour:</small><div class="register-swatches"><button type="button" data-avatar-color="#f0a500" style="--swatch:#f0a500"></button><button type="button" data-avatar-color="#60a5fa" style="--swatch:#60a5fa"></button><button type="button" data-avatar-color="#34d399" style="--swatch:#34d399"></button><button type="button" data-avatar-color="#c084fc" style="--swatch:#c084fc"></button><button type="button" data-avatar-color="#f87171" style="--swatch:#f87171"></button><button type="button" data-avatar-color="#fb923c" style="--swatch:#fb923c"></button></div></div></div>{% if $shieldChallengeRequired %}<section class="nexus-shield-box register-shield" data-shield-box data-action="register"><div class="shield-head"><span class="shield-mark">◆</span><div><b>NexusShield verification</b><small>This challenge is generated and verified entirely by NexusForum.</small></div></div><p class="shield-question" data-shield-question>{{ $shieldChallenge['question'] }}</p><input type="hidden" name="_shield_token" value="{{ $shieldChallenge['token'] }}" data-shield-token><div class="shield-answer-row"><input class="input" name="_shield_answer" required autocomplete="off" placeholder="Your answer"><button type="button" class="shield-refresh" data-shield-refresh>New challenge</button></div></section>{% endif %}<div class="register-actions"><button class="register-back" type="button" data-register-back>‹ Back</button><button class="register-primary" type="submit">Create Account <span>›</span></button></div></section>
      <section class="register-panel register-complete" data-register-panel="4"><div class="register-success-icon">✓</div><h1>Welcome aboard!</h1></section>
    </div>
  </form><p class="register-signin" data-register-signin>Already have an account? <a href="{{ $baseUrl }}/login">Sign in</a></p>
</main>{% include 'public/partials/footer.html' %}