<main class="np-main np-box-container width-limit">
  <div class="login-wrapper">
    <h3 class="login-title">
      <span class="lang-en">Learn for free</span>
      <span class="lang-de">Kostenlos Lernen</span>
      <span class="lang-es">Aprender gratis</span>
      <span class="lang-fr">Apprendre gratuitement</span>
      <span class="lang-br">Aprenda de graça</span>
    </h3>
    <div style="display: flex;">
      <a class="button-1 button-large" style="margin-bottom: 40px" href="https://learn.pipedrive.com/learners/sign_in">
        <span class="lang-en">Log in with Pipedrive</span>
        <span class="lang-de">Anmelden mit Pipedrive</span>
        <span class="lang-es">Iniciar sesión con Pipedrive</span>
        <span class="lang-fr">Se connecter avec Pipedrive</span>
        <span class="lang-br">Entrar com Pipedrive</span>
      </a>
    </div>
    <div class="login-text-wrapper">
      <div class="login-text-strike"></div>
      <div class="login-text body-s">
        <span class="lang-en">Not a Pipedrive user?<br>Create a free account to access courses</span>
        <span class="lang-de">Sie sind kein Pipedrive-Nutzer?<br>Erstellen Sie einen kostenlosen Account für den Zugriff auf unsere Kurse</span>
        <span class="lang-es">¿No eres usuario de Pipedrive?<br>Crea una cuenta gratuita para acceder a los cursos</span>
        <span class="lang-fr">Vous n'utilisez pas encore Pipedrive ?<br>Créez un compte gratuit pour accéder aux cours</span>
        <span class="lang-br">Não é usuário(a) do Pipedrive?<br>Crie uma conta gratuita para acessar os cursos</span>
      </div>
    </div>
    <form class="np-form np-box-content" action="{% route login %}" method="post" novalidate>
      {% form_authenticity_token %}
      <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"
        >
        <a class="forgotten-password body-s" href="{% route forgot_password_new %}">
          <span class="lang-en">Forgot?</span>
          <span class="lang-de">Vergessen?</span>
          <span class="lang-es">¿Lo has olvidado?</span>
          <span class="lang-fr">Vous avez oublié ?</span>
          <span class="lang-br">Esqueceu?</span>
        </a>
      </div>
      <button type="submit" class="button-2 button-large np-form-action">
        <span class="lang-en">Sign In</span>
        <span class="lang-de">Anmelden</span>
        <span class="lang-es">Iniciar sesión</span>
        <span class="lang-fr">Se connecter</span>
        <span class="lang-br">Entrar</span>
      </button>
      {% if features.account_creation? %}
        <a class="np-form-link np-button-color" href="{% route sign_up %}">
          <span class="lang-en">Sign Up</span>
          <span class="lang-de">Registrieren</span>
          <span class="lang-es">Inscribirse</span>
          <span class="lang-fr">S'inscrire</span>
          <span class="lang-br">Cadastre-se</span>
        </a>
      {% endif %}
      {% if features.request_access? %}
        <a
          class="np-form-link np-button-color"
          target="_blank"
          href="{{ current_school.request_access_link }}"
        >
          {{ current_school.request_access_label }}
        </a>
      {% endif %}
    </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;
  }
  .login-text-wrapper {
    position: relative;
    margin-bottom: 40px;
  }
  .login-text {
    background: white;
    width: fit-content;
    margin: auto;
    padding: 0 10px;
    max-width: 80%;
    text-align: center;
  }
  .login-text-strike {
    border-bottom: 1px solid #E4E6E9;
    position: absolute;
    top: 50%;
    width: 100%;
    height: 1px;
    z-index: -1;
  }
  .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;
  }
  .forgotten-password {
    color: #656E7A;
  }
  .np-form-link {
     color: #0D68C5;
   }
  .np-form-link:hover {
    color: #0D68C5;
    text-decoration: underline;
  }
</style>

<script>
  addEventListener('DOMContentLoaded', () => {
    switch (window.localStorage.getItem('academy-language')) {
      case 'en':
        break;
      case 'de':
        document.querySelector('#learner_email').setAttribute('placeholder', 'Berufliche E-Mail-Adresse');
        document.querySelector('#learner_password').setAttribute('placeholder', 'Passwort');
        break;
      case 'es':
        document.querySelector('#learner_email').setAttribute('placeholder', 'Correo electrónico del trabajo');
        document.querySelector('#learner_password').setAttribute('placeholder', 'Contraseña');
        break;
      case 'fr':
        document.querySelector('#learner_email').setAttribute('placeholder', 'Adresse e-mail pro');
        document.querySelector('#learner_password').setAttribute('placeholder', 'Mot de passe');
        break;
      case 'br':
        document.querySelector('#learner_email').setAttribute('placeholder', 'E-mail de trabalho');
        document.querySelector('#learner_password').setAttribute('placeholder', 'Senha');
        break;
    }
  })
</script>
