<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 %}
  </div>

  <div class="np-footer-bottom">
    <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 np-button-color"
                href="{{ social_media_link.link }}"
                target="_blank" title="{{ social_media_link.name }}"
              >
                <i class="np-footer-social-links-icon
                  np-button-color
                  fab fa-{{ social_media_link.name }}"
                ></i>
              </a>
            </li>
          {% endfor %}
        </ul>
      {% endif %}
    </nav>

    {% 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>
        <div class="np-footer-support-item np-footer-support-email">
          {% t .email %}
        </div>
        <a
          class="np-footer-support-item np-footer-support-link np-button-color"
          href="mailto:{{ website_footer.school_customer_service_email }}"
        >
          {{ website_footer.school_customer_service_email }}
        </a>
      </div>
    {% endif %}
  </div>
</footer>

<style>
  @media screen and (min-width: 768px) {
    .np-footer-top {
      flex-direction: column-reverse;
      align-items: flex-end;
    }
  }
</style>