<div class="np-card-container np-card-padding-large in-course-sections in-course-condenser">
  {% include "course_header" %}
  <div class="np-top-cta">
    {% include "course_progress_and_cta" %}
  </div>
</div>

{% if course.progress == 0 %}
  <div class="np-card-container np-card-padding np-card-spacing in-course-sections in-course-condenser">
    {% include "course_description" %}
  </div>
  <div class="np-card-container np-card-padding np-card-spacing in-course-sections in-course-condenser">
    {% include "course_outline" %}
  </div>
{% else %}
  <div class="np-card-container np-card-padding np-card-spacing in-course-sections in-course-condenser">
    {% include "course_outline" %}
  </div>
  <div class="np-card-container np-card-padding np-card-spacing in-course-sections in-course-condenser">
    {% include "course_description" %}
  </div>
{% endif %}

{% if course.categories.any? %}
  <div class="np-card-container np-card-padding np-card-spacing in-course-sections in-course-condenser">
    {% include "course_categories" %}
  </div>
{% endif %}

{% if course.instructors.any? %}
  <div class="np-card-container np-card-padding np-card-spacing in-course-sections in-course-condenser">
    {% include "course_instructors" %}
  </div>
{% endif %}

{% if course.events.any? %}
  <div class="np-card-container np-card-padding np-card-spacing in-course-sections in-course-condenser">
    {% include "course_events" %}
  </div>
{% endif %}

<div class="course-start-button in-course-start-button">
  {% if course.learner_can_retake? %}
    <form action="{% route course_retake, id: course.id %}" method="POST">
      {% form_authenticity_token %}
      <button type="submit" class="np-top-button np-button-font-color np-button np-button-big">
        {% t .retake, key: current_school.course_vocabulary %}
      </button>
    </form>
  {% else %}
    <a
      class="np-top-button np-button-font-color np-button np-button-big"
    {% if course.enrolled? %}
        href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"
    {% else %}
        href="{% route course_enrollment, code: course.enrollment_code %}"
    {% endif %}
    >
      {% if course.enrolled? == false %}
        {% t shared.enroll %}
      {% elsif course.started? == false %}
        {% t shared.course.start, key: current_school.course_vocabulary %}
      {% elsif course.completed? %}
        {% t shared.course.view, key: current_school.course_vocabulary %}
      {% else %}
        {% t shared.continue %}
      {% endif %}
    </a>
  {% endif %}
</div>

<style>
  .in-course-sections{
    box-shadow: none;
  }

  .in-course-start-button{
    width: 50%;
    padding-top: 1.25rem;
    margin: 0 auto;
    float: none;
  }

  .in-course-condenser{
    padding-bottom: 0;
  }
</style>