<footer class="np-footer">
  <div class="np-footer-top">
    <div class="footer-container">
      <a class="feedback-button" target="_blank" href="https://www.surveymonkey.com/r/Y6CRBMF">
        Give Feedback
      </a>
      {% comment %} {% if website_footer.show_navigation_links? %}
        <div class="np-footer-navigation">
          <ul class="np-footer-navigation-list">
            {% for website_navigation in navigations.footer_navigations %}
              {% if website_navigation.external? %}
                <li class="np-footer-navigation-item">
                  <a
                    class="np-footer-navigation-link np-button-color"
                    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 np-button-color"
                href="{% route logout %}"
              >
                Logout
              </a>
            </li>
          </ul>
        </div>
      {% endif %} {% endcomment %}
    </div>
    {% 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">
    {% if website_footer.show_navigation_links? %}
        <div class="np-footer-navigation">
          <ul class="np-footer-navigation-list">
            {% for website_navigation in navigations.footer_navigations %}
              {% if website_navigation.external? %}
                <li class="np-footer-navigation-item">
                  <a
                    class="np-footer-navigation-link np-button-color"
                    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 np-button-color"
                href="{% route logout %}"
              >
                Logout
              </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="footer-support-content">
          <div class="np-footer-support-item np-footer-support-help np-fc-white np-opacity-50">
            {% t .need_help %}
          </div>
          <div class="np-footer-support-item np-footer-support-email np-fc-white np-opacity-50">
            {% t .email %}
          </div>
          <a
            class="np-footer-support-item np-footer-support-link np-button-color"
            href="mailto:{{ website_footer.school_customer_service_email }}"
          >
            {% comment %} {{ website_footer.school_customer_service_email }} {% endcomment %}
            lighthouse@ljhookergroup.com.au
          </a>
        </div>

      </div>
    {% endif %}
  </div>
</footer>

<style>

.np-footer {
  padding-top:0;
}

.np-footer-support-help {
  font-weight: 400 !important;
}

.np-footer-logo-image {
  filter: grayscale(1) contrast(0) brightness(0);
  opacity:1;
}

.support-bottom-text {
  opacity: 0.5;
}
.click-me-text {
  opacity: 1 !important;
  color: #000;
  font-weight: 700;
}
.feedback-button,
.feedback-button:hover {
  background-color:#7c9ac0;
  color:#fff;
}
.footer-support-content {
  display: flex;
  opacity: 0.5;
}
.feedback-button {
  padding: 8px 16px;
  text-decoration: none;
  border-radius:8px;
  font-weight: 500;
  margin-top:32px;
}

.np-footer-social-links-list {
  flex-wrap:wrap;
}

@media (min-width:768px) {
  .feedback-button {
    text-decoration: none;
    font-size: 20px;
  }

  .np-footer-logo-image {
    height:100px;
  }
}
.np-footer-support {
  flex-direction: column;
}

.vertical-line {
  border-left: 1px solid #7c9ac0;
  padding: 0 1.25rem 0 0;
}
.np-footer-social-links-item {
  font-weight:500;
}

.np-footer-social-links-item a {
  color:#000;
  text-decoration:none;
}

@media only screen and (min-width: 768px) {
  .footer-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    }
  .np-footer-navigation-item {
    justify-content: center;
    justify-content: normal;
    }
  .np-footer-navigation-link {
    padding: 0 20px 0 0;
    }
  .np-footer-navigation-list {
    margin-top: 20px;
  }
}
</style>

