{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.enrolled %}
{% if current_person.signed_in? %}
  {% include 'hero_image', image_url: "https://s3.amazonaws.com/static.northpass.com/Terminus/terminus-LMS-academy-3+Homepage+Header.jpg" %}
  {% include "sub_navigation" %}
  <main class="np-main np-dashboard np-subpage-container np-max-width">
    <div class="row np-flex-center">
      <div class="col-xs-12 col-sm-8">
        <div class="np-dashboard-resources-title">
          FEATURED COURSES
        </div>
        {% if courses.featured.any? %}
          <div class="np-homepage-featured-courses row">
            {% for course in courses.featured %}
              <div class="col-xs-12 np-stretch-content" style="margin-bottom: 20px;">
                {% include "cards_featured_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>
      {% if features.training_events? %}
        <div class="np-grid-spacing col-xs-12 col-sm-4">
          <div class="np-dashboard-resources-title">
            UPCOMING EVENTS
          </div>
          <a href="/app/training_events">
            <img class="training-events-link-image" src="https://s3.amazonaws.com/static.northpass.com/Terminus/113748D1-9343-4F14-BB19-2CFB1E9F3935_1_201_a.jpeg" alt="">
          </a>
        </div>
      {% endif %}
      <div class="col-xs-12">
        <div class="np-dashboard-resources-title">
          POPULAR TOPICS
        </div>
        {% include 'popular_topics' %}
      </div>
      <div class="col-xs-12">
        <div class="np-dashboard-resources-title" style="margin-top: 20px;">
          ADDITIONAL RESOURCES
        </div>
        {% include 'additional_resources' %}
      </div>
    </div>
  </main>
{% else %}
  {% include 'public_homepage' %}
{% endif %}
{% include "footer" %}

{% if current_person.signed_in? %}
  <style>
    .np-sub-navigation {
      margin-bottom: 0;
    }

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

    .np-homepage-featured-courses .np-card-content {
      background: #fff;
      border-top-right-radius: 0;
      border-bottom-right-radius: 10px;
      border-bottom-left-radius: 10px;
    }

    .np-homepage-featured-courses .np-card {
      padding: 0;
    }

    .np-homepage-featured-courses .np-card-image {
      object-fit: fill;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      border-bottom-left-radius: 0;
    }

    .np-homepage-featured-courses .np-card-container {
      flex-direction: row;
      box-shadow: none;
      border-radius: 10px;
      border: 2px solid #bac4ca;
      }

    .np-homepage-featured-courses .np-card-content-title {
      color: #5087c7;
    }

    .np-homepage-featured-courses .np-card-content-footer {
      flex-direction: column;
      align-items: normal;
    }

    .np-homepage-featured-courses .np-button {
      width: 40%;
      margin-right: 10px;
      background-color: #feac1a;
      border-radius: 10px;
    }

    .course-button-container {
      margin-top: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .course-button-container > span {
      font-size: 1rem;
      font-weight: 700;
      white-space: nowrap;
      color: #000;
    }

    .training-events-link-container {
      display: flex;
      align-items: center;
    }

    .training-events-link-image {
      width: 100%;
      border-radius: 10px;
    }

    @media (min-width: 768px) {
      .np-homepage-featured-courses .np-card-image {
        width: 40%;
      }

      .np-homepage-featured-courses .np-card-content {
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 0;
      }

      .np-homepage-featured-courses .np-card-image {
        border-top-left-radius: 10px;
        border-top-right-radius: 0;
        border-bottom-left-radius: 10px;
      }

      .training-events-link-image {
        width: auto;
        max-width: 100%;
        max-height: 260px;
      }
    }

    @media (min-width: 1024px) {
      .np-homepage-featured-courses .np-card-container {
        min-height: 260px;
      }
    }
  </style>
{% endif %}