<footer class="uk-padding-large-vertical uk-border-top">
  <div class="uk-container uk-container-center">
    <div class="uk-grid uk-padding-large-left uk-padding-large-right">
      <div class="uk-width-small-1-1 uk-width-medium-7-10 uk-margin-bottom">
        {% if website_footer.show_navigation_links? %}
        <nav>
          <ul class="uk-margin-bottom-remove uk-text-center-small">
            {% for website_navigation in footer_navigations %}
            <li>
              <a href="{{ website_navigation.path }}" {%
                if
                website_navigation.external?
                %} target="_blank" {%
                endif
                %}>
                {{ website_navigation.name }}
              </a>
            </li>
            {% endfor %}
          </ul>
        </nav>
        {% endif %} {% if website_footer.show_customer_service_email? and
        website_footer.school_customer_service_email %}
        <p class="uk-text-center-small">
          {% t .need_help %} {% t .email %}
          <a href="mailto:{{ website_footer.school_customer_service_email }}">
            {{ website_footer.school_customer_service_email }}
          </a>
        </p>
        {% endif %}
      </div>
      <div
        class="{% if website_footer.show_customer_service_email? or website_footer.show_navigation_links? %}uk-width-medium-3-10{% else %}uk-width-medium-1-1{% endif %}">
        {% if website_footer.show_social_media_links? %}
        <nav class="social-links">
          <ul
            class="uk-margin-bottom-remove {% if website_footer.show_customer_service_email? or website_footer.show_navigation_links? %}uk-text-right {% else %}uk-text-center {% endif %} uk-text-center-small">
            {% for social_media_link in website_footer.social_media_links %}
            <li>
              <a href="{{ social_media_link.link }}" class="{{ social_media_link.name }}" target="_blank"
                title="{{ social_media_link.name }}">
                <i class="uk-icon-{{ social_media_link.name }}"></i>
              </a>
            </li>
            {% endfor %}
          </ul>
        </nav>
        {% endif %}
      </div>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  <script>
    $(document).ready(function () {
      $("ul.uk-grid li .uk-panel p.uk-margin-small-bottom").addClass("grid-progress");
      $("ul.uk-grid li .uk-panel p.uk-margin-small-top.uk-margin-large-bottom").addClass("grid-metadata");
      if ($('ul.uk-grid li').length < 3) { $('ul.uk-grid').addClass('grid-centered') };
    });
  </script>
</footer>