<div class="uk-container uk-container-center uk-margin-top uk-margin-bottom uk-padding-large-top">
  <h1 class="uk-text-center page-header uk-padding-horizontal" data-test="learning-path-name">
    {{ learning_path.name }}
  </h1>
</div>

<div class="uk-block uk-block-muted uk-margin-large-bottom uk-border-top uk-border-bottom">
  <div class="uk-container uk-container-center">
    <div class="uk-grid uk-padding-horizontal">
      <div class="uk-width-medium-6-10 uk-margin-bottom">
        <img src="{{ learning_path.featured_image_url }}" alt="{{ learning_path.name }}" class="course-image uk-responsive-width uk-width-1-1">
      </div>

      <div class="uk-width-medium-4-10">
        <div class="uk-margin-large-bottom uk-text-large uk-text-muted">
          {{ learning_path.description }}
        </div>

        {% if current_person.enrolled_in_learning_path? %}
          <a
            href="{{ learning_path.cover_path }}"
            class="uk-button uk-button-primary uk-button-large"
            data-test="go-to-path-button"
          >
            {{ learning_path.go_to_label }}
          </a>
        {% else %}
          <a
            href="{{ learning_path.enrollment_url }}"
            class="enroll-button uk-button uk-button-primary uk-button-large"
            data-test="enroll-button"
          >
            {% t .enroll %}
          </a>
        {% endif %}
      </div>
    </div>
  </div>
</div>

<div class="uk-container uk-container-center uk-padding-large-bottom uk-pargin-large-bottom">
  <div class="uk-grid uk-grid-reverse uk-padding-horizontal">
    <div class="uk-width-medium-4-10 uk-push-6-10 school-website-course-meta">
      <h2>{{ learning_path.outline_label }}</h2>
      <div class="course-syllabus uk-panel uk-panel-box uk-border uk-margin-large-bottom">
        {% for item in learning_path.items %}
          <div class="uk-margin-bottom">
            <h4 class="uk-margin-small-bottom"><strong>{{ item.name }}</strong></h4>
          </div>
        {% endfor %}
      </div>
    </div>
    <div class="uk-width-medium-6-10 uk-pull-4-10">
      <h2>{{ learning_path.about_label }}</h2>
      <div class="school-website-course-description uk-margin-large-bottom uk-padding-large-right">
        {{ learning_path.description }}
      </div>
      {% if learning_path.instructors.count > 0 %}
        <h2>{% pluralize learning_path.instructors.count, .instructor_bio_title %}</h2>
        {% for instructor in learning_path.instructors %}
          <div class="uk-grid uk-grid-small uk-margin-large-bottom">
            <div class="uk-width-medium-1-6 uk-width-1-3">
              <figure class="uk-thumbnail">
                <img src="{{ instructor.image_url }}" alt="{{ instructor.name }}">
              </figure>
            </div>
            <div class="uk-width-medium-5-6 uk-width-2-3">
              <div class="uk-padding-left">
                {% if instructor.name or instructor.title %}
                  <h4 class="uk-margin-top-remove uk-margin-small-bottom">{% if instructor.name %}<strong>{{ instructor.name }}</strong>{% endif %}{% if instructor.title %}, <span class="uk-text-muted">{{ instructor.title }}</span>{% endif %}</h4>
                {% endif %}
                {{ instructor.bio }}
              </div>
            </div>
          </div>
        {% endfor %}
      {% endif %}
    </div>
  </div>
</div>
