{% include "header" %}
<div class="np-homepage-hero" style="width: 100vw;">
  <img class="np-homepage-hero-image"
    src="{{ homepage.artwork_url }}"
    alt="{{ homepage.headline }}"
  />
</div>
{% include "sub_navigation" %}
<main class="np-main faqs np-subpage-container np-max-width">
  <div class="faqs-header">
    FAQ's
  </div>


  {% if courses.in_catalog.any? %}
    {% for course in courses.in_catalog %}
      {% for course_category in course.categories %}
        {% if course_category.name == "FAQ's" %}
          {% capture course_path %}{% route course, id: course.id %}{% endcapture %}
          <div class="col-xs-12 resource-entry-container">
            <div class="resource-entry">
              <span class="resource-name">{{ course.name }}</span>
              {%- comment -%} <a class="resource-button" href="{{ course_path }}">View</a> {%- endcomment -%}
              <a class="resource-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 %}
              >
                View
              </a>
            </div>
          </div>
        {% endif %}
      {% endfor %}
    {% endfor %}
  {% endif %}
</main>


<style>
  .np-sub-navigation{
    width: 100vw;
  }

  .faqs-header{
    display: flex;
    font-size: 32px;
    font-weight: 500;
    margin-bottom: 25px;
    width: 100%;
  }
  .bqUfwS{
  display:none !important;
  }

  @media screen and (min-width: 768px){
    .faqs-header{
      margin-left: 64px;
    }
  }
</style>