<div class="np-card-container">
  <a href="{% route dashboard %}" class="np-back-button back-to-courses-btn" aria-label="{% t shared.go_back %}">
    <i class="far fa-arrow-left np-hidden-mobile np-icon-back back-arrow"></i>
    Back to My Courses
  </a>
  <div class='np-course-header'>
    <img
    src="{{ course.image_url }}"
    class="np-top-image np-top-image-spacing"
    alt="{{ course.name }}"
    />
    <div class='np-course-header-right'>
      <div class='np-course-header-right-name'>
        {{ course.name }}
      </div>
      <div class='np-course-header-right-short'>
          {{ course.short_description }}
      </div>
      <div class='np-course-header-right-button'>
        {% include "course_progress_and_cta" %}
      </div>
    </div>
  </div>
  <div class='np-course-bottom'>
    <div class='np-course-bottom-left'>
      <div class='np-course-bottom-left-title' id='course-overview'>
        Curriculum
      </div>
      <div class='np-course-bottom-left-outline'>
        {% for section in course.sections %}
          <div class='np-course-bottom-left-outline-section'>
            {{ section.name }}
          </div>
          {% for activity in section.activities %}

            {% if activity.locked? %}
              <div>
                {% include "course_activity_locked" %}
              </div>
            {% else %}
            <div class="course-links">
            {% include "course_activity_unlocked", class: "np-course-bottom-left-outline-activity" %}
            </div>
            {% endif %}
          {% endfor %}
        {% endfor %}
      </div>
    </div>
	{% if course.name contains "Resource Kit" %}
    <div class='np-course-bottom-right'>
      <div class='np-course-bottom-right-title'>
        About this kit
      </div>
      <div class='np-course-bottom-right-description'>
        {{ course.full_description }}
      </div>
    </div>
  {% else %}
    <div class='np-course-bottom-right'>
      <div class='np-course-bottom-right-title'>
        About this course
      </div>
      <div class='np-course-bottom-right-description'>
        {{ course.full_description }}
      </div>
    </div>
	{% endif %}
  </div>
</div>

<style>
  body {
    background: rgb(254, 254, 254);
  }
  .np-card-container {
    background: rgb(254, 254, 254);
    box-shadow: none;
  }
  .np-course-header {
    display: flex;
    border-bottom: 1px solid #d6d6d6;
    padding-bottom: 60px;
  }
  .np-top-image {
    max-height: 400px;
    max-width:100%;
    width:50%;
    margin: auto 0;
  }
  .np-course-header-right {
    padding-left: 32px;
  }
  .np-course-header-right-name {
    color: rgb(38, 49, 61);
    font-size: 40px;
    font-weight: 800;
    margin-bottom: 25px;
    margin-top: 12px;
  }
  .np-course-header-right-short {
    color: rgb(38, 49, 61);
    font-size: 21px;
    font-weight: 400px;
    margin-bottom: 40px;
  }
  .np-course-bottom {
    display: flex;
    margin-top: 70px;
    justify-content:space-between;
  }
  .np-course-bottom-left{
    width: 50%;
    max-width:450px;
  }
  .np-course-bottom-left-title {
    font-weight: 900;
    color: rgb(38, 49, 61);
    font-size: 24px;
    margin-bottom: 20px;
  }
  .np-course-bottom-left-outline {
    border: 1px solid #979797 !important;
    border-radius: 10px;
    padding: 20px 0;
  }
  .np-course-bottom-left-outline-section {
    margin: 10px 0;
    padding: 0 40px 0 20px;
    font-size: 18px;
    line-height: 1.4;
    text-transform: uppercase;
    font-weight: 900;
  }
  .np-course-bottom-left-outline-activity {
    padding: 7px 30px;
    font-size: 18px;
    line-height: 28.8px;
    font-weight: 400;
    color: black;
    opacity: 0.7;
    text-decoration: none;
  }
  .np-course-bottom-right {
    margin-left: 50px;
    width:50%
  }
  .np-course-bottom-right-title {
    font-weight: 900;
    color: rgb(38, 49, 61);
    font-size: 24px;
  }
  .np-course-bottom-right-description {
    font-size: 18px;
    font-weight: 400;
    color: rgb(10, 10, 10);
  }

  @media (min-width:1200px) {
    .np-top-image {
      max-height: 450px;
    }

    .np-course-header {
      align-items: center;
    }

    .np-course-header-right {
        padding-left: 100px;
    }

    .np-course-header-right-name {
      font-size: 50px;
      margin-top: 0;
    }

    .np-course-bottom-left{
      width: 70%;
    }

    .np-course-bottom-right {
        margin-left: 110px;
    }
  }
  .np-icon-back {
  color:black;
  }

  .back-to-courses-btn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-weight: 500;
  color: black;
  }
  .back-arrow {
  font-size: 0.8rem;
    margin-right: 5px;
    font-weight: 500;
}
</style>
