{% include "header" %}
<main class="np-main np-courses np-subpage-container">
	<h1 class="np-resource-title">
		On-The-Job Videos
	</h1>
	<br>

  {% assign num_of_video_courses = 0 %}
  {% if courses.in_catalog.any? %}
    <div class="np-catalog-courses row row-with-thumbnails">
      {% for course in courses.in_catalog %}
        {% for cat in course.categories %}
          {% if cat.id == "40b1f3d7-6faf-4d54-a74f-92d330831728" or cat.name == "On-The-Job" %}
             <div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content video-column" data-lang="{{course.properties.course_language}}">
              {% include "cards_course" with course %}
            </div>
            {% assign num_of_video_courses = num_of_video_courses | plus: 1 %}
          {% endif %}
        {% endfor %}
       
      {% endfor %}
    </div>
  {% else %}
    {% comment %} {% capture message %}
      {% t shared.zero_state.courses.catalog,
        key: current_school.course_vocabulary
      %}
    {% endcapture %} {% endcomment %}
    <div class="np-dashboard-resources-container">
      <div class="np-zero-state-text">
        <p> {% t shared.zero_state.courses.catalog,
        key: current_school.course_vocabulary
      %}</p>
      </div>
      <img class="np-zero-state-courses"  />
    </div>
  {% endif %}

  {% if num_of_video_courses == 0 %}
    <div class="np-dashboard-resources-container">
      <div class="np-zero-state-text">
        <p> {% t shared.zero_state.courses.catalog,
        key: current_school.course_vocabulary
      %}</p>
      </div>
      <img class="np-zero-state-courses"  />
    </div>
  {% endif %}

</main>
{% include "footer" %}

<style>
	.np-resource-title {
		text-transform:none;
	}
</style>