{% 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 quick-guides np-subpage-container np-max-width">
  <div class="quick-guides-header">
    Quick Guides
  </div>

  {% if courses.in_catalog.any? %}
    {% for course in courses.in_catalog %}
      {% for course_category in course.categories %}
        {% if course_category.name == "Quick Guides" %}
          {% 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>
              {%- comment -%} <a class="resource-button" 
                href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"
              >
                View
              </a> {%- endcomment -%}
            </div>
          </div>
        {% endif %}
      {% endfor %}
    {% endfor %}
  {% endif %}
</main>

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

  .quick-guides-header{
    display: flex;
    font-size: 32px;
    font-weight: 500;
    margin-bottom: 25px;
    width: 100%;
  }
  .bqUfwS{
  display:none !important;
  }
  @media screen and (min-width: 768px){
    .quick-guides-header{
      margin-left: 64px;
    }
  }
</style>