{% include "header" %}
<main class="np-main np-search np-subpage-container np-max-width">
  <div class="np-resource-title">
    {% t .title %}
  </div>
  <div class="np-search-header">
    {% assign render_search = false %}
    {% if results.items.any? %}
      {% for result in results.items %}
        {% comment %} https://newacademy.anthology.com/app/search/00000000-0000-0000?q= {% endcomment %}
        {% if result.type == 'course' %}
          {% for course in courses.enrolled %}
            {% if result.course.id == course.id %}
              {% assign render_search = true %}
            {% endif %}
          {% endfor %}
        {% endif %}
      {% endfor %}
    {% endif %}

    {% if render_search %}
      {% assign result_count = 0 %}
      {% for item in results.items %}
        {% if item.type == 'course' %}
          {% assign result_count = result_count | plus: 1 %}
        {% endif %}
      {% endfor %}
    {% endif %}

    <div class="np-resource-subtitle">
      {% t .showing %}
      {% if render_search %}
        <span class="np-resource-subtitle-number">{{ result_count }}</span>
      {% else %}
        <span class="np-resource-subtitle-number">{{ results.count }}</span>
      {% endif %}
      {% t .results_for %}
      <span class="np-button-color">"{{ results.term }}"</span>
    </div>
    {% if render_search %}
      {% capture label %}{% t shared.filters.by_type %}{% endcapture %}
      {% include "filter_by_product", page: 'Search' %}
    {% endif %}
  </div>
  {% if render_search %}
    <div class="np-catalog-courses row row-with-thumbnails">
      {% for result in results.items %}
        {% comment %} https://newacademy.anthology.com/app/search/00000000-0000-0000?q= {% endcomment %}
        {% if result.type == 'course' %}
          {% for course in courses.enrolled %}
            {% if result.course.id == course.id %}
              {% include "cards_searched_course" with course %}
            {% endif %}
          {% endfor %}
        {% endif %}
      {% endfor %}
    </div>
  {% else %}
    {% include "search_zero_state" %}
  {% endif %}
</main>
{% include "footer" %}

<style>
  .np-card{
    margin-bottom: 15px;
  }

  .card-product-banner{
    align-items: center;
    background: #FFF;
    box-shadow: 0 3px 30px rgba(0,0,0,.1);
    display: flex;
    height: 32px;
    overflow: hidden;
    padding: 6px 8px;
    width: 100%;
  }

  .product-logo{
    height: 100%;
  }

  .card-image-replacement{
    /* background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(225,235,243,1) 60%); */
    background: linear-gradient(325deg, rgba(255,255,255,1) 0%, rgb(225 235 343 / 30%) 60%);
    height: 12rem;
    width: 100%;
  }

  @media screen and (min-width: 550px) and (max-width: 649px){
    .card-image-replacement{
      height: 15rem;
    }
  }

  @media screen and (min-width: 650px) and (max-width: 767px){
    .card-image-replacement{
      height: 20rem;
    }
  }

  .course-card-info{
    height: calc(100% - 38px);
    justify-content: center;
    position: absolute;
    top: 0;
    width: unset;
  }

  .course-card-title{
    font-size: 24px;
    font-weight: 600;
    line-height: 25px;
    margin-top: 8px !important;
  }

  .course-card-button{
    border-radius: 0;
    font-size: 14px;
    font-weight: 600;
    height: 100%;
    line-height: 21px;
    width: 30%;
  }

  .course-card-button:focus{
    border: 2px solid blue;
  }

  .np-progress-bar-container,
  .np-card-progress-bar{
    border-radius: 0;
    height: 6px;
    margin: 0;
  }

  .np-card-content-progress{
    height: 25px;
    margin: 0;
  }

  .course-card-progress-bar{
    min-width: 0;
  }

  .np-card-content-progress{
    font-size: 16px;
    font-weight: 400;
    line-height: 25px;
  }

  .card-bottom-details{
    justify-content: flex-end;
  }

  @media screen and (min-width: 768px){
    .np-card{
      margin-bottom: 15px !important;
      min-width: unset;
    }

    .course-card-wrapper{
      margin-bottom: 32px;
      /* max-height: 315px;
      max-width: 445px; */
    }

    .course-card{
      padding: 0 10px !important;
    }

    .course-card-wrapper,
    .course-card{
      height: 100%;
    }
  }
</style>
