{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.enrolled %}
{% assign enrolled_courses = courses.enrolled %}
{% include "sub_navigation" %}
<section class="dashboard-stats-section">
  <div class="dashboard-stats-section-container">
    <div class="dashboard-stats-section-top">
      <div class="stats-top-heading-container">
        <div class = "stats-top-heading">My Dashboard</div>
      </div>
    </div>
    <div class="dashboard-stats-section-bottom">
      <div class="stats-section-bottom-left-container">
        <div class="stats-left-text-container">
          <div class="stats-left-container-heading">Hi {{ current_person.first_name }}</div>
          <div class="stats-left-container-sub-heading">This is what's relevant to you right now in Lighthouse.</div>
          <div class="stats-left-container-description">Lighthouse believes that continuous learning changes your mindset by building on what you already know. Through learning, you will gain a better understanding of the same situation from a different perspective. You’ve come this far in your Lighthouse journey, so take some time to continue the courses you’ve started below and see how far you’ve come!</div>
        </div>
      </div>
      <div class="stats-section-bottom-right-container">
        <div class="stats-right-text-container">
          {% include "widget_course_progress" %}
        </div>
      </div>
    </div>
  </div>
</section>
<main class="np-main np-dashboard ">
  <div class="np-carousel-section np-max-width">
    <div class="row np-flex-center" id="in-progress">
      <div class="col-xs-12">
          {% comment %} {% include "courses_index", class: "col-xs-12 col-sm-6 np-stretch-content" %} {% endcomment %}
        <div class="dashboard-carousel dashboard-in-progress">
          {% capture carousel_heading %}Courses in Progress{% endcapture %}
          {% assign carousel_see_all_link = "/app/in-progress-page" %}
          {% include
            "carousel_courses",
            progress: "in-progress",
            category: "any",
            heading: carousel_heading,
            see_all_link: carousel_see_all_link,
            enrolled_courses: enrolled_courses
          %}
        </div>
      {%comment%}
      Events curently needs to be hidden 
      {% if features.training_events? %}
        <div class="carousel-heading-text">
          Upcoming Events
        </div>
        {% include "training_events_dashboard" %}
      {% endif %}
      {%endcomment%}
      </div>
    </div>
    <div class="row np-flex-center" id="completed">
      <div class="col-xs-12">
        <div class="dashboard-carousel dashboard-in-progress">
          {% capture carousel_heading %}Previously Completed{% endcapture %}
          {% assign carousel_see_all_link = "/app/completed-courses-page"  %}
          {% include
            "carousel_courses",
            progress: "completed",
            category: "any",
            heading: carousel_heading,
            see_all_link: carousel_see_all_link,
            enrolled_courses: enrolled_courses
          %}
        </div>
      </div>
    </div>
  </div>
</main>
<a class="banner-link" href="/app/coaching">
  <div class="np-max-width">
    <img class="banner-img"src="https://s3.amazonaws.com/static.northpass.com/LightHouse-LJHooker/banners/coaching_banner.png" alt="Coaching Banner">
  </div>
</a>
{% include "footer" %}

<style>

  .np-dashboard {
    padding: 40px 16px;
  }

  .dashboard-stats-section-container {
    max-width: 1366px;
    margin: auto;
    padding: 0 24px 40px;
  }
  .dashboard-stats-section {
    background: #000;
    clip-path: polygon(100% 0, 100% 73%, 78% 100%, 0 100%, 0 0);
  }

  .stats-top-heading {
    text-align: center;
    color: #fff;
    font-size: 32px;
    padding: 2rem 0;
  }

.left-wing-img, .right-wing-img {
  width: 100%;
  height: auto;
}

.stats-section-bottom-left-container {margin-bottom:32px;}

.stats-left-text-container {
  color: #fff;
}

.stats-left-container-heading {
  font-size: 24px;
  color: #fff;
  margin-bottom: 8px;
}

.stats-left-container-sub-heading {
  font-size: 18px;
  color: rgb(115,150,188);
  line-height: 24px;
  font-weight: 700;
  margin-bottom: 16px;
}

.stats-left-container-description {
  color: white;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
}

.banner-link {
  display:block;
  background:#000;
  margin-bottom:40px;
}

.banner-link img {
  width:100%;
}

@media (min-width:768px) {

  .dashboard-stats-section-container {
    padding: 0 24px 64px;
  }

   .stats-top-heading {
    font-size: 55px;
  }

  .stats-left-container-heading {
    font-size: 32px;
  }

  .stats-left-container-sub-heading {
    font-size: 24px;
    line-height: 28px;
  }

  .stats-left-container-description {
    font-size: 18px;
    line-height: 24px;
  }

  .dashboard-stats-section-bottom {
    display: flex;
    gap: 30px;
  }

  .stats-section-bottom-left-container {
    width: 50%;
  }

  .stats-section-bottom-right-container {
    display: flex;
    justify-content: center;
    width: 50%;
  }
}

</style>