<footer class="np-footer">
  <div class="np-footer-top">
    {% if current_school.logo_url %}
      <h2 class="np-footer-logo">
        <a href="{% route home %}">
          <img
            alt="{{ current_school.name }}"
            class="np-footer-logo-image"
            src="{{ current_school.logo_url }}"
          />
        </a>
      </h2>
    {% else %}
      <div class="np-school-name np-header-font-color">
        {{ current_school.name }}
      </div>
    {% endif %}

    <nav class="np-footer-social-links">
      <p class="artera-description">
        Artera (WELL Health®) is a SaaS digital health leader in patient communications and the 2021 and 2022 Best in KLAS winner in Patient Outreach.
      </p>  
      <p class="artera-description">
        WELL Health®
      </p>  

      {% if website_footer.show_social_media_links? %}
        <ul class="np-footer-social-links-list">
          {% for social_media_link in website_footer.social_media_links %}
            <li class="np-footer-social-links-item">
              <a
                class="np-footer-social-links-link"
                href="{{ social_media_link.link }}"
                target="_blank" title="{{ social_media_link.name }}"
              >
                <i class="np-footer-social-links-icon
                  fab fa-{{ social_media_link.name }}"
                ></i>
              </a>
            </li>
          {% endfor %}
        </ul>
      {% endif %}
    </nav>
  </div>

  <div class="np-footer-bottom">
    {% if website_footer.show_navigation_links? %}
      <div class="np-footer-navigation">
        <p class="links-header">Navigation</p>
        <ul class="np-footer-navigation-list">
          {% for website_navigation in navigations.footer_navigations %}
            {% if website_navigation.name == "Dashboard" %}
              <li class="np-footer-navigation-item">
                <a
                  class="np-footer-navigation-link"
                  href="{{ website_navigation.path }}"
                  {% if website_navigation.external? %} target="_blank" {% endif %}
                >
                  My Courses
                </a>
              </li>
            {% else %}
              <li class="np-footer-navigation-item">
                <a
                  class="np-footer-navigation-link"
                  href="{{ website_navigation.path }}"
                  {% if website_navigation.external? %} target="_blank" {% endif %}
                >
                  {{ website_navigation.name }}
                </a>
              </li>
            {% endif %}
          {% endfor %}
          <li class="np-footer-navigation-item">
            <a
              class="np-footer-navigation-link"
              href="/app/catalog"
            >
              Catalog
            </a>
          </li>
        </ul>
      </div>
    {% endif %}

    {% if website_footer.show_customer_service_email? and
      website_footer.school_customer_service_email
    %}
      <div class="np-footer-support">
        <div class="np-footer-support-item np-footer-support-help">
          {% t .need_help %}
        </div>
        <a
          class="np-footer-support-item np-footer-support-link"
          href="mailto:{{ website_footer.school_customer_service_email }}"
        >
          {{ website_footer.school_customer_service_email }}
        </a>
      </div>
    {% endif %}
  </div>
</footer>

<style>
  .np-footer {
    border-top: 1px solid #f5f2ff;
  }

  .np-footer-social-links-link, .np-footer-social-links-link-icon {
    color: #000;
  }

  .np-footer-logo-image {
    filter: none;
    opacity: 1;
  }

  .np-footer-navigation-link {
    padding: 0;
    margin: 0;
    margin-bottom: 10px;
  }

  .np-footer-navigation-link, .artera-description, .np-footer-support-item {
    color: #737373;
  }

  .artera-description {
    font-family: Poppins,sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: .56px;
    text-align: left;
  }

  .np-footer-top {
    flex-direction: column;
    align-items: start;
    padding-left: 20px;
  }

  .np-footer-bottom {
    flex-direction: row;
    padding-left: 20px;
    align-items: baseline;
  }

  .np-footer-social-links-item:first-of-type {
    padding-left: 0;
  }

  .links-header, .np-footer-support-help {
    color: #000;
    font-family: Poppins,sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: .56px;
    text-align: left;
    margin: 0;
    margin-bottom: 10px;
  }

  .np-footer-navigation-list {
    flex-direction: column;
    align-items: flex-start;
  }

  @media (min-width: 768px) {
    .artera-description {
      width: 35%;
    }
  
    .np-footer-navigation {
      margin-right: 55px;
    }

    .np-footer-support-help {
      margin-bottom: 14px;
    }

    .np-footer-support {
      flex-direction: column;
      align-items: start;
      margin-right: 0;
    }

    .np-footer-navigation-item {
      padding: 10px 10px 10px 0;
      text-align: left;
    }

    .np-footer-social-links-list {
      padding-left: 0;
    }

    .np-footer-bottom, .np-footer-top {
      flex-direction: column;
      width: 50%;
    }

    .np-footer-top, .np-footer-bottom {
      padding-left: 0;
    }

    .np-footer-bottom {
      align-items: flex-end;
    }
  }
</style>