<div class="green-banner-wrapper homepage-banner">
  <div class="green-banner width-limit">
    <img class="homepage-banner-image" src="https://s3.amazonaws.com/static.northpass.com/pipedrive/homepage_banner.svg" alt="banner">
    <div class="green-banner-content">
      <h1 class="green-banner-title">
	<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">Welcome! We have saved your progress about <strong>courses</strong></span>
        <span class="lang-de">Willkommen! Wir haben Ihren Fortschritt bei den <strong>Kursen</strong> gespeichert</span>
        <span class="lang-es">Bienvenido Hemos guardado su progreso sobre los <strong>cursos</strong></span>
        <span class="lang-fr">Bienvenue ! Nous avons enregistré votre progression dans les <strong>cours</strong>.</span>
        <span class="lang-br">Seja bem-vindo(a)! Salvamos o seu progresso nos cursos</span>
      </div>
      <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>
    </div>
  </div>
</div>

<style>
  .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 (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>
