{% if course.learner_can_retake? %}
  <form action="{% route course_retake, id: course.id %}" method="POST">
    {% form_authenticity_token %}
    <button type="submit" class="course-button">
      Retake
    </button>
  </form>
{% else %}
  <a
    class="course-button"
  {% 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 %}
      Enroll
    {% elsif course.started? == false %}
      Start
    {% elsif course.completed? %}
      Start again
    {% else %}
      Continue
    {% endif %}
  </a>
{% endif %}
<div class="progress-text">
  {{course.progress}}% Complete
</div>
<div class="progress-bar">
  {% assign completed = false %}
  {% for section in course.sections %}
    <div class="progress-bar-section">
      <i class="fa-light fa-dash 
        {% if completed %}
          completed
        {% else %}
          todo
        {% endif %}">
      </i>
      {% for activity in section.activities %}
        {% if activity.completed? %}
          <i class="fa-solid fa-circle-small completed"></i>
          <i class="fa-light fa-dash completed"></i>
          {% assign completed = true %}
        {% else %}
          <i class="fa-light fa-circle-small todo"></i>
          <i class="fa-light fa-dash todo"></i>
          {% assign completed = false %}
        {% endif %}
      {% endfor %}
    </div>
  {% endfor %}
</div>

<style>
  .progress-bar {
    display: flex;
    flex-direction: row;
    background: none;
    font-size: 1.8rem;
    align-self: start;
    flex-wrap: wrap;
    justify-content: start;
    width: 110%;
  }
  .progress-bar > * {
    margin: 0 -0.5px;
  }
  .completed {
    color: black;
  }
  .todo {
    color: #C4C4C4;
  }
  .progress-bar-section:first-child .fa-dash:first-child {
    display: none;
  }
  .progress-bar-section:last-child .fa-dash:last-child {
    display: none;
  }
  .course-button {
    background: none;
    color: #2D373C;
    border: 2px solid #2D373C;
    border-radius: 0;
    padding: 16px 30px;
    width: min-content;
    font-weight: 600;
  }
  .progress-text {
    margin: 20px 0;
  }
  .progress-bar-section {
    display: flex;
    flex-direction: row;
  }
</style>