<script src="https://kit.fontawesome.com/41a3aee3ad.js" crossorigin="anonymous"></script>
<div class="np-course-outline">
  <div class="np-text-title np-course-outline-title">
    {% t .header, key: current_school.course_vocabulary %}
  </div>
  <div class="np-course-outline-content">
    <ol class="np-course-outline-content-section">
      {% for section in course.sections %}
        {% comment %}<li class="np-course-outline-content-section-list">
          <div class="np-course-outline-content-section-name np-text-title-bold np-text-title-bold">
            {{ section.name }}
          </div>
          <ol class="np-course-outline-content-activity">
            {% for activity in section.activities %}

              <li class="np-course-outline-content-activity-list" >
                {% if activity.completed? %}
                  <i class="fas fa-circle np-course-outline-content-activity-icon np-button-color" style="color: green; font-weight: 900"></i>
                  {% if activity.locked? %}
                    {% include "course_activity_locked" %}
                  {% else %}
                    {% include "course_activity_unlocked", class: "np-course-outline-content-activity-link-completed" %}
                  {% endif %}
                  <div class="np-course-outline-content-activity-list-bar" style="background: green"></div>
                  <div class="np-button-background-color np-course-outline-content-activity-list-bar" style="color: green"></div>
                {% else %}
                  <i class="far fa-circle np-course-outline-content-activity-icon" style="color: red; font-weight: 900"></i>
                  {% if activity.locked? %}
                    {% include "course_activity_locked" %}
                  {% else %}
                    {% include "course_activity_unlocked", class: "np-course-outline-content-activity-link" %}
                  {% endif %}
                  <div class="np-course-outline-content-activity-list-bar" style="background: red"></div>
                {% endif %}
              </li>
            {% endfor %}
          </ol>
        </li>{% endcomment %}
        <div class="np-accordion">
          <div class="accordion-btn">
              <i class="fal fa-plus"></i>
              <div class="accordion-title">
                <div class="np-course-outline-content-section-name np-text-title-bold np-text-title-bold">
                  {{ section.name }}
                </div>
              </div>
          </div>
          <div class="accordion-panel">
              <div class="accordion-panel-content">
                <ol class="np-course-outline-content-activity">
                  {% for activity in section.activities %}
      
                    <li class="np-course-outline-content-activity-list" >
                      {% if activity.completed? %}
                        <i class="fas fa-circle np-course-outline-content-activity-icon np-button-color" style="color: green; font-weight: 900"></i>
                        {% if activity.locked? %}
                          {% include "course_activity_locked" %}
                        {% else %}
                          {% include "course_activity_unlocked", class: "np-course-outline-content-activity-link-completed" %}
                        {% endif %}
                        <div class="np-course-outline-content-activity-list-bar" style="background: green"></div>
                        {%comment%}<div class="np-button-background-color np-course-outline-content-activity-list-bar" style="color: green"></div>{%endcomment%}
                      {% else %}
                        <i class="far fa-circle np-course-outline-content-activity-icon" style="color: red; font-weight: 900"></i>
                        {% if activity.locked? %}
                          {% include "course_activity_locked" %}
                        {% else %}
                          {% include "course_activity_unlocked", class: "np-course-outline-content-activity-link" %}
                        {% endif %}
                        <div class="np-course-outline-content-activity-list-bar" style="background: red"></div>
                      {% endif %}
                    </li>
                  {% endfor %}
                </ol>
              </div>
          </div>
        </div>
      {% endfor %}
    </ol>
  </div>
</div>

<script>
  let accordions = document.getElementsByClassName("accordion-btn");

  for (let i = 0; i < accordions.length; i++) {
      accordions[i].addEventListener("click", function() {
          this.querySelector('.fal').classList.toggle("fa-plus");
          this.querySelector('.fal').classList.toggle("fa-minus");

          let panel = this.nextElementSibling;
          panel.classList.toggle("panel-open");
          if (panel.style.maxHeight) {
              panel.style.maxHeight = null;
          } else {
              panel.style.maxHeight = panel.scrollHeight + "px";
          }
      });
  }
</script>

<style>
  .np-faq {
    margin-bottom: 3rem;
  }
  .np-accordion {
    margin: 0 22px 32px;
  }

  .accordion-btn {
    color: #000000;
    cursor: pointer;
    width: 100%;
    min-height: 76px;
    padding: 0 18px 0 92px;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    position: relative;
    display: flex;
    align-items: center;
  }

  .fa-plus,
  .fa-minus {
    color: #000000;
    font-size: 2.5rem;
    position: absolute;
    left: 0;
    top: 0;
    width: 76px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.4s;
  }

  .accordion-title,
  .accordion-panel-content {
    line-height: 1.375rem;
    position: relative;
  }
  .accordion-panel-content {
    padding: 18px;
  }
  .accordion-panel-content p {
    margin-top: 0;
  }

  .accordion-panel-content:before {
    content: "";
    width: 75px;
    height: 1px;
    position: absolute;
    top: 0;
    left: 18px;
  }

  .accordion-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    margin-left: 76px;
  }

  @media (min-width: 768px) {
    .np-faqs {
      margin: 0 4.0625rem;
    }
    .np-accordion {
      margin: 0 8px 32px;
    }
  }
</style>

<style>
  .activity-time {
    background: darkgrey;
    padding: 4px 8px;
    border-radius: 1px;
    margin-right: 10px;
    color: #1b1b1b;
    font-weight: 600;
    font-size: 1rem;
  }
  .np-course-outline-content-activity-link {
    align-self: center;
  }
</style>