<footer class="np-footer">
  <div class="np-footer-top">
    {% if current_school.logo_url %}
      <h2 class="np-footer-logo">
        <a href="https://front.com">
          <img
            alt="{{ current_school.name }}"
            class="np-footer-logo-image"
            src="https://s3.amazonaws.com/static.northpass.com/Front+Academy/front-logo.png"
          />
        </a>
      </h2>
    {% else %}
      <div class="np-school-name np-header-font-color">
        {{ current_school.name }}
      </div>
    {% endif %}
  </div>

  <div class="np-footer-bottom">
    {% if website_footer.show_navigation_links? %}
      <div class="np-footer-navigation">
        <ul class="np-footer-navigation-list">
            <li class="np-footer-navigation-item">
              <a
                class="np-footer-navigation-link footer-color"
                href="https://help.front.com/"
                target="_blank" 
              >
                Help Center
              </a>
            </li>
            <li class="np-footer-navigation-item">
              <a
                class="np-footer-navigation-link footer-color"
                href="https://community.front.com/"
                target="_blank" 
              >
                Community
              </a>
            </li>
            <li class="np-footer-navigation-item">
              <a
                class="np-footer-navigation-link footer-color"
                href="https://front.com/blog"
                target="_blank" 
              >
                Blog
              </a>
            </li>
            <li class="np-footer-navigation-item">
              <a
                class="np-footer-navigation-link footer-color"
                href="https://changelog.frontapp.com/"
                target="_blank" 
              >
                Product
              </a>
            </li>
            <li class="np-footer-navigation-item">
              <a
                class="np-footer-navigation-link footer-color"
                href="https://community.front.com/product-updates "
                target="_blank" 
              >
                Updates
              </a>
            </li>
            <li class="np-footer-navigation-item">
              <a
                class="np-footer-navigation-link footer-color"
                href="https://www.frontstatus.com/"
                target="_blank" 
              >
                Status Page
              </a>
            </li>
        </ul>
      </div>
    {% endif %}
    <nav class="np-footer-social-links">
      {% 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 footer-color"
                href="{{ social_media_link.link }}"
                target="_blank" title="{{ social_media_link.name }}"
              >
                <i class="np-footer-social-links-icon
                  footer-color
                  fab fa-{{ social_media_link.name }}"
                ></i>
              </a>
            </li>
          {% endfor %}
        </ul>
      {% endif %}
    </nav>

  </div>
</footer>
<style>
  .footer-color {
    color: #001B38;
  }

  @media (min-width:768px) {
    .np-footer {
      padding: 32px 16px;
      max-width: 1440px;
      margin: auto;
    }

    .np-footer-navigation-item:first-child a {
      padding-left:0;
    }
    .np-footer-bottom {
      align-items: baseline;
      margin-top: 1.5rem;
    }
  }
</style>