{% include "header" %}
<main class="np-main np-homepage">
  {% include "course_version_outdated_alert", courses: courses.featured %}
  <div class="np-homepage-hero">
    <img class="np-homepage-hero-image"
      src="{{ homepage.artwork_url }}"
      alt="{{ homepage.headline }}"
    />
    <div class="np-homepage-hero-content">
      <div class="np-homepage-headline np-header-font-color">
        {{ homepage.headline }}
      </div>
      <div class="np-homepage-subheadline np-header-font-color">
        {{ homepage.subheadline }}
      </div>
      <a class="np-homepage-hero-cta np-button" href="{% route catalog %}">
        {% t .discover %}
      </a>
    </div>
  </div>
  {% include "sub_navigation" %}
  {% if current_school.properties.show_alert_banner == true %}
	<div class="np-alert" style="background-color:#7715B7; color: #ffffff; margin-top: -5px;" >
	  <p>{{ current_school.properties.alert_banner }}</p>
	</div>
  {% endif %}

  <div class="np-homepage-featured np-max-width">
    <div class="np-homepage-featured-text">
      <div class="np-homepage-headline">
        {{ homepage.featured_courses_headline }}
      </div>
      <div class="np-homepage-subheadline">
        {{ homepage.featured_courses_subheadline }}
      </div>
    </div>
    {% if courses.featured.any? %}
      <div class="np-homepage-featured-courses">
        {% for course in courses.featured %}
          <div class="np-stretch-content">
            {% include "cards_course" with course %}
          </div>
        {% endfor %}
      </div>
    {% else %}
      <div class="np-homepage-featured-empty">
        <div class="np-zero-state-text">
          {% t .empty, key: current_school.course_vocabulary %}
        </div>
        <img
          class="np-zero-state-courses"
          alt="{% t .empty, key: current_school.course_vocabulary %}"
        />
      </div>
    {% endif %}
  </div>
</main>
{% include "footer" %}

<style>
  .np-homepage-hero-content {
	position: absolute;
	padding: 36px 24px;
	padding-top: 13%;
	width: 90%;
	display: flex;
	justify-content: initial;
  }

/*
  .np-homepage-hero {
    flex-direction: row-reverse;
  }

  .np-homepage-hero-cta.np-button {
    border-radius: 30px;
    padding: 18px;
  }
 */

  .np-homepage-hero-image {
	width: 100%;
	object-fit: contain;
    height: auto;
    max-height: max-content;
  }
  .np-main {
    padding: 123px 0 0;
  }


  .np-stretch-content:nth-child(n+2) {
    margin-top: 24px;
  }

  .np-homepage-featured-courses {
    margin: 0;
  }

  .tns-outer {
    position: relative;
  }

  #tns1-mw {
    min-height: 500px;
  }

  .tns-controls {
    position: absolute;
    z-index: 100;
    top: 50%;
    transform: translate(0,-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .tns-controls > * {
    border: none;
    letter-spacing: 0.01em !important;
    line-height: 0;
    touch-action: manipulation;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    text-size-adjust: 100%;
    --polaris-version-number: "4.27.0";
    --polaris-animation-skeleton-shimmer: polaris-SkeletonShimmerAnimation;
    --toast-translate-y-out: 15rem;
    --toast-translate-y-in: 0;
    --global-ribbon-height: 0px;
    --p-text-subdued: #6d7175;
    --p-card-shadow: 0 0.2rem 0.4rem #dfe3e8;
    --top-bar-background: #00848e;
    --top-bar-background-lighter: #1d9ba4;
    --top-bar-color: #f9fafb;
    --p-frame-offset: 0px;
    font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI,
      Roboto, Helvetica Neue, sans-serif;
    cursor: pointer;
    box-sizing: border-box;
    fill: #292824;
    vertical-align: middle;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 1px rgba(66, 71, 76, 0.45), 0 2px 1px rgba(0, 0, 0, 0.05);
  }

  @media (min-width: 768px) {
    .np-main {
      padding: 123px 0 0;
    }

    .course-card {
      height: auto;
    }

    .np-homepage-hero-cta.np-button {
      border-radius: 30px;
      padding: 32px;
    }

    .np-homepage-hero .np-homepage-headline {
      font-size: 5rem;
    }

    .np-homepage-hero .np-homepage-subheadline {
      font-weight: 800;
      font-size: 18px;
      line-height: 2em;
      letter-spacing: .72px;
      text-align: left;
    }

    .np-stretch-content {
      margin-top: 24px;
    }
  }
</style>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>

<script type="module">
  var slider = tns({
    container: '.np-homepage-featured-courses',
    items: 1,
    nav: false,
    controlsText: ['<i class="fas fa-chevron-left"></i>', '<i class="fas fa-chevron-right"></i>'],
    responsive: {
      768: {
        items: 2
      },
      1200: {
        items: 3
      }
    }
  });
</script>