{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="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg></div>
      <h2 class="asl-title">{jv:lang name='login_welcome_title' /}</h2>
      <p class="asl-subtitle">{jv:lang name='login_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"><circle cx="12" cy="12" r="10"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/><line x1="2" y1="12" x2="22" y2="12"/></svg></div>
  </div>
  <div class="auth-split-right">
    <div class="asr-header">
      <h1>{jv:lang name='login' /}</h1>
      <p>{jv:lang name='please_login' /}</p>
    </div>
    <form class="auth-form" method="post" action="{jv:url}user/login">
      <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='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="current-password" oninvalid="this.setCustomValidity('{jv:lang name='fill_this_field' /}')" oninput="this.setCustomValidity('')" placeholder="{jv:lang name='password' /}">
        </div>
      </div>
      <div class="auth-options">
        <label><input type="checkbox" name="remember">{jv:lang name='remember_me' /}</label>
        <a href="{jv:url}user/forgot_password">{jv:lang name='forgot_password' /}</a>
      </div>
      <button type="submit" class="auth-btn">{jv:lang name='login' /}</button>
    </form>
    <div class="asr-footer">
      <span>{jv:lang name='no_account' /}</span><a href="{jv:url}user/register">{jv:lang name='go_register' /}</a>
    </div>
  </div>
</main>
{jv:include file='footer.html' /}