{% assign enrolled_courses = courses.enrolled %}
{% assign enrolled_learning_paths = learning_paths.enrolled %}

{% include "header" %}
{% include "sub_navigation" %}
{% include "homepage_section_progress_activity" %}

<main class="np-main np-dashboard np-subpage-container np-max-width">
  <div class="row">
    {% if features.training_events? %}
      <div class="col-xs-12 col-sm-6 col-md-7">
        <div class="dashboard-title">UPCOMING EVENTS</div>
        <div class="np-dashboard-resources row upcoming-events">
          {% if training_events.available.any? %}
            {% for training_event in training_events.available limit: 2 %}
              <div class="col-xs-12 col-md-6">
                {% include "cards_training_event" with training_event %}
              </div>
            {% endfor %}
          {% else %}
            {% include "training_events_zero_state" %}
          {% endif %}
        </div>
      </div>
    {% endif %}
    <div class="col-xs-12 col-sm-6 col-md-5">
      {% include "section_previous_events", enrolled_courses: enrolled_courses %}
    </div>
  </div>

  {% if features.learning_paths? %}
    {% include "section_learning_paths" %}
  {% endif %}
  <div class="background-logo">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      width="657"
      height="844"
      viewBox="0 0 657 844">
      <defs>
        <clipPath id="clip-BRT_Background">
          <rect width="657" height="844" />
        </clipPath>
      </defs>
      <g id="BRT_Background" clip-path="url(#clip-BRT_Background)">
        <g
          id="Group_535"
          data-name="Group 535"
          transform="translate(-762.559 -1560.226)">
          <g
            id="Group_109"
            data-name="Group 109"
            transform="translate(762.559 1867.316)"
            opacity="0.05">
            <path
              id="Path_61"
              data-name="Path 61"
              d="M1406.748,820.66H1578V667.283H1406.748a153.283,153.283,0,0,1-132.81-76.691,153.354,153.354,0,0,0,132.81,230.068Z"
              transform="translate(-1253.371 -360.524)"
              fill="#6fcfeb" />
            <path
              id="Path_62"
              data-name="Path 62"
              d="M1406.748,703.671H1578V550.288H1406.748a153.353,153.353,0,0,0-132.81,230.068A153.278,153.278,0,0,1,1406.748,703.671Z"
              transform="translate(-1253.371 -550.288)"
              fill="#4e738a" />
          </g>
          <g
            id="Group_124"
            data-name="Group 124"
            transform="translate(762.559 1944.09)"
            opacity="0.05">
            <path
              id="Path_61-2"
              data-name="Path 61"
              d="M1406.748,820.66H1578V667.283H1406.748a153.283,153.283,0,0,1-132.81-76.691,153.354,153.354,0,0,0,132.81,230.068Z"
              transform="translate(-1253.371 -360.524)"
              fill="#6fcfeb" />
            <path
              id="Path_62-2"
              data-name="Path 62"
              d="M1406.748,703.671H1578V550.288H1406.748a153.353,153.353,0,0,0-132.81,230.068A153.278,153.278,0,0,1,1406.748,703.671Z"
              transform="translate(-1253.371 -550.288)"
              fill="#4e738a" />
          </g>
          <g
            id="Group_122"
            data-name="Group 122"
            transform="translate(1411.828 2020.362) rotate(180)"
            opacity="0.05">
            <path
              id="Path_61-3"
              data-name="Path 61"
              d="M153.377,230.068H324.632V76.691H153.377A153.283,153.283,0,0,1,20.567,0a153.354,153.354,0,0,0,132.81,230.068Z"
              transform="translate(0 230.068)"
              fill="#6fcfeb" />
            <path
              id="Path_62-3"
              data-name="Path 62"
              d="M153.377,153.383H324.632V0H153.377A153.354,153.354,0,0,0,20.567,230.068,153.279,153.279,0,0,1,153.377,153.383Z"
              transform="translate(0 0)"
              fill="#4e738a" />
          </g>
          <g
            id="Group_123"
            data-name="Group 123"
            transform="translate(1411.828 2097.135) rotate(180)"
            opacity="0.05">
            <path
              id="Path_61-4"
              data-name="Path 61"
              d="M153.377,230.068H324.632V76.691H153.377A153.283,153.283,0,0,1,20.567,0a153.354,153.354,0,0,0,132.81,230.068Z"
              transform="translate(0 230.068)"
              fill="#6fcfeb" />
            <path
              id="Path_62-4"
              data-name="Path 62"
              d="M153.377,153.383H324.632V0H153.377A153.354,153.354,0,0,0,20.567,230.068,153.279,153.279,0,0,1,153.377,153.383Z"
              transform="translate(0 0)"
              fill="#4e738a" />
          </g>
        </g>
      </g>
    </svg>
  </div>
  {% include "section_recommended_courses", enrolled_courses: enrolled_courses %}

  {% include "section_recently_added_courses", enrolled_courses: enrolled_courses %}
</main>
{% include "footer" %}

<style>
  .np-dashboard-resources .np-card {
    padding-left: 0;
    padding-right: 16px;
    height: 100%;
  }

  .np-dashboard-resources .np-card-content-vertical {
    justify-content:flex-end;
  }

  .previous-events,
  .upcoming-events {
    margin-bottom: 32px;
  }

  .dashboard-subtitle {
    color: #000;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  .recommended-courses-link,
  .recent-courses-link {
    color: #0077B8;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration-line: underline;
  }

  .recommended-courses-link:hover,
  .recent-courses-link:hover {
    color: #185A7D;
  }

  .background-logo {
    position: relative;
    max-height: 0;
    width: 100%;
  }

  .background-logo svg {
    position: absolute;
    right: 100px;
    top: 200px;
  }
</style>