{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.in_catalog %}

<main class="np-main np-catalog np-subpage-container np-max-width">
  <div class="catalog-header-wrapper">
    <div class="header-catalog chubb">
      <a class="purple-link home-link" href="/app">Home </a>/ Course Catalog
    </div>
    <div class="catalog-description">
      Search and filter courses, learning paths and other materials using the menu on the left side of the screen.
    </div>
  </div>
  <div class="row row-catalog">
    <div class="filter-container">
      {% include 'catalog_filters' %}
    </div>
    <div class="catalog-container">   
    {% include "courses_catalog" %}
    </div>
  </div>
</main>
{% include "footer" %}

<style>
  .home-link {
    text-decoration: none;
  }
  .filter-container {
    width: 20%;
    padding: 0 30px 0 0;
    margin-top: 60px
  }
  .catalog-container {
    width: 80%;
  }
  .purple-link {
    color: #6e27c5;
  }
  .header-catalog {
    font-weight: 500;
    font-size: 1.5rem;
    color: #000;
  }
  .row {
    margin-left: 0;
  }
  .catalog-header-wrapper {
    margin-bottom: 20px;
  }
  .catalog-description {
    color: #000;
  }
</style>