<div class="green-banner-wrapper green-banner-wrapper-image">
  <div class="green-banner width-limit">
    <img class="green-banner-image" alt="banner image" src="https://s3.us-east-1.amazonaws.com/static.northpass.com/pipedrive/images/1.webp">
    <div class="green-banner-content">
      <h1 class="green-banner-title">
        <span class="lang-en">Hi</span>
        <span class="lang-de">Hallo</span>
        <span class="lang-es">Hola</span>
        <span class="lang-fr">Salut</span>
        <span class="lang-br">Oi</span>
        {{current_person.first_name}}!
      </h1>
    <div class="green-banner-text">
        <span class="lang-en">Find the best training courses, video tutorials and webinars to master your CRM and sales skills.</span>
        <span class="lang-de">Finden Sie die besten Schulungskurse, Video-Tutorials und Webinare, um Ihre CRM- und Vertriebsfähigkeiten zu meistern.</span>
        <span class="lang-es">Encuentra los mejores cursos de formación, tutoriales en vídeo y seminarios web para dominar tu CRM y tus habilidades de ventas.</span>
        <span class="lang-fr">Trouvez les meilleures formations, vidéos tutoriels et webinaires pour maîtriser votre CRM et vos compétences commerciales.</span>
        <span class="lang-br">Encontre os melhores cursos de treinamento, tutoriais em vídeo e webinars para dominar seu CRM e suas habilidades em vendas.</span>
    </div>
    <div class="green-banner-search" data-fs-element="academy | embedded-search" data-location="academy/banner" data-fs-properties-schema='{"data-location":"str"}'>
      <form action="{% route search %}" method="get" data-test="desktop-search" class="banner-search-form">
        <input aria-label="{% t .search %}" class="banner-search-input" type="text" name="q" placeholder="Search Pipedrive Academy">
        <i class="banner-search-icon fal fa-search" aria-hidden="true"></i>
        <button type="button" class="clear-btn" aria-label="Clear input">
          <img class="close-icon" src="https://s3.us-east-1.amazonaws.com/static.northpass.com/pipedrive/close.svg" alt="">
        </button>
      </form>
    </div>

    </div>
  </div>
</div>

<style>
  .banner-search-input:focus-visible {
      outline: 2px solid #017737;
      border-radius: 100px;
  }
  .banner-search-form {
    max-width: 530px;
    position: relative;
  }
  .banner-search-icon {
    position: absolute;
    right: 0;
    top: 50%;
  }
  .banner-search-icon {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: 17.5px;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
  .banner-search-input  {
    max-width: 530px;
    width: 100%;
    border-radius: 100px;
    border: none;
    height: 50px;
    padding: 0 22px 0 44px;
  }

  .clear-btn {
  position: absolute;
  right: 20px;
  top: 0;
  height: 100%;
  padding-left: 17.5px;
  background: none;
  border: none;
  cursor: pointer;
  display: none; 
  align-items: center;
  justify-content: center;
  color: #999;
}
.close-icon {
  width: 100%;
}
  .homepage-banner-image {
    width: 100%;
  }
  .homepage-banner-stat {
    background: #FFF;
    margin-bottom: 10px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    border-radius: 4px;
    width:100%;
  }
  .homepage-banner-stat > div {
    text-align: center;
    margin-right: 8px;
  }
  .stat-dot {
    font-size: 8px;
  }

  .homepage-banner-stat .stat-number {
    font-size: 18px;
    line-height: 30px;
  }

  .homepage-banner-stat .stat-text {
    font-size: 14px;
    line-height: 25px;
  }
  .banner-search-form {
    max-width: 530px;
  }
@media only screen and (max-width: 768px) {
   .banner-search-input, .banner-search-form  {
    max-width: 100%;
  }
}
  @media only screen and (min-width: 768px) {
    .homepage-banner .green-banner {
      padding-bottom: 0;
      overflow: clip;
    }
    .homepage-banner .green-banner-title  {
      word-break: break-word;
    }
    .homepage-banner .green-banner {
      display: flex;
      flex-direction: row-reverse;
      justify-content: space-between;
    }
    .homepage-banner .green-banner-content {
      padding-bottom: 40px;
      align-self: center;
    }
    .homepage-banner-image {
      height: 250px;
      align-self: end;
      object-fit: contain;
      width: auto;
      margin-right: -10%;
    }
  }
  @media only screen and (min-width: 880px) {
    .homepage-banner-image {
      height: 300px;
    }
  }
  @media only screen and (min-width: 1200px) {
    .homepage-banner-image {
      margin-right: -5%;
      height: 350px;
    }
    .homepage-banner .green-banner-content {
      flex: 1 1 0px;
      width: 0;
    }
    .homepage-banner-stats {
      display: flex;
      gap: 20px;
    }
    .homepage-banner-stat {
      margin-bottom: 0;
    }
  }
  @media only screen and (min-width: 1400px) {
    .homepage-banner-image {
      margin-right: 0;
      height: 100%;
    }
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const searchParam = new URLSearchParams(window.location.search);
    const searchQuery = searchParam.get('q');
    const searchInput = document.querySelector('.banner-search-input');

    if (searchParam.has('q')) {
      const searchInput = document.querySelector('.banner-search-input');
      if (searchInput) {
        searchInput.value = searchParam.get('q');
      }
    }

    if (searchInput) {
      searchInput.addEventListener('focus', function() {
        this.placeholder = '';
      });
      searchInput.addEventListener('blur', function() {
        this.placeholder = 'Search Pipedrive Academy';
      });
    }

      const input = document.querySelector('.banner-search-input');
  const icon = document.querySelector('.banner-search-icon');
  const clearBtn = document.querySelector('.clear-btn');

  function updateState() {
    const hasValue = input.value.trim().length > 0;

    icon.style.display = hasValue ? 'none' : 'flex';
    clearBtn.style.display = hasValue ? 'flex' : 'none';

    if (hasValue) {
       input.focus();
    } 
  }

  input.addEventListener('input', updateState);

  clearBtn.addEventListener('click', () => {
    input.value = '';
    window.location.href = '/app';
    input.focus();
    updateState();
  });


  updateState();
  });

</script>