{% include "header"
  , color: "var(--nintex--color--deep-purple)"
  , text_color: "white"
  , text_en_US: ""
  , text_es: ""
  , text_fr: ""
  , text_de: ""
  , text_en_GB: ""
  , text_nl: ""
  , text_pt_BR: ""
  , subtitle_en_US: ""
  , subtitle_es: ""
  , subtitle_fr: ""
  , subtitle_de: ""
  , subtitle_en_GB: ""
  , subtitle_nl: ""
  , subtitle_pt_BR: ""
  , button_text_en_US: ""
  , button_text_es: ""
  , button_text_fr: ""
  , button_text_de: ""
  , button_text_en_GB: ""
  , button_text_nl: ""
  , button_text_pt_BR: ""
  , button_link: "" %}
{% include "sub_navigation" %}
<main class="np-main np-catalog np-subpage-container np-max-width">
  <div class="np-catalog-header-wrapper">
    <div class="np-catalog-header">
      <h2 class="np-resource-title">{{ catalog.headline }}</h2>
      <p class="np-resource-subtitle">{{ catalog.subheadline }}</p>
    </div>
  </div>
  {% if catalog.any? %}
    <div class="np-catalog-courses row row-with-thumbnails">
      {% for item in catalog.items %}
        <div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
          {% include "cards_catalog_item" with item %}
        </div>
      {% endfor %}
    </div>
  {% else %}
    {% capture message %}
      {% t shared.zero_state.courses.catalog,
        key: current_school.course_vocabulary
      %}
    {% endcapture %}
    {% include "courses_zero_state"
      , message: message %}
  {% endif %}
</main>
{% include "footer" %}