<div class="login-widget-wrapper np-hidden">
  <div class="login-widget-background"></div>
  <div class="login-widget-window">
    <div class="login-widget">
      <h3 class="login-widget-title">
        <span class="lang-en">Learn for free</span>
        <span class="lang-de">Kostenloses 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; margin-bottom: 40px;">
        <a data-fs-element="academy | login-with-pipedrive" data-button-location="sso-widget"  data-fs-properties-schema='{"data-button-location":"str"}' class="button-1 button-large" href="/learners/sign_in">
          <span class="lang-en">Log in with Pipedrive</span>
          <span class="lang-de">Mit Pipedrive anmelden</span>
          <span class="lang-es">Iniciar sesión con Pipedrive</span>
          <span class="lang-fr">Se connecter avec Pipedrive</span>
          <span class="lang-br">Faça login com o Pipedrive</span>
        </a>
      </div>
			{% comment %}
      <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 yet?<br>Create a free account and access all our courses and videos</span>
            <span class="lang-de">Noch kein Pipedrive-Benutzer?<br>Erstellen Sie ein kostenloses Konto und erhalten Sie Zugriff auf alle unsere Kurse und Videos</span>
            <span class="lang-es">¿Aún no eres usuario de Pipedrive?<br>Crea una cuenta gratuita y accede a todos nuestros cursos y videos</span>
            <span class="lang-fr">Vous n'utilisez pas encore Pipedrive ?<br>Créez un compte gratuit et accédez à tous nos cours et vidéos</span>
            <span class="lang-br">Ainda não é usuário do Pipedrive?<br>Crie uma conta gratuita e acesse todos os nossos cursos e vídeos</span>
        </div>
      </div>
      <div style="display: flex">
        <a data-fs-element="academy | login-or-register" class="button-2 button-large" id="redirect-between-academies" href="https://user-learn.pipedrive.com/learners/sign_in">
          <span class="lang-en">Create account</span>
          <span class="lang-de">Konto erstellen</span>
          <span class="lang-es">Crear cuenta</span>
          <span class="lang-fr">Créer un compte</span>
          <span class="lang-br">Criar conta</span>
        </a>
      </div>
			{% endcomment %}
    </div>
  </div>
</div>

<style>
  .login-widget-wrapper {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 100;
  }
  .login-widget-background {
    background: rgba(25, 36, 53, 0.4);
    height: 100%;
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    z-index: 100;
  }
  .login-widget-window {
    background: #FFFFFF;
    border: 2px solid #E4E6E9;
    border-radius: 4px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 600px;
    z-index: 101;
  }
  .login-widget {
    padding: 40px;
  }
  .login-widget-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;
  }
</style>

<script>
  function toggleSsoWidget() {
    let widget = document.querySelector('.login-widget-wrapper');
    widget.classList.toggle('np-hidden');
    if (widget.classList.contains('np-hidden')) {
      window.onscroll = function () {};
    } else {
      window.onscroll = function () { window.scrollTo(0, 0); };
    }
  }

  addEventListener('DOMContentLoaded', () => {
    document.querySelector('.login-widget-background').addEventListener('click', () => {
      toggleSsoWidget();
    });
  });

  window.addEventListener('hashchange', () => {
    if (window.location.hash === '#sso-widget') {
      toggleSsoWidget();
      history.replaceState(null, null, ' ');
    }
  });
</script>
