{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.in_catalog %}
{% include "main_hero_masthead" %}
{% include "sub_navigation" %}
<main class="np-main np-catalog np-subpage-container np-max-width">
  <div class="catalog-courses content-wrapper">
    <div class="page-desc" style="margin-top: 32px;">
      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
      <path d="M16 17C16 17.2652 15.8946 17.5196 15.7071 17.7071C15.5196 17.8946 15.2652 18 15 18H9C8.73478 18 8.48043 17.8946 8.29289 17.7071C8.10536 17.5196 8 17.2652 8 17C8 16.7348 8.10536 16.4804 8.29289 16.2929C8.48043 16.1054 8.73478 16 9 16H15C15.2652 16 15.5196 16.1054 15.7071 16.2929C15.8946 16.4804 16 16.7348 16 17ZM15 12H9C8.73478 12 8.48043 12.1054 8.29289 12.2929C8.10536 12.4804 8 12.7348 8 13C8 13.2652 8.10536 13.5196 8.29289 13.7071C8.48043 13.8946 8.73478 14 9 14H15C15.2652 14 15.5196 13.8946 15.7071 13.7071C15.8946 13.5196 16 13.2652 16 13C16 12.7348 15.8946 12.4804 15.7071 12.2929C15.5196 12.1054 15.2652 12 15 12ZM29 20.1838V28C29.0016 28.1763 28.9565 28.3499 28.8694 28.5032C28.7823 28.6564 28.6562 28.7839 28.5039 28.8728C28.3516 28.9616 28.1786 29.0086 28.0023 29.009C27.826 29.0094 27.6527 28.9632 27.5 28.875L24.5 27.1575L21.5 28.875C21.3473 28.9632 21.174 29.0094 20.9977 29.009C20.8214 29.0086 20.6484 28.9616 20.4961 28.8728C20.3438 28.7839 20.2177 28.6564 20.1306 28.5032C20.0435 28.3499 19.9984 28.1763 20 28V25H5C4.46957 25 3.96086 24.7893 3.58579 24.4142C3.21071 24.0391 3 23.5304 3 23V7C3 6.46957 3.21071 5.96086 3.58579 5.58579C3.96086 5.21071 4.46957 5 5 5H27C27.5304 5 28.0391 5.21071 28.4142 5.58579C28.7893 5.96086 29 6.46957 29 7V10.8162C29.6321 11.4216 30.1352 12.1487 30.4789 12.9536C30.8225 13.7586 30.9997 14.6248 30.9997 15.5C30.9997 16.3752 30.8225 17.2414 30.4789 18.0464C30.1352 18.8513 29.6321 19.5784 29 20.1838ZM20 23V20.1838C18.9103 19.1328 18.2216 17.7344 18.0527 16.2299C17.8839 14.7254 18.2456 13.2091 19.0753 11.9428C19.905 10.6764 21.1507 9.73945 22.5975 9.29348C24.0443 8.84751 25.6013 8.92055 27 9.5V7H5V23H20ZM27 21.5C26.208 21.8309 25.3583 22.0013 24.5 22.0013C23.6417 22.0013 22.792 21.8309 22 21.5V26.2775L24 25.1325C24.1511 25.0461 24.3222 25.0007 24.4963 25.0007C24.6703 25.0007 24.8414 25.0461 24.9925 25.1325L26.9925 26.2775L27 21.5ZM29 15.5C29 14.61 28.7361 13.74 28.2416 12.9999C27.7471 12.2599 27.0443 11.6831 26.2221 11.3425C25.3998 11.0019 24.495 10.9128 23.6221 11.0865C22.7492 11.2601 21.9474 11.6887 21.318 12.318C20.6887 12.9474 20.2601 13.7492 20.0865 14.6221C19.9128 15.495 20.0019 16.3998 20.3425 17.2221C20.6831 18.0443 21.2599 18.7471 21.9999 19.2416C22.74 19.7361 23.61 20 24.5 20C25.0909 20 25.6761 19.8836 26.2221 19.6575C26.768 19.4313 27.2641 19.0998 27.682 18.682C28.0998 18.2641 28.4313 17.768 28.6575 17.2221C28.8836 16.6761 29 16.0909 29 15.5Z" fill="black"/>
      </svg>
        <h4>Become a program expert and showcase your skills with Buildertrend Certifications.</h4>
    </div>
    <div class="catalog-courses-container">
    <div class="np-catalog-courses row row-with-thumbnails">
      {%  assign isCertificateProgressHeader = false %} 
      {% for course in courses.in_catalog %}
        {%  if course.has_certificate?  %}             
          {% if course.progress > 0 and course.progress < 100 %}
            {% if isCertificateProgressHeader == false %}
              <div class="np-resource-title addWidthMargin">In progress</div>
              {% assign isCertificateProgressHeader = true %}
            {% endif %}
            <div class="col-xs-12 col-sm-6 col-lg-4 np-stretch-content catalog-content"
                data-categories='{% for category in course.categories %}{{ category.id }},{% endfor %}'>
                  {% include "cards_course" with course %}
            </div>
          {% endif %}
        {% endif %}   
      {% endfor %}         
    </div>
    <div class="np-resource-title" style="margin-top: 40px;">Certifications</div>
    <div class="np-catalog-courses row row-with-thumbnails" style="margin-top: 0px;">
      {% for course in courses.in_catalog %}             
          {%  if course.has_certificate?  %}
            {% if course.progress == 0 %}        
          <div class="col-xs-12 col-sm-6 col-lg-4 np-stretch-content catalog-content"
          data-categories='{% for category in course.categories %}{{ category.id }},{% endfor %}'>
            {% include "cards_course" with course %}
          </div>    
            {% endif %}  
        {% endif %}                 
      {% endfor %}
    </div>
    <div class="np-catalog-courses row row-with-thumbnails">
      {%  assign isCertificateCompletedHeader = false %} 
      {% for course in courses.in_catalog %}
        {%  if course.has_certificate?  %}             
          {% if course.progress == 100 %}
            {% if isCertificateCompletedHeader == false %}
              <div class="np-resource-title addWidthMargin">Completed certifications</div>
              {% assign isCertificateCompletedHeader = true %}
            {% endif %}
            <div class="col-xs-12 col-sm-6 col-lg-4 np-stretch-content catalog-content"
                data-categories='{% for category in course.categories %}{{ category.id }},{% endfor %}'>
                  {% include "cards_course" with course %}
            </div>
          {% endif %}
        {% endif %}   
      {% endfor %}         
    </div>
  </div>
</main>
{% include "footer" %}