<main class="np-main np-box-container width-limit">
  <div class="login-wrapper">
    <h3 class="login-title">
      <span class="lang-en">Create an account</span>
      <span class="lang-de">Ein Konto erstellen</span>
      <span class="lang-es">Crear una cuenta</span>
      <span class="lang-fr">Créer un compte</span>
      <span class="lang-br">Criar uma conta</span>
    </h3>
    <form class="np-form np-box-content" action="{% route sign_up %}" method="post" novalidate>
      {% form_authenticity_token %}
      <div class="np-form-field">
        <svg class="login-icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M6.50122 4C6.50122 2.61929 7.62051 1.5 9.00122 1.5C10.3819 1.5 11.5012 2.61929 11.5012 4C11.5012 5.38071 10.3819 6.5 9.00122 6.5C7.62051 6.5 6.50122 5.38071 6.50122 4ZM9.00122 0C6.79208 0 5.00122 1.79086 5.00122 4C5.00122 6.20914 6.79208 8 9.00122 8C11.2104 8 13.0012 6.20914 13.0012 4C13.0012 1.79086 11.2104 0 9.00122 0ZM2.31048 16.3512C2.74945 13.0485 5.57834 10.5 9.00125 10.5C12.4242 10.5 15.2531 13.0485 15.692 16.3512C15.6962 16.3824 15.6892 16.4085 15.6616 16.4373C15.6297 16.4705 15.5735 16.5 15.5013 16.5H2.50125C2.42899 16.5 2.37284 16.4705 2.34095 16.4373C2.31331 16.4085 2.30634 16.3824 2.31048 16.3512ZM9.00125 9C4.81636 9 1.36029 12.1153 0.82356 16.1536C0.682168 17.2174 1.56565 18 2.50125 18H15.5013C16.4369 18 17.3203 17.2174 17.1789 16.1536C16.6422 12.1153 13.1861 9 9.00125 9Z" fill="#192435"/>
        </svg>
        <input
          class="np-input"
          autofocus="autofocus"
          type="text"
          name="learner[first_name]"
          id="learner_first_name"
          placeholder="First name"
        >
      </div>
      <div class="np-form-field">
        <svg class="login-icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M6.50122 4C6.50122 2.61929 7.62051 1.5 9.00122 1.5C10.3819 1.5 11.5012 2.61929 11.5012 4C11.5012 5.38071 10.3819 6.5 9.00122 6.5C7.62051 6.5 6.50122 5.38071 6.50122 4ZM9.00122 0C6.79208 0 5.00122 1.79086 5.00122 4C5.00122 6.20914 6.79208 8 9.00122 8C11.2104 8 13.0012 6.20914 13.0012 4C13.0012 1.79086 11.2104 0 9.00122 0ZM2.31048 16.3512C2.74945 13.0485 5.57834 10.5 9.00125 10.5C12.4242 10.5 15.2531 13.0485 15.692 16.3512C15.6962 16.3824 15.6892 16.4085 15.6616 16.4373C15.6297 16.4705 15.5735 16.5 15.5013 16.5H2.50125C2.42899 16.5 2.37284 16.4705 2.34095 16.4373C2.31331 16.4085 2.30634 16.3824 2.31048 16.3512ZM9.00125 9C4.81636 9 1.36029 12.1153 0.82356 16.1536C0.682168 17.2174 1.56565 18 2.50125 18H15.5013C16.4369 18 17.3203 17.2174 17.1789 16.1536C16.6422 12.1153 13.1861 9 9.00125 9Z" fill="#192435"/>
        </svg>
        <input
          class="np-input"
          type="text"
          name="learner[last_name]"
          id="learner_last_name"
          placeholder="Last name"
        >
      </div>
      <div class="np-form-field">
        <svg class="login-icon" width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M2.86705 1.75L8.1471 6.67805C8.62736 7.12629 9.37264 7.12629 9.8529 6.67805L15.1329 1.75H2.86705ZM16.25 2.75925L10.8764 7.77463C9.81981 8.76076 8.1802 8.76076 7.12363 7.77463L1.75 2.75925V12C1.75 12.1381 1.86193 12.25 2 12.25H16C16.1381 12.25 16.25 12.1381 16.25 12V2.75925ZM0.25 2C0.25 1.0335 1.0335 0.25 2 0.25H16C16.9665 0.25 17.75 1.0335 17.75 2V12C17.75 12.9665 16.9665 13.75 16 13.75H2C1.0335 13.75 0.25 12.9665 0.25 12V2Z" fill="#192435"/>
        </svg>
        <input
          class="np-input"
          autofocus="autofocus"
          type="email"
          name="learner[email]"
          id="learner_email"
          placeholder="Work email"
        >
      </div>
      <div class="np-form-field">
        <svg class="login-icon" width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M8 1.75C6.20507 1.75 4.75 3.20507 4.75 5V6.25H11.25V5C11.25 3.20507 9.79493 1.75 8 1.75ZM12.75 6.25V5C12.75 2.37665 10.6234 0.25 8 0.25C5.37665 0.25 3.25 2.37665 3.25 5V6.25H2C1.0335 6.25 0.25 7.0335 0.25 8V16C0.25 16.9665 1.0335 17.75 2 17.75H14C14.9665 17.75 15.75 16.9665 15.75 16V8C15.75 7.0335 14.9665 6.25 14 6.25H12.75ZM2 7.75C1.86193 7.75 1.75 7.86193 1.75 8V16C1.75 16.1381 1.86193 16.25 2 16.25H14C14.1381 16.25 14.25 16.1381 14.25 16V8C14.25 7.86193 14.1381 7.75 14 7.75H2ZM5.75 12C5.75 10.7574 6.75736 9.75 8 9.75C9.24264 9.75 10.25 10.7574 10.25 12C10.25 13.2426 9.24264 14.25 8 14.25C6.75736 14.25 5.75 13.2426 5.75 12ZM8 11.25C7.58579 11.25 7.25 11.5858 7.25 12C7.25 12.4142 7.58579 12.75 8 12.75C8.41421 12.75 8.75 12.4142 8.75 12C8.75 11.5858 8.41421 11.25 8 11.25Z" fill="#192435"/>
        </svg>
        <input
          class="np-input"
          type="password"
          name="learner[password]"
          id="learner_password"
          placeholder="Password"
        >
      </div>
      <button type="submit" class="button-1 button-large np-form-action">
        {% t shared.sign_up %}
      </button>
      <span class="np-form-terms">
        <span class="lang-en">By submitting this form you agree to the </span>
        <span class="lang-de">Mit dem Absenden dieses Formulars erklären Sie sich mit den </span>
        <span class="lang-es">Al enviar este formulario acepta las </span>
        <span class="lang-fr">En soumettant ce formulaire, vous acceptez les </span>
        <span class="lang-br">Ao enviar este formulário, você concorda com os </span>
        <a class="np-form-link"
          target="_blank"
          href="{{ current_school.terms_of_service_url }}"
        >
          <span class="lang-en">Terms of Use</span>
          <span class="lang-de">Nutzungsbedingungen</span>
          <span class="lang-es">Condiciones de uso</span>
          <span class="lang-fr">conditions d'utilisation</span>
          <span class="lang-br">Termos de Uso</span>
        </a>
        <<span class="lang-de"> einverstanden</span>
      </span>
      <span class="np-form-terms" style="margin-top: 30px;">
        <span class="lang-en">Already have an account? </span>
        <span class="lang-de">Sie haben bereits einen Account?</span>
        <span class="lang-es">¿Ya tienes una cuenta?</span>
        <span class="lang-fr">Vous avez déjà un compte ?</span>
        <span class="lang-br">Já tem uma conta?</span>
        <a class="np-form-link"
            href="/learners/sign_in"
        >
          <span class="lang-en">Log in</span>
          <span class="lang-de">Einloggen</span>
          <span class="lang-es">Conectarse</span>
          <span class="lang-fr">Connexion</span>
          <span class="lang-br">Entrar</span>
        </a>
      </span>
    </form>
  </div>
</main>

{% include 'footer' %}

<style>
  .login-wrapper {
    padding: 40px;
    border: 2px solid #E4E6E9;
    border-radius: 4px;
    margin-top: 80px;
    margin-bottom: 80px;
  }
  .login-title {
    text-align: center;
    margin-bottom: 40px;
  }
  .np-input {
    background: none;
    border: none;
    border-radius: 0;
  }
  .np-form-field {
    display: flex;
    align-items: center;
    border-bottom: 2px solid #E4E6E9;
  }
  .login-icon {
    margin-left: 20px;
  }
  footer.main-footer .footer-links {
    display: none;
  }
  .np-box-container {
    height: unset;
  }
  .np-form-terms a {
    color: #0D68C5;
  }
  .np-form-terms a:hover {
    color: #0D68C5;
    text-decoration: underline;
  }
</style>

<script>
  addEventListener('DOMContentLoaded', () => {
    switch (window.localStorage.getItem('academy-language')) {
      case 'en':
        break;
      case 'de':
        document.querySelector('#learner_first_name').setAttribute('placeholder', 'Vorname');
        document.querySelector('#learner_last_name').setAttribute('placeholder', 'Nachname');
        document.querySelector('#learner_email').setAttribute('placeholder', '');
        document.querySelector('#learner_password').setAttribute('placeholder', 'Passwort');
        break;
      case 'es':
        document.querySelector('#learner_first_name').setAttribute('placeholder', 'Nombre de pila');
        document.querySelector('#learner_last_name').setAttribute('placeholder', 'Apellidos');
        document.querySelector('#learner_email').setAttribute('placeholder', '');
        document.querySelector('#learner_password').setAttribute('placeholder', 'Contraseña');
        break;
      case 'fr':
        document.querySelector('#learner_first_name').setAttribute('placeholder', 'Prénom');
        document.querySelector('#learner_last_name').setAttribute('placeholder', 'Nom de famille');
        document.querySelector('#learner_email').setAttribute('placeholder', '');
        document.querySelector('#learner_password').setAttribute('placeholder', 'Mot de passe');
        break;
      case 'br':
        document.querySelector('#learner_first_name').setAttribute('placeholder', 'Nome');
        document.querySelector('#learner_last_name').setAttribute('placeholder', 'Sobrenome');
        document.querySelector('#learner_email').setAttribute('placeholder', '');
        document.querySelector('#learner_password').setAttribute('placeholder', 'Senha');
        break;
    }
  })
</script>