{% 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">
      {% if current_person.signed_in? %}
      <div class="dashboard-header-left-title">
        Welcome back {{ current_person.first_name }},
      </div>
      {% endif %}
      <div class="dashboard-header-left-subtitle">
        Network Q is Quantuvos’ professional development platform that provides a wide range of top-quality resources to everyone in your organization. Network Q content is carefully curated to deliver the right topics in the right way at the right time based on individual needs and preferences. These resources assist individuals in achieving their professional development goals.
      </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="{% route courses %}">
          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>
