{jv:include file='header.html' /}
<main class="auth-split">
  <div class="auth-split-left">
    <div class="asl-content">
      <div class="asl-logo"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" y1="8" x2="19" y2="14"/><line x1="22" y1="11" x2="16" y2="11"/></svg></div>
      <h2 class="asl-title">{jv:lang name='register_welcome_title' /}</h2>
      <p class="asl-subtitle">{jv:lang name='register_welcome_subtitle' /}</p>
      <ul class="asl-features">
        <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12l2 2 4-4"/><circle cx="12" cy="12" r="10"/></svg>{jv:lang name='auth_feature_1' /}</li>
        <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12l2 2 4-4"/><circle cx="12" cy="12" r="10"/></svg>{jv:lang name='auth_feature_2' /}</li>
        <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12l2 2 4-4"/><circle cx="12" cy="12" r="10"/></svg>{jv:lang name='auth_feature_3' /}</li>
      </ul>
    </div>
    <div class="asl-decoration"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" y1="8" x2="19" y2="14"/><line x1="22" y1="11" x2="16" y2="11"/></svg></div>
  </div>
  <div class="auth-split-right">
    <div class="asr-header">
      <h1>{jv:lang name='register' /}</h1>
      <p>{jv:lang name='please_register' /}</p>
    </div>
    <form class="auth-form" method="post" action="{jv:url}user/register">
      <div class="auth-field">
        <label>{jv:lang name='username' /}</label>
        <div class="auth-input-wrap">
          <svg class="auth-input-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
          <input name="username" type="text" required autocomplete="username" oninvalid="this.setCustomValidity('{jv:lang name='fill_this_field' /}')" oninput="this.setCustomValidity('')" placeholder="{jv:lang name='username' /}">
        </div>
      </div>
      <div class="auth-field">
        <label>{jv:lang name='email' /}</label>
        <div class="auth-input-wrap">
          <svg class="auth-input-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
          <input name="email" type="email" required autocomplete="email" oninvalid="this.setCustomValidity('{jv:lang name='fill_this_field' /}')" oninput="this.setCustomValidity('')" placeholder="{jv:lang name='email' /}">
        </div>
      </div>
      <div class="auth-field">
        <label>{jv:lang name='password' /}</label>
        <div class="auth-input-wrap">
          <svg class="auth-input-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
          <input name="password" type="password" required autocomplete="new-password" minlength="6" oninvalid="this.setCustomValidity('{jv:lang name='fill_this_field' /}')" oninput="this.setCustomValidity('')" placeholder="{jv:lang name='password' /}">
        </div>
      </div>
      <div class="auth-field">
        <label>{jv:lang name='confirm_password' /}</label>
        <div class="auth-input-wrap">
          <svg class="auth-input-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/><path d="M9 16l2 2 4-4"/></svg>
          <input name="confirm_password" type="password" required autocomplete="new-password" minlength="6" oninvalid="this.setCustomValidity('{jv:lang name='fill_this_field' /}')" oninput="this.setCustomValidity('')" placeholder="{jv:lang name='confirm_password' /}">
        </div>
      </div>
      <button type="submit" class="auth-btn">{jv:lang name='register' /}</button>
    </form>
    <div class="asr-footer">
      <span>{jv:lang name='has_account' /}</span><a href="{jv:url}user/login">{jv:lang name='go_login' /}</a>
    </div>
  </div>
</main>
{jv:include file='footer.html' /}