{% assign courses_in_progress = 0 %}
{% assign courses_completed = 0 %}
{% assign certificates = 0 %}
{% assign webinars = 0 %}

{% for course in courses.enrolled %}
  {% if course.progress > 0 and course.progress < 100 %}
    {% assign courses_in_progress = courses_in_progress |  plus: 1 %}
  {% endif %}
  {% if course.progress == 100 %}
      {% assign courses_completed = courses_completed | plus: 1 %}
  {% endif %}
{% endfor %}

{% for learning_path in learning_paths.enrolled %}
  {% if learning_path.completed? and learning_path.has_certificate? %}
    {% assign certificates = certificates |  plus: 1 %}
  {% endif %}
{% endfor %}

{% for training_event in training_events.available %}
  {% assign webinars = webinars |  plus: 1 %}
{% endfor %}

{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.featured %}
<main class="np-main np-homepage">
  <div class="homepage-hero-container np-max-width ">
    <div class="hero-text-container">
      <div class="hero-heading lang-en">
        Hi {% if current_person.first_name %}
  {{ current_person.first_name }}!
{% else %}
  there!
{% endif %}
      </div>
      <div class="hero-heading lang-de">
        Hallo {% if current_person.first_name %}
  {{ current_person.first_name }}!
{% else %}
  there!
{% endif %}
      </div>
      <div class="hero-subheading lang-en">
        Welcome to the DeepL Academy, your one-stop hub to master</br>all products and features on our Language AI platform.
      </div>
      <div class="hero-subheading lang-de">
        Willkommen bei der DeepL Academy. Dies ist Ihre zentrale Anlaufstelle<br> für alle Produkte und Funktionen unserer Sprach-KI-Plattform.</br>
      </div>
      <div class="hero-buttons-wrapper">
        <a href="#recommended-section" class="dark-btn lang-en">Start learning</a>
        <a href="#recommended-section" class="dark-btn lang-de">Mit dem Lernen beginnen</a>
      </div>
      
      <div class="progress-wrapper">
        <div class="progress border-right">
          <i class="fas fa-circle progress-circle"></i>
          <span>{{courses_in_progress}}</span>
          <span class="lang-en">in progress</span>
          <span class="lang-de">In Arbeit</span>
        </div>
        <div class="progress border-right">
          <i class="fas fa-circle completed-circle"></i>
          <span>{{courses_completed}}</span>
          <span class="lang-en">completed</span>
          <span class="lang-de">Abgeschlossen</span>
        </div>
        <div class="progress">
          <i class="fas fa-circle cert-circle"></i>
          <span>{{certificates}}</span>
          <span class="lang-en">certificates</span>
          <span class="lang-de">Zertifikate</span>
        </div>
      </div>
    </div>
    <div class="hero-image-container">
        <img class="hero-img" src="https://s3.amazonaws.com/static.northpass.com/DeepL/images/hero-image.png" alt="">
    </div>
  </div>
  <div class="np-homepage-featured np-max-width page-spacing">
    <section>
      {% include "recommended" %}
    </section>
    <section>
      {% include "popular" %}
    </section>
    {% if webinars > 0 %}
      <section>
        {% include "webinars" %}
      </section>
    {% endif %}
    {% comment %} <section>
      {% include "banner" %}
    </section> {% endcomment %}
  </div>
</main>
{% include "footer" %}

<style>
.homepage-hero-container {
  display: flex;
  padding: 50px 40px;
  align-items: center;
}
.hero-image-container {
  flex-basis: 50%;
}
.hero-text-container {
  flex-basis: 50%;
}
.hero-buttons-wrapper {
  display: flex;
  gap: 20px;
}
.progress-wrapper {
  display: flex;
  background: #f8f8f8;
  margin-top: 30px;
  width: fit-content;
  border-radius: 8px;
}
.progress {
  padding: 10px;
  display: flex;
  gap: 5px;
}
.progress-circle {
  color: #ffe76a;
}
.completed-circle {
  color: #6cf1c9;
}
.cert-circle {
  color: #a89cff;
}
.hero-img {
  width: 100%;
  max-width: 600px;
}

@media only screen and (max-width: 900px) {
  .homepage-hero-container {
    flex-direction: column-reverse;
  }
  .hero-image-container, .hero-text-container {
    width: 100%;
  }
  .hero-image-container {
    display: flex;
    justify-content: center;
  }
}

</style>