{% assign courses_completed = 0 %}
{% assign hourses_completed = 0 %}
{% for course in courses.enrolled %}
  {% if course.completed? %}
    {% assign courses_completed = courses_completed | plus: 1 %}
    {% assign hourses_completed = hourses_completed | plus: course.properties.course_time %}
  {% endif %}
{% endfor %}
{% assign hourses_completed = hourses_completed | divided_by: 60 %}
<div class="dashboard-header container">
  <div class="row">
    <div class="dashboard-header-left col">
      <div class="dashboard-header-left-title">
        Welcome back, {{ current_person.first_name }}
      </div>
      <div class="dashboard-header-left-subtitle">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

      </div>
      <div class="dashboard-header-left-widgets row">
        <div class="col-12 col-md-6">
          <div class="dashboard-header-left-widget">
            <div class="dashboard-header-left-widget-left">
              <div class="dashboard-header-left-widget-title">
                Courses Completed
              </div>
              <div class="dashboard-header-left-widget-value">
                {{ courses_completed }}
              </div>
            </div>
            <div class="dashboard-header-left-widget-icon">
              <i class="far fa-tags"></i>
            </div>
          </div>         
        </div>
        <div class="col-12 col-md-6">
          <div class="dashboard-header-left-widget">
            <div class="dashboard-header-left-widget-left">
              <div class="dashboard-header-left-widget-title">
                Hours of Learning
              </div>
              <div class="dashboard-header-left-widget-value">
                {{ hourses_completed }}
              </div>
            </div>
            <div class="dashboard-header-left-widget-icon">
              <i class="far fa-tags"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="dashboard-header-right col-12 col-sm-6">
      <div class="dashboard-header-right-header">
        <div class="dashboard-header-right-header-title">
          Recent Courses
        </div>
        <a class="dashboard-header-right-header-link" href="">
          View All
        </a>
      </div>
      {% assign recent_course_count = 0 %}
      <div class="dashboard-header-right-courses">
        {% for course in courses.enrolled limit: 2 %}
          {% assign recent_course_count = recent_course_count | plus: 1 %}
          {% include 'cards_course_recent' %}
        {% endfor %}
      </div>
    </div>
  </div>
</div>

{% if recent_course_count == 0 %}
  <style>
    .dashboard-header-right-courses {
      display: none !important;
    }
  </style>
{% endif %}

<style>
  

  .dashboard-header {
    display: flex;
    margin-bottom: 30px;
    max-width: none;
  }
  .dashboard-header-left-title {
    font-size: 2rem;
    font-weight: 700;
    color: rgb(86, 49, 80);
    margin-bottom: 0.5rem;
  }
  .dashboard-header-left-subtitle {
    margin-bottom: 1rem;
    color: #3d4371;
  }
  .dashboard-header-left-widgets {
    display: flex;
  }
  .dashboard-header-left-widget {
    display: flex;
    padding: 30px;
    justify-content: space-between;
    background: white;
    border-radius: 12px;
    box-shadow:0 1px 4px 0 #14034212;
  }
  .dashboard-header-left-widget-title {
    color: #3d4371;
    margin-bottom: 10px;
    font-weight: 500;
  }
  .dashboard-header-left-widget-value {
    font-size: 2rem;
    font-weight: 500;
    color: rgb(86, 49, 80);
  }
  .dashboard-header-left-widget-icon {
    align-self: center;
    font-size: 2rem;
    color: rgb(86, 49, 80);
  }
  .dashboard-header-right {
    padding: 20px;
    margin-left: 15px;
    border-radius: 12px;
    background: white;
    box-shadow:0 1px 4px 0 #14034212;
  }
  .dashboard-header-right-header {
    display: flex;
    justify-content: space-between;
    padding-bottom: 20px;
    border-bottom: 1px solid lightgray;
  }
  .dashboard-header-right-courses {
    margin-top: 20px;
  }
  .dashboard-header-right-header-title {
    color: rgb(86, 49, 80);
    font-size: 1.2rem;
    font-weight: 500;
  }
  .dashboard-header-right-header-link {
    text-decoration: underline !important;
    color: rgb(86, 49, 80) !important;
    text-decoration-color: rgb(86, 49, 80) !important;
  }

  
  /* recent course card styles */
  .recent-course-card {
    display: flex;
    padding: 15px 0;
  }
  .recent-course-card:last-child:not(.recent-course-card:first-child) {
    border-top: 1px solid lightgray;
  }
  .recent-course-image {
    width: auto;
    height: 70px;
    margin: auto 20px auto 0;
  }
  .recent-course-title {
    color: rgb(86, 49, 80);
    font-weight: 500;
  }
  .recent-course-footer {
    display: flex;
    color: #3d4371;
  }
  .recent-course-info {
    display: flex;
    margin-right: 16px;
  }
  .recent-course-info-icon {
    margin-right: 10px;
    width: 20px;
    height: 20px;
  }

   .recent-course-info-icon img {
    max-width:100%;
  }

  @media (min-width: 768px) {

  }
</style>