{layout layout}
<section class="auth-page">
  <div class="container auth-card">
    <h1 class="auth-title">{lang home.register_title}</h1>
    <p class="auth-desc">{lang home.register_desc}</p>
    {if !empty($flash.message)}
    <div class="form-alert form-alert-{$flash.type}">{$flash.message}</div>
    {/if}
    <form class="auth-form" action="{$entry_prefix}/register" method="post" autocomplete="on">
      <input type="hidden" name="_token" value="{$csrf}">
      {if !empty($invite_only)}
      <div class="form-group">
        <label class="form-label" for="invite">Invite code</label>
        <input class="form-input" id="invite" name="invite" type="text" required value="{$invite}" placeholder="This site uses invite-only registration，Enter your invite code">
      </div>
      {elseif !empty($invite)}
      <input type="hidden" name="invite" value="{$invite}">
      {/if}
      <div class="form-group">
        <label class="form-label" for="username">{lang common.username}</label>
        <input class="form-input" id="username" name="username" type="text" required minlength="3" maxlength="30" autocomplete="username" placeholder="{lang home.register_username_ph}">
        <span class="form-tips">{lang home.register_username_tip}</span>
      </div>
      <div class="form-group">
        <label class="form-label" for="email">{lang common.email}</label>
        <input class="form-input" id="email" name="email" type="email" required autocomplete="email" placeholder="{lang home.register_email_ph}">
      </div>
      <div class="form-group">
        <label class="form-label" for="password">{lang common.password}</label>
        <input class="form-input" id="password" name="password" type="password" required minlength="8" autocomplete="new-password" placeholder="{$policy_hint}">
        <span class="form-tips">{$policy_hint}</span>
      </div>
      <div class="form-group">
        <label class="form-label" for="password_confirm">{lang home.confirm_password}</label>
        <input class="form-input" id="password_confirm" name="password_confirm" type="password" required minlength="8" autocomplete="new-password" placeholder="{lang home.register_confirm_ph}">
      </div>
      {if !empty($need_captcha)}
      <div class="form-group">
        <label class="form-label" for="captcha">Captcha</label>
        <div class="auth-captcha">
          <input class="form-input" id="captcha" name="captcha" type="text" required maxlength="6" autocomplete="off" placeholder="Enter the characters shown">
          <img src="{$entry_prefix}/api/captcha" alt="Captcha" onclick="this.src='{$entry_prefix}/api/captcha{$q_sep}t='+Date.now()" title="Click to refresh">
        </div>
      </div>
      {/if}
      <button class="btn btn-primary btn-block btn-lg" type="submit">{lang common.register}</button>
    </form>
    <p class="auth-alt">{lang home.has_account} <a href="{$entry_prefix}/login">{lang home.go_login}</a></p>
  </div>
</section>