<div class="green-banner-wrapper green-banner-wrapper-image">
  <div class="green-banner width-limit">
    <img class="green-banner-image" src="https://s3.us-east-1.amazonaws.com/static.northpass.com/pipedrive/images/1.webp" alt="banner">
    <div class="green-banner-content">
      <h1 class="green-banner-title fs-mask">
        <span class="lang-en">Hi {{ current_person.first_name }}!</span>
        <span class="lang-de">Hallo {{ current_person.first_name }}!</span>
        <span class="lang-es">¡Hola {{ current_person.first_name }}!</span>
        <span class="lang-fr">Bonjour {{ current_person.first_name }}!</span>
        <span class="lang-br">Oi {{ current_person.first_name }}!</span>
      </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">Encuentre los mejores cursos de formación, tutoriales en vídeo y seminarios web para dominar sus habilidades de CRM y ventas.</span>
        <span class="lang-fr">Trouvez les meilleures formations, tutoriels vidéo et webinaires pour maîtriser vos compétences en CRM et en vente.</span>
        <span class="lang-br">Encontre os melhores cursos de treinamento, tutoriais em vídeo e webinars para dominar suas habilidades de CRM e vendas.</span>
      </div>
      {% if current_person.signed_in? %}
        <div class="green-banner-search" data-fs-element="academy | embedded-search" data-location="academy/homepage" 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>
      {% endif %}
      {% if current_person.signed_in? %}
        {% if current_person.properties.group_selected == false %}
          <script>
            <!-- Script to redirect to the custom page --!>
          </script>
        {% endif %}
      {% endif %}
      {% comment %} <div class="homepage-banner-stats">
        {% assign in_progress = 0 %}
        {% assign not_started = 0 %}
        {% assign completed = 0 %}

        {% for course in courses.in_catalog %}
          {% if course.ribbon != 'VIDEO' %}
            {% if course.completed? %}
              {% assign completed = completed | plus: 1 %}
            {% elsif course.started? == false %}
              {% assign not_started = not_started | plus: 1 %}
            {% else %}
              {% assign in_progress = in_progress | plus: 1 %}
            {% endif %}
          {% endif %}
        {% endfor %}
        <div class="homepage-banner-stat">
          <div class="stat-dot" style="color: #FFCC00;">
            <i class="fas fa-circle"></i>
          </div>
          <div class="stat-number strong">
            {{ in_progress }}
          </div>
          <div class="stat-text body-s">
            <span class="lang-en">In progress</span>
            <span class="lang-de">In Arbeit</span>
            <span class="lang-es">En curso</span>
            <span class="lang-fr">En cours</span>
            <span class="lang-br">Em andamento</span>
          </div>
        </div>

        <div class="homepage-banner-stat">
          <div class="stat-dot" style="color: var(--purple);">
            <i class="fas fa-circle"></i>
          </div>
          <div class="stat-number strong">
            {{ not_started }}
          </div>
          <div class="stat-text body-s">
            <span class="lang-en">Not started</span>
            <span class="lang-de">Nicht gestartet</span>
            <span class="lang-es">No iniciado</span>
            <span class="lang-fr">Pas encore commencé</span>
            <span class="lang-br">Não iniciado</span>
          </div>
        </div>

        <div class="homepage-banner-stat">
          <div class="stat-dot" style="color:  var(--green);">
            <i class="fas fa-circle"></i>
          </div>
          <div class="stat-number strong">
            {{ completed }}
          </div>
          <div class="stat-text body-s">
            <span class="lang-en">Completed</span>
            <span class="lang-de">Abgeschlossen</span>
            <span class="lang-es">Completado</span>
            <span class="lang-fr">Complété</span>
            <span class="lang-br">Concluído</span>
          </div>
        </div>
      </div> {% endcomment %}
    </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;
  }
@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>
  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 = '';
    input.focus();
    updateState();
  });


  updateState();
</script>